refactor: improve code readability and consistency across components

.github/workflows/playwright.yml

@@ -1,5 +1,6 @@
 name: Playwright Tests
-# on:
+on:
+  workflow_dispatch:
 #   push:
 #     branches: [ main ]
 #   pull_request:

README.md

@@ -1,4 +1,9 @@
-[<img alt="Experiment screenshot" src="https://raw.githubusercontent.com/actualwitch/experiment/main/.github/Screenshot.png" />](https://actualwitch.github.io/experiment/)
+<a href="https://actualwitch.github.io/experiment/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset=".github/screenshots/home-dark.png">
+    <img alt="Experiment screenshot" src=".github/screenshots/home-light.png">
+  </picture>
+</a>
 
 ## 🔬 Let's start the <ins>Experiment</ins>
 
@@ -14,4 +19,4 @@ Shall you want to run this repo locally, you can do so by running `dev` script f
 
 ```sh
 bun dev
-```
+```

package.json

@@ -16,6 +16,7 @@
     "dev:spa": "REALM=spa bun --watch run src/entry/server.spa.tsx",
     "format": "bunx biome format --write ./src/*",
     "format:prettier": "prettier ./src/* --write",
+    "lint": "bunx biome lint --write .",
     "test": "bunx playwright test",
     "playwright:update": "bunx playwright install"
   },

src/adapters/anthropic.ts

@@ -5,7 +5,7 @@ import type {
   Tool,
 } from "@anthropic-ai/sdk/resources/index.mjs";
 import type { Message } from "../state/common";
-import { makeRequestTool } from "../state/inference";
+import type { makeRequestTool } from "../state/inference";
 
 export const experimentToAnthropic = (experiment: Message[]): MessageCreateParams | MessageCreateParamsNonStreaming => {
   let system = "";
@@ -24,7 +24,7 @@ export const experimentToAnthropic = (experiment: Message[]): MessageCreateParam
       }
     }
     if (role === "tool") {
-      let thisTool = content;
+      const thisTool = content;
 
       if (typeof thisTool === "object") {
         const tool = thisTool as typeof makeRequestTool;

src/adapters/mistral.ts

@@ -9,7 +9,7 @@ export const experimentToMistral = (experiment: Message[]): ChatCompletionStream
   const tools: ChatCompletionStreamRequest["tools"] = [];
   for (const { role, content } of experiment) {
     if (role === "tool") {
-      let thisTool = content;
+      const thisTool = content;
 
       if (typeof thisTool === "object") {
         tools.push(thisTool as any);

src/adapters/openai.ts

@@ -13,7 +13,7 @@ export const experimentToOpenai = (experiment: Message[]): ChatCompletionCreateP
   const tools: ChatCompletionTool[] = [];
   for (const { role, content } of experiment) {
     if (role === "tool") {
-      let thisTool = content;
+      const thisTool = content;
 
       if (typeof thisTool === "object") {
         tools.push(thisTool as any);

src/components/index.tsx

@@ -10,15 +10,14 @@ export const ForkButton = ({ experiment, parent }: { experiment?: Message[]; par
   return (
     <Button
       type="submit"
-      onClick={(e) => {
+      onClick={() => {
         if (!experiment) return;
-        e.preventDefault();
         setExoeriment(experiment);
         if (parent) setParent(parent);
         navigate("/");
       }}
     >
-      fork experiment
+      Fork Experiment
     </Button>
   );
 };

src/components/view.tsx

@@ -168,8 +168,8 @@ function asTreeNodes(
 function* asTextTreeNodes(input: string) {
   const stack = [];
   let buffer = "";
-  let currentBlock = "p";
-  let level = 0;
+  const currentBlock = "p";
+  const level = 0;
   let index = 0;
   for (const char of input) {
     if (char === "\n" && buffer) {

src/fixtures.ts

@@ -86,3 +86,182 @@ export const FIXTURES = {
 export function isFixture(value: unknown): value is keyof typeof FIXTURES {
   return value ? typeof value === "string" && Object.keys(FIXTURES).includes(value) : false;
 }
+const openaiEventStream = [
+  {
+    index: 0,
+    delta: {
+      role: "assistant",
+      content: null,
+      tool_calls: [
+        {
+          index: 0,
+          id: "call_psZOuVcEAR1Qqvdx3nl1nq7I",
+          type: "function",
+          function: {
+            name: "bio",
+            arguments: "",
+          },
+        },
+      ],
+      refusal: null,
+    },
+    logprobs: null,
+    finish_reason: null,
+  },
+  {
+    index: 0,
+    delta: {
+      tool_calls: [
+        {
+          index: 0,
+          function: {
+            arguments: '{"',
+          },
+        },
+      ],
+    },
+    logprobs: null,
+    finish_reason: null,
+  },
+  {
+    index: 0,
+    delta: {
+      tool_calls: [
+        {
+          index: 0,
+          function: {
+            arguments: "memory",
+          },
+        },
+      ],
+    },
+    logprobs: null,
+    finish_reason: null,
+  },
+  {
+    index: 0,
+    delta: {
+      tool_calls: [
+        {
+          index: 0,
+          function: {
+            arguments: '":"',
+          },
+        },
+      ],
+    },
+    logprobs: null,
+    finish_reason: null,
+  },
+  {
+    index: 0,
+    delta: {
+      tool_calls: [
+        {
+          index: 0,
+          function: {
+            arguments: "User",
+          },
+        },
+      ],
+    },
+    logprobs: null,
+    finish_reason: null,
+  },
+  {
+    index: 0,
+    delta: {
+      tool_calls: [
+        {
+          index: 0,
+          function: {
+            arguments: "'s",
+          },
+        },
+      ],
+    },
+    logprobs: null,
+    finish_reason: null,
+  },
+  {
+    index: 0,
+    delta: {
+      tool_calls: [
+        {
+          index: 0,
+          function: {
+            arguments: " name",
+          },
+        },
+      ],
+    },
+    logprobs: null,
+    finish_reason: null,
+  },
+  {
+    index: 0,
+    delta: {
+      tool_calls: [
+        {
+          index: 0,
+          function: {
+            arguments: " is",
+          },
+        },
+      ],
+    },
+    logprobs: null,
+    finish_reason: null,
+  },
+  {
+    index: 0,
+    delta: {
+      tool_calls: [
+        {
+          index: 0,
+          function: {
+            arguments: " Ade",
+          },
+        },
+      ],
+    },
+    logprobs: null,
+    finish_reason: null,
+  },
+  {
+    index: 0,
+    delta: {
+      tool_calls: [
+        {
+          index: 0,
+          function: {
+            arguments: '."',
+          },
+        },
+      ],
+    },
+    logprobs: null,
+    finish_reason: null,
+  },
+  {
+    index: 0,
+    delta: {
+      tool_calls: [
+        {
+          index: 0,
+          function: {
+            arguments: "}",
+          },
+        },
+      ],
+    },
+    logprobs: null,
+    finish_reason: null,
+  },
+  {
+    index: 0,
+    delta: {},
+    logprobs: null,
+    finish_reason: "stop",
+  },
+];

src/pages/Import.tsx

@@ -74,7 +74,7 @@ export default function () {
                 navigator.clipboard.writeText(JSON.stringify(chat));
               }}
             >
-              Copy as json
+              Copy JSON
             </button>
           </div>
         )}

src/pages/NewExperiment.tsx

@@ -11,7 +11,7 @@ import { ChatPreview, selectionAtom } from "../components/chat";
 import { ExperimentsSidebar } from "../sidebars/experiments";
 import { type Message, type Role, experimentAtom, isDarkModeAtom, parentAtom, templatesAtom } from "../state/common";
 import {
-  availableProvidersAtom,
+  availableProviderOptionsAtom,
   isRunningAtom,
   modelAtom,
   modelOptions,
@@ -127,8 +127,7 @@ export default function NewExperiment() {
   const [role, setRole] = useState<Role>("user");
   const isRunning = useAtomValue(isRunningAtom);
 
-  const [tokenProviders] = useAtom(availableProvidersAtom);
-  const providerOptions = withIds(tokenProviders);
+  const [providerOptions] = useAtom(availableProviderOptionsAtom);
   const [provider, setProvider] = useAtom(selectedProviderAtom);
 
   useEffect(() => {
@@ -281,7 +280,7 @@ export default function NewExperiment() {
       </Column>
       <Sidebar>
         <h3>Actions</h3>
-        {tokenProviders.length > 1 && (
+        {providerOptions.length > 1 && (
           <Select
             label="Provider"
             items={providerOptions}
@@ -322,48 +321,56 @@ export default function NewExperiment() {
             formatOptions={{ minimumFractionDigits: 2 }}
           />
         )}
-        <Button
-          type="submit"
-          disabled={isRunning || experiment.length === 0}
-          onClick={(e) => {
-            e.preventDefault();
-            runExperiment();
-          }}
-        >
-          start experiment
-        </Button>
+        <div>
+          <Button
+            type="submit"
+            disabled={isRunning || experiment.length === 0}
+            onClick={() => {
+              runExperiment();
+            }}
+          >
+            Start Experiment
+          </Button>
+
+          <Button
+            type="submit"
+            onClick={() => {
+              setExperiment([]);
+            }}
+            disabled={isRunning || experiment.length === 0}
+          >
+            Reset
+          </Button>
+        </div>
         {selection !== null && selection.length === 1 && (
           <>
             <h4>This message</h4>
             <div>
               <Button
                 type="submit"
                 onClick={(e) => {
-                  e.preventDefault();
                   setSelection([selection[0], "content"]);
                 }}
               >
-                edit
+                Edit
               </Button>
               <Button
                 type="submit"
                 onClick={(e) => {
-                  e.preventDefault();
                   deleteSelection();
                 }}
               >
-                delete
+                Delete
               </Button>
               <Button
                 type="submit"
-                onClick={async (e) => {
-                  e.preventDefault();
+                onClick={async () => {
                   const name = prompt("Name of the template");
                   if (!name) return;
                   setTemplates({ ...templates, [name]: experiment[selection[0]] });
                 }}
               >
-                template
+                Template
               </Button>
             </div>
           </>