Sheet action metadata (#47)

* add metadata to google actions, rename existing actions

* separate out codeblock ui

Author: nuwandavek

apps/src/base/appController.ts

@@ -36,7 +36,7 @@ export abstract class AppController<T> {
   // 0. Exposed actions --------------------------------------------
   @Action({
     labelRunning: "Completing task",
-    labelDone: "Task Completed",
+    labelDone: "Task Done",
     description: "Marks the task as done if the users' task is accomplished.",
     renderBody: ({ taskDone }: { taskDone: boolean }) => {
       return {text: null, code: null}
@@ -48,7 +48,7 @@ export abstract class AppController<T> {
 
   @Action({
     labelRunning: "Responding to user",
-    labelDone: "Replied to user",
+    labelDone: "Reply Sent",
     description: "Responds to the user with the given content.",
     renderBody: ({ content }: { content: string }) => {
       return {text: null, code: null}

apps/src/google/appState.ts

@@ -1,5 +1,5 @@
 import { RPCs } from "web";
-import { AppController } from "../base/appController";
+import { AppController, Action } from "../base/appController";
 import { DefaultAppState } from "../base/appState";
 import { googleSheetInternalState } from "./googleSheetInternalState";
 import { BlankMessageContent, GoogleState } from "web/types";
@@ -31,6 +31,14 @@ export class GoogleAppState extends DefaultAppState<GoogleState> {
 }
 
 export class GoogleController extends AppController<GoogleState> {
+  @Action({
+    labelRunning: "Running AppScript",
+    labelDone: "Sheet Actions",
+    description: "Runs AppScript code in the Google Sheets",
+    renderBody: ({ code }: { code: string }) => {
+      return {text: null, code: code}
+    }
+  })
   async runAppsScriptCode(code: string) {
     if (typeof code === 'object') {
       code = code.code as string

web/src/components/common/ActionStack.tsx

@@ -14,15 +14,7 @@ import { ChatContent } from './ChatContent';
 import { getApp } from "../../helpers/app";
 import 'reflect-metadata';
 import { parseArguments } from '../../planner/plannerActions';
-
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
-import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
-import vsd from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
-import { getPlatformLanguage } from '../../helpers/utils';
-
-SyntaxHighlighter.registerLanguage('python', python);
-SyntaxHighlighter.registerLanguage('sql', sql);
+import { CodeBlock } from './CodeBlock';
 
 function removeThinkingTags(input: string): string {
   return input ? input.replace(/<thinking>[\s\S]*?<\/thinking>/g, '') : input;
@@ -42,18 +34,8 @@ export const ActionStack: React.FC<{status: string, actions: Array<ActionStatusV
   latency
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [controller, setController] = useState<any>(null);
   const currentTool = useSelector((state: RootState) => state.settings.iframeInfo.tool)
-
-  useEffect(() => {
-    const fetchController = async () => {
-      const app = await getApp();
-      setController(app.actionController);
-    };
-
-    fetchController();
-  }, []);
-
+  const controller = getApp().actionController
   const getActionLabels = (action: string, attr: string) => {
     if (controller) {
       const metadata = Reflect.getMetadata('actionMetadata', controller, action);
@@ -88,8 +70,9 @@ export const ActionStack: React.FC<{status: string, actions: Array<ActionStatusV
   const toggleExpand = () => {
     setIsExpanded(!isExpanded)
   }
+
   return (
-    <HStack aria-label={title} className={'action-stack'} justifyContent={'start'} maxWidth={"100%"}> 
+    <HStack aria-label={title} className={'action-stack'} justifyContent={'start'} maxWidth={"100%"} width={isExpanded ? "100%" : ""}> 
       <Box
         bg={'minusxGreen.800'}
         // bg={'minusxBW.600'}
@@ -101,7 +84,7 @@ export const ActionStack: React.FC<{status: string, actions: Array<ActionStatusV
         color={'minusxBW.50'}
         // color={'minusxGreen.800'}
         border={'1px'}
-        maxWidth={'100%'}
+        width={'100%'}
         position="relative"
       > 
         {content && <>
@@ -149,9 +132,7 @@ export const ActionStack: React.FC<{status: string, actions: Array<ActionStatusV
             </HStack>
 
             { code && <Box width={"100%"} p={2} bg={"#1e1e1e"} borderRadius={5}>
-              <SyntaxHighlighter language={getPlatformLanguage(currentTool)} style={vsd}>
-                {code || ""}
-              </SyntaxHighlighter>
+              <CodeBlock code={code || ""} tool={currentTool}/>
              </Box>
             }
 
@@ -218,7 +199,7 @@ const scrollUp = keyframes`
   `;
 
 const PlanningActionStack: React.FC = () => {
-  const planningActions = ['Planning', 'Understanding App state', 'Thinking', 'Finalizing Actions', 'Validating Answers']
+  const planningActions = ['Planning next steps', 'Thinking about the question', 'Understanding App state', 'Finalizing Actions', 'Validating Answers']
   const [currentTitleIndex, setCurrentTitleIndex] = useState(0);
   useEffect(() => {
     const intervalId = setInterval(() => {
@@ -235,7 +216,8 @@ const PlanningActionStack: React.FC = () => {
       borderRadius={5}
       color={'minusxBW.50'}
       width={"100%"}
-      position="relative"
+      display={"flex"}
+      justifyContent={"center"}
     >
       <HStack>
         <Box>
@@ -245,4 +227,4 @@ const PlanningActionStack: React.FC = () => {
       </HStack>
     </Box>
   </HStack>
-)}
+)}

web/src/components/common/CodeBlock.tsx

@@ -0,0 +1,20 @@
+import React from 'react-redux'
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
+
+import vsd from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
+import { getPlatformLanguage } from '../../helpers/utils';
+
+SyntaxHighlighter.registerLanguage('sql', sql);
+SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('javascript', javascript);
+
+export const CodeBlock = ({ code, tool }: { code: string, tool: string }) => {
+  return (
+    <SyntaxHighlighter language={getPlatformLanguage(tool)} style={vsd}>
+      {code}
+    </SyntaxHighlighter>
+  )
+}

web/src/components/common/UserConfirmation.tsx

@@ -16,42 +16,27 @@ import { setUserConfirmationInput, toggleUserConfirmation } from '../../state/ch
 import { useSelector } from 'react-redux'
 import { RootState } from '../../state/store'
 import { useEffect } from 'react'
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
-import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
-import vsd from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
-// import { setConfirmChanges } from '../../state/settings/reducer';
-import { getPlatformLanguage } from '../../helpers/utils';
-
-SyntaxHighlighter.registerLanguage('sql', sql);
-SyntaxHighlighter.registerLanguage('python', python);
+import { CodeBlock } from './CodeBlock'
 
 
 export const UserConfirmation = () => {
   const thread = useSelector((state: RootState) => state.chat.activeThread)
   const activeThread = useSelector((state: RootState) => state.chat.threads[thread])
   const userConfirmation = activeThread.userConfirmation
   const currentTool = useSelector((state: RootState) => state.settings.iframeInfo.tool)
-  const confirmChanges = useSelector((state: RootState) => state.settings.confirmChanges)
 
   useEffect(() => {
     dispatch(setUserConfirmationInput('NULL'))
     dispatch(toggleUserConfirmation({'show': false, 'content': ''}))
   }, []);
 
-  // const updateConfirmChanges = (value: boolean) => {
-  //   dispatch(setConfirmChanges(value))
-  // }
-
 
   if (!userConfirmation.show) return null
   return (
     <VStack alignItems={"center"}>
       <Text fontWeight={"bold"} fontSize={17}>Accept below code?</Text>
       <Box width={"100%"} p={2} bg={"#1e1e1e"} borderRadius={5}>
-        <SyntaxHighlighter language={getPlatformLanguage(currentTool)} style={vsd}>
-          {userConfirmation.content}
-        </SyntaxHighlighter>
+        <CodeBlock code={userConfirmation.content} tool={currentTool}/>
       </Box>
       {/*two buttons with yes and no*/}
       <HStack width={"80%"}>

web/src/helpers/utils.ts

@@ -17,7 +17,8 @@ const PLATFORM_LANGUAGES: {
   [key: string]: string
 } = {
   jupyter: 'python',
-  metabase: 'sql'
+  metabase: 'sql',
+  google: 'javascript'
 }
 
 export const getPlatformLanguage = (platform: string): string => {