add history components

Author: Yann Leflour

.vscode/settings.json

@@ -2,5 +2,6 @@
   "files.exclude": {
     "ui-sketcher-webview": true,
     "ui-sketcher-extension": true
-  }
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

pnpm-lock.yaml

@@ -5,7 +5,7 @@ module.exports = {
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",
@@ -22,5 +22,6 @@ module.exports = {
       { allowConstantExport: true },
     ],
     "react-hooks/rules-of-hooks": "off",
+    "no-case-declarations": "off",
   },
 };

ui-sketcher-webview/.eslintrc.cjs

@@ -26,6 +26,7 @@
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
+    "use-constant": "^1.1.1",
     "valtio": "^1.12.1"
   },
   "pnpm": {

ui-sketcher-webview/package.json

@@ -1,4 +1,4 @@
-import { proxy, useSnapshot } from "valtio";
+import { useSnapshot } from "valtio";
 import RMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -13,37 +13,6 @@ import {
 } from "react";
 import { ArrowDownCircleFill, ArrowUpSquareFill } from "react-bootstrap-icons";
 
-function useLocal<T extends object | undefined>(input: T) {
-  return useRef(proxy(input)).current as T;
-}
-
-const history = proxy([
-  {
-    type: "system",
-    message: `
-# Hello World
-This is a test
-
-\`\`\`js
-console.log("Hello World!");
-return true;
-\`\`\`
-  
-  `,
-  },
-  { type: "user", message: "Hi!" },
-  { type: "system", message: "Hello!" },
-  { type: "user", message: "Hi!" },
-  { type: "system", message: "Hello!" },
-  { type: "user", message: "Hi!" },
-  { type: "system", message: "Hello!" },
-  { type: "user", message: "Hi!" },
-  { type: "system", message: "Hello!" },
-  { type: "user", message: "Hi!" },
-  { type: "system", message: "Hello!" },
-  { type: "user", message: "Hi!" },
-]);
-
 const Mardown = ({ children }: { children: string }) => (
   <RMarkdown
     remarkPlugins={[remarkGfm]}
@@ -61,6 +30,7 @@ const Code = (
     HTMLElement
   >,
 ) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { children, className, ref, ...rest } = props;
   const match = /language-(\w+)/.exec(className || "");
 
@@ -230,17 +200,14 @@ const Input = ({ onSubmit }: InputProps) => {
 };
 
 export const Chat = () => {
-  const historySnap = useSnapshot(history);
-  const [value] = useState("");
-
-  const onSizeChange = (size: number) => {};
+  const historySnap = useSnapshot(state);
 
   return (
     <div className="flex h-full max-h-full flex-col gap-3 bg-white">
-      <History history={historySnap} />
+      <History history={historySnap.history} />
       <Input
         onSubmit={(data) => {
-          console.warn(data);
+          state.history.push({ type: "user", message: data });
         }}
       />
     </div>

ui-sketcher-webview/src/chat/Chat.tsx

@@ -0,0 +1,133 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { History } from "./History";
+
+const meta: Meta<typeof History> = {
+  component: History,
+};
+
+export default meta;
+type Story = StoryObj<typeof History>;
+
+export const Running: Story = {
+  args: {
+    history: [
+      {
+        id: "1",
+        role: "user",
+        content: `### Hello I need to create a new file
+
+\`\`\`json
+{
+  "test": "test"
+}
+\`\`\``,
+      },
+      {
+        id: "2",
+        role: "system",
+        state: "thinking",
+        steps: [
+          {
+            type: "tools",
+            status: "running",
+            tools: [
+              {
+                id: "1",
+                name: "tool 1",
+                args: { test: "test 1" },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const Fixing: Story = {
+  args: {
+    history: [
+      {
+        id: "1",
+        role: "user",
+        content: "Hello I need to create a new file",
+      },
+      {
+        id: "2",
+        role: "system",
+        state: "thinking",
+        steps: [
+          {
+            type: "tools",
+            status: "done",
+            tools: [
+              {
+                id: "1",
+                status: "error",
+                name: "tool 1",
+                args: { test: "test 1" },
+                output: { error: "error" },
+              },
+            ],
+          },
+          {
+            type: "tools",
+            status: "running",
+            tools: [
+              {
+                id: "1",
+                name: "tool 1",
+                args: { test: "test 1" },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const Done: Story = {
+  args: {
+    history: [
+      {
+        id: "1",
+        role: "user",
+        content: "Hello World",
+      },
+      {
+        id: "2",
+        role: "system",
+        state: "thinking",
+        steps: [
+          {
+            type: "tools",
+            status: "done",
+            tools: [
+              {
+                id: "1",
+                status: "success",
+                name: "tool 1",
+                args: { test: "test 1" },
+                output: { success: true },
+              },
+            ],
+          },
+          {
+            type: "message",
+            content: `I've create a new file for you using:
+
+- Test
+- List
+
+\`\`\`bash
+touch file.json
+\`\`\`
+`,
+          },
+        ],
+      },
+    ],
+  },
+};