From e05ff315b58a81ca055d115ad7c9b0ca55e629e4 Mon Sep 17 00:00:00 2001
From: lublagg <lvblagg@gmail.com>
Date: Thu, 19 Dec 2024 19:52:52 -0500
Subject: [PATCH] checkpoint: user can select assistant id when in dev mode.

---
 src/app-config.json                          |  6 ---
 src/components/App.tsx                       | 13 +++--
 src/components/developer-options.tsx         | 44 +++++++++++++--
 src/constants.ts                             |  2 +
 src/{ => contexts}/app-config-context.ts     |  2 +-
 src/{ => contexts}/app-config-provider.tsx   | 14 +++--
 src/contexts/open-ai-connection-provider.tsx | 23 ++++++++
 src/hooks/use-app-config-context.ts          |  2 +-
 src/hooks/use-assistant-store.ts             | 15 ++----
 src/hooks/use-open-ai-context.ts             | 11 ++++
 src/index.tsx                                |  7 ++-
 src/models/app-config-model.ts               | 21 ++------
 src/models/assistant-model.ts                | 56 ++++++++++----------
 src/test-utils/app-config-provider.tsx       |  2 +-
 src/types.ts                                 |  6 ---
 src/utils/llm-utils.ts                       |  9 ----
 src/utils/openai-utils.ts                    | 12 +----
 17 files changed, 137 insertions(+), 108 deletions(-)
 rename src/{ => contexts}/app-config-context.ts (66%)
 rename src/{ => contexts}/app-config-provider.tsx (65%)
 create mode 100644 src/contexts/open-ai-connection-provider.tsx
 create mode 100644 src/hooks/use-open-ai-context.ts
 delete mode 100644 src/utils/llm-utils.ts

diff --git a/src/app-config.json b/src/app-config.json
index 2c22176..2141966 100644
--- a/src/app-config.json
+++ b/src/app-config.json
@@ -2,12 +2,6 @@
   "accessibility": {
     "keyboardShortcut": "ctrl+?"
   },
-  "assistant": {
-    "assistantId": "asst_xmAX5oxByssXrkBymMbcsVEm",
-    "instructions": "You are DAVAI, a Data Analysis through Voice and Artificial Intelligence partner. You are an intermediary for a user who is blind who wants to interact with data tables in a data analysis app named CODAP.",
-    "modelName": "gpt-4o-mini",
-    "useExisting": true
-  },
   "dimensions": {
     "height": 680,
     "width": 380
diff --git a/src/components/App.tsx b/src/components/App.tsx
index e35f2d6..89d8189 100755
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -3,11 +3,12 @@ import { observer } from "mobx-react-lite";
 import { initializePlugin, selectSelf } from "@concord-consortium/codap-plugin-api";
 import { useAppConfigContext } from "../hooks/use-app-config-context";
 import { useAssistantStore } from "../hooks/use-assistant-store";
+import { useOpenAIContext } from "../hooks/use-open-ai-context";
 import { ChatInputComponent } from "./chat-input";
 import { ChatTranscriptComponent } from "./chat-transcript";
 import { ReadAloudMenu } from "./readaloud-menu";
 import { KeyboardShortcutControls } from "./keyboard-shortcut-controls";
-import { DAVAI_SPEAKER, GREETING, USER_SPEAKER } from "../constants";
+import { DAVAI_SPEAKER, defaultAssistantId, GREETING, USER_SPEAKER } from "../constants";
 import { DeveloperOptionsComponent } from "./developer-options";
 import { getUrlParam } from "../utils/utils";
 
@@ -34,7 +35,9 @@ export const App = observer(() => {
   useEffect(() => {
     initializePlugin({pluginName: kPluginName, version: kVersion, dimensions});
     selectSelf();
-    assistantStore.initialize();
+    if (!isDevMode) {
+      assistantStore.initializeAssistant(defaultAssistantId);
+    }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -104,10 +107,6 @@ export const App = observer(() => {
     }
   };
 
-  if (!assistantStore.assistant) {
-    return <div>Loading...</div>;
-  }
-
   return (
     <div className="App">
       <header>
@@ -142,7 +141,7 @@ export const App = observer(() => {
         </div>
       }
       <ChatInputComponent
-        disabled={!assistantStore.thread && !appConfig.isAssistantMocked}
+        disabled={!assistantStore.assistant || !appConfig.isAssistantMocked}
         keyboardShortcutEnabled={keyboardShortcutEnabled}
         shortcutKeys={keyboardShortcutKeys}
         onSubmit={handleChatInputSubmit}
diff --git a/src/components/developer-options.tsx b/src/components/developer-options.tsx
index 67c4fe6..1b85691 100644
--- a/src/components/developer-options.tsx
+++ b/src/components/developer-options.tsx
@@ -1,9 +1,10 @@
-import React from "react";
+import React, { SyntheticEvent, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { AssistantModelType } from "../models/assistant-model";
 import { useAppConfigContext } from "../hooks/use-app-config-context";
 
 import "./developer-options.scss";
+import { useOpenAIContext } from "../hooks/use-open-ai-context";
 
 interface IProps {
   assistantStore: AssistantModelType;
@@ -14,9 +15,46 @@ interface IProps {
 
 export const DeveloperOptionsComponent = observer(function DeveloperOptions({assistantStore, onCreateThread, onDeleteThread, onMockAssistant}: IProps) {
   const appConfig = useAppConfigContext();
+  const apiConnection = useOpenAIContext();
+  const [assistantOptions, setAssistantOptioms] = useState<string[]>();
+
+  useEffect(() => {
+    const fetchAssistants = async () => {
+     try {
+      const res = await apiConnection.beta.assistants.list();
+      const assistantIds = res.data.map(asst => asst.id);
+      setAssistantOptioms(assistantIds);
+     } catch (err) {
+      console.error(err);
+     }
+    };
+
+    fetchAssistants();
+  }, [apiConnection.beta.assistants]);
+
+  const handleSetSelectedAssistant = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const id = e.target.value;
+    assistantStore.initializeAssistant(id);
+  };
+
   return (
     <div className="developer-options" data-testid="developer-options">
       <label htmlFor="mock-assistant-checkbox" data-testid="mock-assistant-checkbox-label">
+        <select
+          value={assistantStore.assistantId ? assistantStore.assistantId : "default"}
+          onChange={handleSetSelectedAssistant}
+        >
+          <option value="default" disabled>
+            -- Select an assistant --
+          </option>
+          {assistantOptions?.map((id) => {
+            return (
+              <option aria-selected={assistantStore.assistantId === id} key={id}>
+                {id}
+              </option>
+            );
+          })}
+        </select>
         <input
           checked={appConfig.isAssistantMocked}
           data-testid="mock-assistant-checkbox"
@@ -28,14 +66,14 @@ export const DeveloperOptionsComponent = observer(function DeveloperOptions({ass
       </label>
       <button
         data-testid="delete-thread-button"
-        disabled={!assistantStore.thread}
+        disabled={!assistantStore.assistant || !assistantStore.thread}
         onClick={onDeleteThread}
       >
         Delete Thread
       </button>
       <button
         data-testid="new-thread-button"
-        disabled={assistantStore.thread || appConfig.isAssistantMocked}
+        disabled={!assistantStore.assistant || assistantStore.thread || appConfig.isAssistantMocked}
         onClick={onCreateThread}
       >
         New Thread
diff --git a/src/constants.ts b/src/constants.ts
index ecfae24..1210fc7 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -3,3 +3,5 @@ export const DAVAI_SPEAKER = "DAVAI";
 export const USER_SPEAKER = "User";
 
 export const GREETING = `Hello! I'm DAVAI, your Data Analysis through Voice and Artificial Intelligence partner.`;
+
+export const defaultAssistantId = "asst_xmAX5oxByssXrkBymMbcsVEm";
diff --git a/src/app-config-context.ts b/src/contexts/app-config-context.ts
similarity index 66%
rename from src/app-config-context.ts
rename to src/contexts/app-config-context.ts
index 58a185a..7b81cf0 100644
--- a/src/app-config-context.ts
+++ b/src/contexts/app-config-context.ts
@@ -1,4 +1,4 @@
 import { createContext } from "react";
-import { AppConfigModelType } from "./models/app-config-model";
+import { AppConfigModelType } from "../models/app-config-model";
 
 export const AppConfigContext = createContext<AppConfigModelType | undefined>(undefined);
diff --git a/src/app-config-provider.tsx b/src/contexts/app-config-provider.tsx
similarity index 65%
rename from src/app-config-provider.tsx
rename to src/contexts/app-config-provider.tsx
index b6b10d2..d075da8 100644
--- a/src/app-config-provider.tsx
+++ b/src/contexts/app-config-provider.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { AppConfig, isAppMode } from "./types";
-import appConfigJson from "./app-config.json";
-import { AppConfigModel, AppConfigModelSnapshot } from "./models/app-config-model";
-import { getUrlParam } from "./utils/utils";
+import { AppConfig, isAppMode } from "../types";
+import appConfigJson from "../app-config.json";
+import { AppConfigModel, AppConfigModelSnapshot } from "../models/app-config-model";
+import { getUrlParam } from "../utils/utils";
 import { AppConfigContext } from "./app-config-context";
 
 export const loadAppConfig = (): AppConfig => {
@@ -21,5 +21,9 @@ export const loadAppConfig = (): AppConfig => {
 export const AppConfigProvider = ({ children }: { children: React.ReactNode }) => {
   const appConfigSnapshot = loadAppConfig() as AppConfigModelSnapshot;
   const appConfig = AppConfigModel.create(appConfigSnapshot);
-  return <AppConfigContext.Provider value={appConfig}>{children}</AppConfigContext.Provider>;
+  return (
+    <AppConfigContext.Provider value={appConfig}>
+      {children}
+    </AppConfigContext.Provider>
+  );
 };
diff --git a/src/contexts/open-ai-connection-provider.tsx b/src/contexts/open-ai-connection-provider.tsx
new file mode 100644
index 0000000..bab1132
--- /dev/null
+++ b/src/contexts/open-ai-connection-provider.tsx
@@ -0,0 +1,23 @@
+import React, { createContext } from "react";
+import { OpenAI } from "openai";
+
+export const createNewConnection = () => {
+  return new OpenAI({
+    apiKey: process.env.REACT_APP_OPENAI_API_KEY || "fake-key",
+    baseURL: process.env.REACT_APP_OPENAI_BASE_URL,
+    dangerouslyAllowBrowser: true,
+    organization: "org-jbU1egKECzYlQI73HMMi7EOZ",
+    project: "proj_VsykADfoZHvqcOJUHyVAYoDG",
+  });
+};
+
+export const OpenAIConnectionContext = createContext<OpenAI|undefined>(undefined);
+
+export const OpenAIConnectionProvider = ({ children }: {children: React.ReactNode}) => {
+  const apiConnection = createNewConnection();
+  return (
+    <OpenAIConnectionContext.Provider value={apiConnection}>
+      {children}
+    </OpenAIConnectionContext.Provider>
+  )
+}
\ No newline at end of file
diff --git a/src/hooks/use-app-config-context.ts b/src/hooks/use-app-config-context.ts
index cac532d..4a2b39e 100644
--- a/src/hooks/use-app-config-context.ts
+++ b/src/hooks/use-app-config-context.ts
@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { AppConfigModelType } from "../models/app-config-model";
-import { AppConfigContext } from "../app-config-context";
+import { AppConfigContext } from "../contexts/app-config-context";
 
 export const useAppConfigContext = (): AppConfigModelType => {
   const context = useContext(AppConfigContext);
diff --git a/src/hooks/use-assistant-store.ts b/src/hooks/use-assistant-store.ts
index eb4b94c..cda4425 100644
--- a/src/hooks/use-assistant-store.ts
+++ b/src/hooks/use-assistant-store.ts
@@ -1,21 +1,14 @@
 import { useMemo } from "react";
-import { useAppConfigContext } from "./use-app-config-context";
 import { AssistantModel } from "../models/assistant-model";
 import { useChatTranscriptStore } from "./use-chat-transcript-store";
+import { useOpenAIContext } from "./use-open-ai-context";
 
 export const useAssistantStore = () => {
-  const appConfig = useAppConfigContext();
+  const apiConnection = useOpenAIContext();
   const transcriptStore = useChatTranscriptStore();
-  const { assistantId, instructions, modelName, useExisting } = appConfig.assistant;
   const assistantStore = useMemo(() => {
-    return AssistantModel.create({
-      assistantId,
-      modelName,
-      instructions,
-      transcriptStore,
-      useExisting,
-    });
-  }, [assistantId, instructions, modelName, transcriptStore, useExisting]);
+    return AssistantModel.create({transcriptStore, apiConnection});
+  }, [transcriptStore, apiConnection]);
 
   return assistantStore;
 };
diff --git a/src/hooks/use-open-ai-context.ts b/src/hooks/use-open-ai-context.ts
new file mode 100644
index 0000000..5cc8370
--- /dev/null
+++ b/src/hooks/use-open-ai-context.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { OpenAI } from "openai";
+import { OpenAIConnectionContext } from "../contexts/open-ai-connection-provider";
+
+export const useOpenAIContext = (): OpenAI => {
+  const context = useContext(OpenAIConnectionContext);
+  if (!context) {
+    throw new Error("useOpenAIContext must be used within a OpenAIConnectionContext.Provider");
+  }
+  return context;
+};
diff --git a/src/index.tsx b/src/index.tsx
index 67b2594..c0dd3bc 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./components/App";
-import { AppConfigProvider } from "./app-config-provider";
+import { AppConfigProvider } from "./contexts/app-config-provider";
+import { OpenAIConnectionProvider } from "./contexts/open-ai-connection-provider";
 
 import "./index.scss";
 
@@ -15,7 +16,9 @@ if (container) {
 
   root.render(
     <AppConfigProvider>
-      <App />
+      <OpenAIConnectionProvider>
+        <App />
+      </OpenAIConnectionProvider>
     </AppConfigProvider>
   );
 }
diff --git a/src/models/app-config-model.ts b/src/models/app-config-model.ts
index be3a81e..93b3825 100644
--- a/src/models/app-config-model.ts
+++ b/src/models/app-config-model.ts
@@ -4,34 +4,23 @@ import { AppMode, AppModeValues } from "../types";
 /**
  * AppConfigModel encapsulates the application's configuration settings.
  * It includes properties and methods for managing accessibility, AI assistant settings, and the application's mode.
- * 
+ *
  * @property {Object} accessibility - Settings related to accessibility in the UI.
  * @property {string} accessibility.keyboardShortcut - Custom keystroke for placing focus in the main text input field (e.g., `ctrl+?`).
- * 
- * @property {Object} assistant - Settings to configure the AI assistant.
- * @property {string} assistant.assistantId - The unique ID of an existing assistant to use.
- * @property {string} assistant.instructions - Instructions to use when creating new assistants (e.g., `You are helpful data analysis partner.`).
- * @property {string} assistant.modelName - The name of the model the assistant should use (e.g., `gpt-4o-mini`).
- * @property {boolean} assistant.useExisting - Whether to use an existing assistant.
- * 
+ *
+ *
  * @property {Object} dimensions - Dimensions of the application's component within CODAP.
  * @property {number} dimensions.width - The width of the application (in pixels).
  * @property {number} dimensions.height - The height of the application (in pixels).
- * 
+ *
  * @property {boolean|null} mockAssistant - A flag indicating whether to mock AI interactions. (optional).
- * 
+ *
  * @property {"development"|"production"|"test"} mode - The mode in which the application runs.
  */
 export const AppConfigModel = types.model("AppConfigModel", {
   accessibility: types.model({
     keyboardShortcut: types.string,
   }),
-  assistant: types.model({
-    assistantId: types.string,
-    instructions: types.string,
-    modelName: types.string,
-    useExisting: types.boolean,
-  }),
   dimensions: types.model({
     width: types.number,
     height: types.number,
diff --git a/src/models/assistant-model.ts b/src/models/assistant-model.ts
index ea7cfd7..b11efd5 100644
--- a/src/models/assistant-model.ts
+++ b/src/models/assistant-model.ts
@@ -3,9 +3,25 @@ import { Message } from "openai/resources/beta/threads/messages";
 import { codapInterface } from "@concord-consortium/codap-plugin-api";
 import { DAVAI_SPEAKER, DEBUG_SPEAKER } from "../constants";
 import { formatJsonMessage } from "../utils/utils";
-import { getTools, initLlmConnection } from "../utils/llm-utils";
-import { ChatTranscriptModel } from "./chat-transcript-model";
 import { requestThreadDeletion } from "../utils/openai-utils";
+import { ChatTranscriptModel } from "./chat-transcript-model";
+import { OpenAI } from "openai";
+
+const OpenAIType = types.custom({
+  name: "OpenAIType",
+  fromSnapshot(snapshot: OpenAI) {
+    return new OpenAI({ apiKey: snapshot.apiKey });
+  },
+  toSnapshot() {
+    return undefined; // OpenAI instance is non-serializable
+  },
+  isTargetType(value) {
+    return value instanceof OpenAI;
+  },
+  getValidationMessage() {
+    return "";
+  },
+});
 
 /**
  * AssistantModel encapsulates the AI assistant and its interactions with the user.
@@ -13,24 +29,18 @@ import { requestThreadDeletion } from "../utils/openai-utils";
  * thread and transcript.
  *
  * @property {Object|null} assistant - The assistant object, or `null` if not initialized.
- * @property {string} assistantId - The unique ID of the assistant being used.
- * @property {string} instructions - Instructions provided when creating or configuring a new assistant.
- * @property {string} modelName - The identifier for the assistant's model (e.g., "gpt-4o-mini").
- * @property {Object|null} apiConnection - The API connection object for interacting with the assistant, or `null` if not connected.
+ * @property {string} assistantId - The unique ID of the assistant being used, or `null` if not initialized.
+ * @property {Object} apiConnection - The API connection object for interacting with the assistant
  * @property {Object|null} thread - The assistant's thread used for the current chat, or `null` if no thread is active.
  * @property {ChatTranscriptModel} transcriptStore - The assistant's chat transcript store for recording and managing chat messages.
- * @property {boolean} useExisting - A flag indicating whether to use an existing assistant (`true`) or create a new one (`false`).
  */
 export const AssistantModel = types
   .model("AssistantModel", {
+    apiConnection: OpenAIType,
     assistant: types.maybe(types.frozen()),
-    assistantId: types.string,
-    instructions: types.string,
-    modelName: types.string,
-    apiConnection: types.maybe(types.frozen()),
+    assistantId: types.maybe(types.string),
     thread: types.maybe(types.frozen()),
     transcriptStore: ChatTranscriptModel,
-    useExisting: true,
   })
   .volatile(() => ({
     isLoadingResponse: false,
@@ -46,24 +56,12 @@ export const AssistantModel = types
       }, 1000);
     }
   }))
-  .actions((self) => ({
-    afterCreate(){
-      self.apiConnection = initLlmConnection();
-    }
-  }))
   .actions((self) => {
-    const initialize = flow(function* () {
+    const initializeAssistant = flow(function* (id: string) {
       try {
-        const tools = getTools();
-
-        const davaiAssistant = self.useExisting && self.assistantId
-          ? yield self.apiConnection.beta.assistants.retrieve(self.assistantId)
-          : yield self.apiConnection.beta.assistants.create({instructions: self.instructions, model: self.modelName, tools });
-
-        if (!self.useExisting) {
-          self.assistantId = davaiAssistant.id;
-        }
-        self.assistant = davaiAssistant;
+        if (!self.apiConnection) throw new Error("API connection is not initialized");
+        self.assistantId = id;
+        self.assistant  = yield self.apiConnection.beta.assistants.retrieve(id);
         self.thread = yield self.apiConnection.beta.threads.create();
         self.transcriptStore.addMessage(DEBUG_SPEAKER, {
           description: "You are chatting with assistant",
@@ -235,7 +233,7 @@ export const AssistantModel = types
       }
     });
 
-    return { createThread, deleteThread, initialize, handleMessageSubmit };
+    return { createThread, deleteThread, initializeAssistant, handleMessageSubmit };
   });
 
 export interface AssistantModelType extends Instance<typeof AssistantModel> {}
diff --git a/src/test-utils/app-config-provider.tsx b/src/test-utils/app-config-provider.tsx
index 8603949..988b0d7 100644
--- a/src/test-utils/app-config-provider.tsx
+++ b/src/test-utils/app-config-provider.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { AppConfigContext } from "../app-config-context";
+import { AppConfigContext } from "../contexts/app-config-context";
 import { AppConfigModel } from "../models/app-config-model";
 import { mockAppConfig } from "./mock-app-config";
 
diff --git a/src/types.ts b/src/types.ts
index 86ffcaf..0699b7c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -8,12 +8,6 @@ export type AppConfig = {
   accessibility: {
     keyboardShortcut: string;
   };
-  assistant: {
-    assistantId: string;
-    instructions: string;
-    modelName: string;
-    useExisting: boolean;
-  };
   dimensions: {
     height: number;
     width: number;
diff --git a/src/utils/llm-utils.ts b/src/utils/llm-utils.ts
deleted file mode 100644
index fabc2fa..0000000
--- a/src/utils/llm-utils.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { newOpenAI, openAiTools } from "./openai-utils";
-
-export const initLlmConnection = () => {
-  return newOpenAI();
-};
-
-export const getTools = () => {
-  return openAiTools;
-};
diff --git a/src/utils/openai-utils.ts b/src/utils/openai-utils.ts
index f2714fb..78824c0 100644
--- a/src/utils/openai-utils.ts
+++ b/src/utils/openai-utils.ts
@@ -1,16 +1,5 @@
-import { OpenAI } from "openai";
 import { AssistantTool } from "openai/resources/beta/assistants";
 
-export const newOpenAI = () => {
-  return new OpenAI({
-    apiKey: process.env.REACT_APP_OPENAI_API_KEY || "fake-key",
-    baseURL: process.env.REACT_APP_OPENAI_BASE_URL,
-    dangerouslyAllowBrowser: true,
-    organization: "org-jbU1egKECzYlQI73HMMi7EOZ",
-    project: "proj_VsykADfoZHvqcOJUHyVAYoDG",
-  });
-};
-
 export const openAiTools: AssistantTool[] = [
   {
     type: "function",
@@ -56,3 +45,4 @@ export const requestThreadDeletion = async (threadId: string): Promise<Response>
 
   return response;
 };
+