commit

api-service/codegen/codegen.py

@@ -24,9 +24,9 @@
 from codegen.agent import CodegenAgent, CodegenAgentExecutor
 from codegen.callbacks.logs import LogsCallbackHandler
 from codegen.prompt import (
-    PREFIX,
-    SUFFIX,
-    FORMAT_INSTRUCTIONS,
+    SYSTEM_PREFIX,
+    SYSTEM_SUFFIX,
+    SYSTEM_FORMAT_INSTRUCTIONS,
     HUMAN_INSTRUCTIONS_PREFIX,
     HUMAN_INSTRUCTIONS_SUFFIX,
 )
@@ -131,9 +131,9 @@ def from_playground_and_database(
         agent = CodegenAgent.from_llm_and_tools(
             llm=llm,
             tools=tools,
-            prefix=PREFIX,
-            suffix=SUFFIX,
-            format_instructions=FORMAT_INSTRUCTIONS,
+            prefix=SYSTEM_PREFIX,
+            suffix=SYSTEM_SUFFIX,
+            format_instructions=SYSTEM_FORMAT_INSTRUCTIONS,
             input_variables=Codegen.input_variables,
             callback_manager=callback_manager,
         )

api-service/codegen/prompt.py

@@ -1,14 +1,14 @@
 # - ALWAYS use `import` to import packages.
 # - Make sure any code you generate is JSON escaped.
-PREFIX = """You are an AI JavaScript developer assistant.
+SYSTEM_PREFIX = """You are an AI JavaScript developer assistant.
 - NEVER deploy code before you run it and are sure it is working.
 - You are building an Express server that handles REST API.
 - The `express` package is already installed.
 - Follow the user's instructions carefully & to the letter.
 - Minimize any other prose.
 - You have access to the following tools:"""
 
-FORMAT_INSTRUCTIONS = """"The way you use the tools is by specifying a XML snippet.
+SYSTEM_FORMAT_INSTRUCTIONS = """"The way you use the tools is by specifying a XML snippet.
 Specifically, this XML snippet MUST have a `<action tool="$TOOL_NAME">$INPUT</action>` element with the name of the tool in the `tool` attribute and input for the tool inside the XML tag.
 
 Here is an example of a valid XML code snippet:
@@ -33,7 +33,7 @@
 Thought: I now know the final server code and can show it.
 Final Answer: the final answer"""
 
-SUFFIX = """Begin! Reminder to NEVER use tools you don't have access. Reminder to ALWAYS use the exact the action `Final Answer` when you know the final answer."""
+SYSTEM_SUFFIX = """Begin! Reminder to NEVER use tools you don't have access. Reminder to ALWAYS use the exact the action `Final Answer` when you know the final answer."""
 
 HUMAN_INSTRUCTIONS_PREFIX = [
     {

components/Editor/RightSidebar/Logs/LogStream.tsx

@@ -22,18 +22,18 @@ function LogStream({ logs, rawLogs }: Props) {
   return (
     <div
       className="
-      flex-1
-      overflow-auto
-      text-xs
-      tracking-wide
-      font-sans
-      scroller
-      whitespace-pre-wrap
-      py-4
-      flex
-      flex-col
-      px-2
-  ">
+        flex-1
+        overflow-auto
+        text-xs
+        tracking-wide
+        font-sans
+        scroller
+        whitespace-pre-wrap
+        py-4
+        flex
+        flex-col
+        px-2
+    ">
       {rawLogs &&
         <ReactMarkdown>
           {rawLogs}

components/Editor/RightSidebar/Logs/Tool/AskHuman.tsx

@@ -0,0 +1,41 @@
+import {
+  ReactNode
+} from 'react'
+import {
+  HelpCircle,
+} from 'lucide-react'
+
+import { ToolName, ToolLog } from 'db/types'
+
+import Base from './Base'
+
+export interface Props {
+  log: ToolLog
+}
+
+function AskHuman({
+  log,
+}: Props) {
+  if (log.tool_name !== ToolName.AskHuman) throw new Error(`'${log.tool_name}': This component supports only logs for '${ToolName.AskHuman}' tool`)
+
+  let body: ReactNode = null
+  if (log.tool_input.trim()) {
+    body = (
+      <div className="
+        pt-2
+      ">
+        TODO
+      </div>
+    )
+  }
+
+  return (
+    <Base
+      log={log}
+      icon={<HelpCircle size="16px" />}
+      body={body}
+    />
+  )
+}
+
+export default AskHuman

components/Editor/RightSidebar/Logs/Tool/Base.tsx

@@ -20,11 +20,17 @@ function BaseTool({
   if (log.type !== LogType.Tool) throw new Error(`'${log.type}': This component supports only logs of type  '${log.type}'`)
 
   return (
-    <div>
+    <div className="
+      flex
+      flex-col
+      items-stretch
+      space-y-1
+    ">
       <div className="
         flex
         justify-between
         items-center
+        pb-2
       ">
         <div className="
           flex
@@ -49,7 +55,6 @@ function BaseTool({
       {log.tool_output?.trim() &&
         <div className="
           border-t
-          mt-2
           pt-2
         ">
           <ReactMarkdown>

components/Editor/RightSidebar/Logs/Tool/index.tsx

@@ -1,5 +1,6 @@
 import { ToolLog, ToolName } from 'db/types'
 
+import AskHuman from './AskHuman'
 import CurlServer from './CurlServer'
 import InstallNPMDeps from './InstallNPMDeps'
 import RunCode from './RunCode'
@@ -18,6 +19,8 @@ function Tool({
       return <InstallNPMDeps log={log} />
     case ToolName.RunJavaScriptCode:
       return <RunCode log={log} />
+    case ToolName.AskHuman:
+      return <AskHuman log={log} />
     default:
       throw new Error(`'${log.tool_name}': Unknown tool log`)
   }

db/types.ts

@@ -4,6 +4,7 @@ export enum LogType {
 }
 
 export enum ToolName {
+  AskHuman = 'AskHuman',
   InstallNPMDependencies = 'InstallNPMDependencies',
   RunJavaScriptCode = 'RunJavaScriptCode',
   CurlJavaScriptServer = 'CurlJavaScriptServer',