Merge pull request #118 from zamm-dev/ollama

Add Ollama support

.gitmodules

@@ -6,7 +6,10 @@
 	url = https://github.com/amosjyng/neodrag.git
 [submodule "forks/async-openai"]
 	path = forks/async-openai
-	url = git@github.com:amosjyng/async-openai.git
+	url = https://github.com/amosjyng/async-openai.git
 [submodule "forks/rvcr"]
 	path = forks/rvcr
-	url = git@github.com:amosjyng/rvcr.git
+	url = https://github.com/amosjyng/rvcr.git
+[submodule "forks/ollama-rs"]
+	path = forks/ollama-rs
+	url = https://github.com/zamm-dev/ollama-rs.git

src-svelte/src/lib/ApiCallReferenceLink.svelte

@@ -6,7 +6,7 @@
 </script>
 
 {#if nolink}
-  <span>{apiCall.snippet}</span>
+  <span class="nolink">{apiCall.snippet}</span>
 {:else}
   <a href="/api-calls/{apiCall.id}">{apiCall.snippet}</a>
 {/if}
@@ -19,9 +19,6 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  }
-
-  span {
-    font-style: italic;
+    line-height: 1.22rem;
   }
 </style>

src-svelte/src/lib/__mocks__/MockRemount.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  let visible = true;
+
+  function remount() {
+    visible = false;
+    setTimeout(() => (visible = true), 50);
+  }
+</script>
+
+<button on:click={remount}>Remount</button>
+
+{#if visible}
+  <slot />
+{/if}

src-svelte/src/lib/bindings.ts

@@ -81,6 +81,8 @@ export type VariantMetadata = {
   variants?: LlmCallReference[];
   sibling_variants?: LlmCallReference[];
 };
+export type ApiKeys = { openai: string | null };
+export type Prompt = ({ type: "Chat" } & ChatPrompt) | { type: "Unknown" };
 export type ChatArgs = {
   provider: Service;
   llm: string;
@@ -89,9 +91,8 @@ export type ChatArgs = {
   previous_call_id?: string | null;
   canonical_id?: string | null;
 };
-export type Prompt = ({ type: "Chat" } & ChatPrompt) | { type: "Unknown" };
 export type DatabaseCounts = { num_api_keys: number; num_llm_calls: number };
-export type Service = "OpenAI" | { Unknown: string };
+export type Service = "OpenAI" | "Ollama" | { Unknown: string };
 export type Preferences = {
   version?: string | null;
   animations_on?: boolean | null;
@@ -134,4 +135,3 @@ export type LlmCall = {
   conversation?: ConversationMetadata;
   variation?: VariantMetadata;
 };
-export type ApiKeys = { openai: string | null };

src-svelte/src/routes/api-calls/ApiCalls.playwright.test.ts

@@ -22,19 +22,22 @@ describe("Api Calls endless scroll test", () => {
     browser = await chromium.launch({ headless: true });
     context = await browser.newContext();
     context.setDefaultTimeout(PLAYWRIGHT_TIMEOUT);
-    page = await context.newPage();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
 
+  beforeEach(async () => {
+    page = await context.newPage();
+    page.setDefaultTimeout(PLAYWRIGHT_TIMEOUT);
     if (DEBUG_LOGGING) {
       page.on("console", (msg) => {
         console.log(msg);
       });
     }
   });
 
-  afterAll(async () => {
-    await browser.close();
-  });
-
   const getScrollElement = async () => {
     const url = `http://localhost:6006/?path=/story/screens-llm-call-list--full`;
     await page.goto(url);
@@ -61,7 +64,9 @@ describe("Api Calls endless scroll test", () => {
     const lastMessageContainer = apiCallsScrollElement.locator(
       "a:nth-last-child(2) .message.instance .text-container",
     );
-    await expect(lastMessageContainer).toHaveText(expectedValue);
+    await expect(lastMessageContainer).toHaveText(expectedValue, {
+      timeout: PLAYWRIGHT_TIMEOUT,
+    });
   };
 
   test(

src-svelte/src/routes/api-calls/ApiCalls.svelte

@@ -6,6 +6,7 @@
   import { onMount } from "svelte";
   import EmptyPlaceholder from "$lib/EmptyPlaceholder.svelte";
   import IconAdd from "~icons/mingcute/add-fill";
+  import ApiCallReference from "$lib/ApiCallReference.svelte";
 
   const PAGE_SIZE = 50;
   const MIN_MESSAGE_WIDTH = "5rem";
@@ -82,6 +83,13 @@
       });
   }
 
+  function asReference(call: LightweightLlmCall) {
+    return {
+      id: call.id,
+      snippet: call.response_message.text.trim(),
+    };
+  }
+
   onMount(() => {
     resizeMessageWidth();
     window.addEventListener("resize", resizeMessageWidth);
@@ -115,7 +123,13 @@
             <a href={`/api-calls/${call.id}`}>
               <div class="message instance">
                 <div class="text-container">
-                  <div class="text">{call.response_message.text}</div>
+                  <div class="text">
+                    <ApiCallReference
+                      selfContained
+                      nolink
+                      apiCall={asReference(call)}
+                    />
+                  </div>
                 </div>
                 <div class="time">{formatTimestamp(call.timestamp)}</div>
               </div>

src-svelte/src/routes/api-calls/[slug]/Actions.svelte

@@ -2,7 +2,12 @@
   import InfoBox from "$lib/InfoBox.svelte";
   import { type LlmCall } from "$lib/bindings";
   import { lastMessageId, conversation } from "../../chat/Chat.svelte";
-  import { canonicalRef, prompt } from "../new/ApiCallEditor.svelte";
+  import {
+    canonicalRef,
+    prompt,
+    provider,
+    llm,
+  } from "../new/ApiCallEditor.svelte";
   import { goto } from "$app/navigation";
   import { snackbarError } from "$lib/snackbar/Snackbar.svelte";
   import Button from "$lib/controls/Button.svelte";
@@ -26,6 +31,10 @@
       snippet: apiCall.response.completion.text,
     });
     prompt.set(apiCall.request.prompt);
+    if (typeof apiCall.llm.provider === "string") {
+      provider.set(apiCall.llm.provider);
+    }
+    llm.set(apiCall.llm.requested);
 
     goto("/api-calls/new/");
   }

src-svelte/src/routes/api-calls/[slug]/ApiCall.test.ts

@@ -11,10 +11,16 @@ import {
 import {
   canonicalRef,
   prompt,
+  provider,
+  llm,
   getDefaultApiCall,
   resetNewApiCall,
 } from "../new/ApiCallEditor.svelte";
-import { EDIT_CANONICAL_REF, EDIT_PROMPT } from "../new/test.data";
+import {
+  EDIT_CANONICAL_REF,
+  EDIT_PROMPT,
+  START_PROMPT,
+} from "../new/test.data";
 import { TauriInvokePlayback } from "$lib/sample-call-testing";
 import ApiCall from "./ApiCall.svelte";
 import { get } from "svelte/store";
@@ -176,6 +182,39 @@ describe("Individual API call", () => {
       expect(get(prompt)).toEqual(EDIT_PROMPT);
     });
     expect(get(canonicalRef)).toEqual(EDIT_CANONICAL_REF);
+    expect(get(provider)).toEqual("OpenAI");
+    expect(get(llm)).toEqual("gpt-4");
+    expect(get(mockStores.page).url.pathname).toEqual("/api-calls/new/");
+  });
+
+  test("can edit Ollama API call", async () => {
+    playback.addSamples(
+      "../src-tauri/api/sample-calls/get_api_call-ollama.yaml",
+    );
+    render(ApiCall, { id: "506e2d1f-549c-45cc-ad65-57a0741f06ee" });
+    // everything else is the same as the previous test, starting now ...
+    expect(tauriInvokeMock).toHaveReturnedTimes(1);
+    await waitFor(() => {
+      screen.getByText("Hello, does this work?");
+    });
+    expect(get(canonicalRef)).toBeUndefined();
+    expect(get(prompt)).toEqual(getDefaultApiCall());
+    expect(get(mockStores.page).url.pathname).toEqual("/");
+
+    const editButton = await waitFor(() => screen.getByText("Edit API call"));
+    userEvent.click(editButton);
+    await waitFor(() => {
+      expect(get(prompt)).toEqual(START_PROMPT);
+    });
+    expect(get(canonicalRef)).toEqual({
+      id: "506e2d1f-549c-45cc-ad65-57a0741f06ee",
+      snippet:
+        // eslint-disable-next-line max-len
+        "Hello there! Yes, it looks like I'm functioning properly. I'm ZAMM, a chat program designed to assist and converse with you. I'm happy to be here and help answer any questions or topics you'd like to discuss. What's on your mind today?",
+    });
+    // ... until now
+    expect(get(provider)).toEqual("Ollama");
+    expect(get(llm)).toEqual("llama3:8b");
     expect(get(mockStores.page).url.pathname).toEqual("/api-calls/new/");
   });
 });

src-svelte/src/routes/api-calls/[slug]/ApiCallDisplay.svelte

@@ -232,6 +232,10 @@
     height: 50%;
   }
 
+  .variation-links li :global(span.nolink) {
+    font-style: italic;
+  }
+
   .conversation-links {
     display: flex;
     flex-direction: column;

src-svelte/src/routes/api-calls/new/ApiCallEditor.stories.ts

@@ -2,6 +2,7 @@ import ApiCallEditorComponent from "./ApiCallEditor.svelte";
 import type { StoryObj } from "@storybook/svelte";
 import SvelteStoresDecorator from "$lib/__mocks__/stores";
 import { CONTINUE_CONVERSATION_CALL } from "../[slug]/sample-calls";
+import { EMOJI_CANONICAL_REF } from "./test.data";
 
 export default {
   component: ApiCallEditorComponent,
@@ -49,3 +50,17 @@ Busy.parameters = {
     },
   },
 };
+
+// note: this also applies to the API calls list, but it's easier to test here
+export const WithEmoji: StoryObj = Template.bind({}) as any;
+WithEmoji.parameters = {
+  stores: {
+    apiCallEditing: {
+      canonicalRef: EMOJI_CANONICAL_REF,
+      prompt: {
+        type: "Chat",
+        messages: [{ role: "System", text: "" }],
+      },
+    },
+  },
+};