prepare for multiple provider

sctg-development · Oct 3, 2024 · d7ecfa2 · d7ecfa2
1 parent 297b7b0
commit d7ecfa2
Show file tree

Hide file tree

Showing 8 changed files with 296 additions and 228 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sctg-ai-pane",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/OfficeDev/Office-Addin-TaskPane-React.git"
@@ -27,20 +27,20 @@
   },
   "dependencies": {
     "@fluentui/react-components": "^9.54.17",
-    "@fluentui/react-icons": "^2.0.259",
+    "@fluentui/react-icons": "^2.0.260",
     "core-js": "^3.38.1",
     "es6-promise": "^4.2.8",
-    "@sctg/ai-sdk": "^0.7.0",
+    "@sctg/ai-sdk": "^0.7.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "regenerator-runtime": "^0.14.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-typescript": "^7.24.7",
+    "@babel/core": "^7.25.7",
+    "@babel/preset-typescript": "^7.25.7",
     "@types/office-js": "^1.0.433",
     "@types/office-runtime": "^1.0.35",
-    "@types/react": "^18.3.10",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/webpack": "^5.28.5",
     "acorn": "^8.12.1",

diff --git a/src/aipane/AIPrompt.ts b/src/aipane/AIPrompt.ts
@@ -4,6 +4,7 @@
 =========================================================
 */
 
+import config from "../config.json";
 export interface AIPrompt {
   id: string;
   system: string;
@@ -16,3 +17,20 @@ export interface AIModel {
   name: string;
   default: boolean;
 }
+
+export interface AIProvider {
+  default: boolean;
+  name: string;
+  baseUrl: string;
+  basePath: string;
+  apiKey: string;
+  models: AIModel[];
+}
+
+export function getDefaultProvider(): AIProvider {
+  return config.providers.filter((provider: AIProvider) => provider.default)[0];
+}
+
+export function getProvider(providerName: string): AIProvider {
+  return config.providers.filter((provider: AIProvider) => provider.name === providerName)[0];
+}
diff --git a/src/aipane/aipane.ts b/src/aipane/aipane.ts
@@ -6,14 +6,27 @@
 
 import { Groq } from "@sctg/ai-sdk";
 import config from "../config.json";
-import type { AIPrompt } from "./AIPrompt";
+import type { AIPrompt, AIProvider } from "./AIPrompt";
 
-async function groqRequest(model: string, apiKey: string, systemText: string, usertext: string): Promise<string> {
+async function groqRequest(
+  provider: AIProvider,
+  model: string,
+  apiKey: string,
+  systemText: string,
+  usertext: string
+): Promise<string> {
   const groq = new Groq({
-    baseURL: "https://api.groq.com",
-    basePath: "/openai/v1",
+    baseURL: provider.baseUrl,
+    basePath: provider.basePath,
+    disableCorsCheck: false,
     apiKey,
     dangerouslyAllowBrowser: true,
+    // fetch: async (url: any, init?: any): Promise<any> => {
+    //   console.log("About to make a request", url, init);
+    //   const response = await fetch(url, { mode: "no-cors", ...init });
+    //   console.log("Got response", response);
+    //   return response;
+    // },
   });
   const chatCompletion = await groq.chat.completions.create({
     messages: [
@@ -41,14 +54,14 @@ function getPrompt(id: string): AIPrompt {
   return prompts.find((prompt) => prompt.id === id) || prompts[0];
 }
 
-export async function insertText(model: string, apiKey: string, id: string, userText: string) {
+export async function insertText(provider: AIProvider, model: string, apiKey: string, id: string, userText: string) {
   const { system, user } = getPrompt(id);
   try {
     console.log(`Prompt: ${id}`);
     console.log(`System text: \n${system}`);
     console.log(`User: ${user}`);
     console.log(`User text: \n${userText}`);
-    let aiText = await groqRequest(model, apiKey, system, `${user}\n${userText}`);
+    let aiText = await groqRequest(provider, model, apiKey, system, `${user}\n${userText}`);
     console.log(`AI response (${model}): \n${aiText}`);
     aiText = aiText.replace(/\n/g, "<br>");
     Office.context.mailbox.item?.body.setSelectedDataAsync(

diff --git a/src/aipane/components/App.tsx b/src/aipane/components/App.tsx
@@ -14,6 +14,7 @@ import { insertText } from "../aipane";
 import HeroApiKey from "./HeroApiKey";
 import HeroComboPrompts from "./HeroComboPrompts";
 import HeroModels from "./HeroModels";
+import { getDefaultProvider } from "../AIPrompt";
 
 interface AppProps {
   title: string;
@@ -26,6 +27,7 @@ const useStyles = makeStyles({
 });
 
 const App: React.FC<AppProps> = (props: AppProps) => {
+  const provider = getDefaultProvider();
   const styles = useStyles();
   const [apiKey, setApiKey] = useState<string | null>(null);
   const [prompt, setPrompt] = useState<string | null>(null);
@@ -42,7 +44,7 @@ const App: React.FC<AppProps> = (props: AppProps) => {
   ];
 
   useEffect(() => {
-    const storedApiKey = localStorage.getItem("apiKey");
+    const storedApiKey = localStorage.getItem(provider.apiKey);
     if (!storedApiKey) {
       setShowApiKeyInput(true);
     } else {
@@ -60,7 +62,7 @@ const App: React.FC<AppProps> = (props: AppProps) => {
 
   const handleApiKeySubmit = () => {
     if (apiKey) {
-      localStorage.setItem("apiKey", apiKey);
+      localStorage.setItem(provider.apiKey, apiKey);
       setShowApiKeyInput(false);
     }
   };
@@ -70,19 +72,24 @@ const App: React.FC<AppProps> = (props: AppProps) => {
   };
 
   const handlePromptSubmit = (userText: string) => {
-    const apiKey = localStorage.getItem("apiKey");
-    insertText(model, apiKey, prompt, `${userText}`);
+    const apiKey = localStorage.getItem(provider.apiKey);
+    insertText(provider, model, apiKey, prompt, `${userText}`);
   };
 
   return (
     <div className={styles.root}>
       <Header logo="assets/logo-filled.png" title={props.title} message="AI emailer" />
       {showApiKeyInput ? (
-        <HeroApiKey apiKey={apiKey} onApiKeyChange={handleApiKeyChange} onApiKeySubmit={handleApiKeySubmit} />
+        <HeroApiKey
+          apiKey={apiKey}
+          onApiKeyChange={handleApiKeyChange}
+          onApiKeySubmit={handleApiKeySubmit}
+          provider={provider}
+        />
       ) : (
         <>
           <HeroList message="Ask Llama" items={listItems} />
-          <HeroModels onChange={handleModelChange} />
+          <HeroModels onChange={handleModelChange} provider={provider} />
           <HeroComboPrompts onChange={handlePromptChange} />
           <TextInsertion insertText={handlePromptSubmit} basePrompt={""} />
         </>

diff --git a/src/aipane/components/HeroApiKey.tsx b/src/aipane/components/HeroApiKey.tsx
@@ -5,8 +5,10 @@
 */
 import * as React from "react";
 import { makeStyles, useId, Button, Input, Label } from "@fluentui/react-components";
+import { AIProvider } from "../AIPrompt";
 
 interface HeroApiKeyProps {
+  provider: AIProvider;
   apiKey: string | null;
   onApiKeyChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onApiKeySubmit: () => void;
@@ -27,13 +29,13 @@ const useStyles = makeStyles({
   },
 });
 
-const HeroApiKey: React.FC<HeroApiKeyProps> = ({ apiKey, onApiKeyChange, onApiKeySubmit }) => {
+const HeroApiKey: React.FC<HeroApiKeyProps> = ({ apiKey, onApiKeyChange, onApiKeySubmit, provider }) => {
   const styles = useStyles();
   const inputId = useId("input");
   return (
     <div className={styles.root}>
       <Label htmlFor={inputId} size="large">
-        Grok API Key
+        {provider.name} API Key
       </Label>
       <Input
         className={styles.input}

diff --git a/src/aipane/components/HeroModels.tsx b/src/aipane/components/HeroModels.tsx
@@ -6,16 +6,16 @@
 import * as React from "react";
 import { Dropdown, Label, makeStyles, Option, useId } from "@fluentui/react-components";
 import { useState, useEffect } from "react";
-import config from "../../config.json"; // Assurez-vous que le chemin est correct
-import type { AIModel } from "../AIPrompt";
+import { type AIModel, type AIProvider } from "../AIPrompt";
 
 interface HeroModelsProps {
   onChange: (selectedValue: string) => void;
+  provider: AIProvider;
   //readValue: () => string;
 }
 
-function getDefaultModel(): AIModel {
-  return config.models.filter((model: AIModel) => model.default)[0];
+function getDefaultModel(provider: AIProvider): AIModel {
+  return provider.models.filter((model: AIModel) => model.default)[0];
 }
 const useStyles = makeStyles({
   root: {
@@ -32,14 +32,14 @@ const useStyles = makeStyles({
   },
 });
 
-const HeroModels: React.FC<HeroModelsProps> = ({ onChange }) => {
+const HeroModels: React.FC<HeroModelsProps> = ({ onChange, provider }) => {
   const styles = useStyles();
   const selectId = useId("select");
-  const [selectedValue, setSelectedValue] = useState<string>(getDefaultModel().id);
+  const [selectedValue, setSelectedValue] = useState<string>(getDefaultModel(provider).id);
 
   const handleChange = (event: React.FormEvent<HTMLButtonElement>, option?: any) => {
     event.preventDefault();
-    const newValue = option.nextOption?.value || getDefaultModel().id;
+    const newValue = option.nextOption?.value || getDefaultModel(provider).id;
     setSelectedValue(newValue);
     onChange(newValue);
   };
@@ -56,12 +56,12 @@ const HeroModels: React.FC<HeroModelsProps> = ({ onChange }) => {
       <Dropdown
         className={styles.combobox}
         id={selectId}
-        defaultSelectedOptions={[getDefaultModel().id]}
-        defaultValue={getDefaultModel().name}
+        defaultSelectedOptions={[getDefaultModel(provider).id]}
+        defaultValue={getDefaultModel(provider).name}
         onActiveOptionChange={handleChange}
         onChange={handleChange}
       >
-        {config.models.map((option: AIModel) => (
+        {provider.models.map((option: AIModel) => (
           <Option value={option.id} key={option.id}>
             {option.name}
           </Option>

diff --git a/src/config.json b/src/config.json
@@ -1,19 +1,47 @@
 {
-    "models": [
-        {
-            "id": "llama-3.1-8b-instant",
-            "name": "Llama 3.1 (8B) - Instant",
-            "default": false
-        },
-        {
-            "id": "llama-3.2-3b-preview",
-            "name": "Llama 3.2 (3B)",
-            "default": false
-        },
-        {
-            "id": "llama-3.2-90b-text-preview",
-            "name": "Llama 3.2 (90B)",
-            "default": true
+    "providers": [
+        {
+            "default": true,
+            "name": "Groq",
+            "baseUrl": "https://api.groq.com",
+            "basePath": "/openai/v1",
+            "apiKey": "groqKey",
+            "models": [
+                {
+                    "id": "llama-3.1-8b-instant",
+                    "name": "Llama 3.1 (8B) - Instant",
+                    "default": false
+                },
+                {
+                    "id": "llama-3.2-3b-preview",
+                    "name": "Llama 3.2 (3B)",
+                    "default": false
+                },
+                {
+                    "id": "llama-3.2-90b-text-preview",
+                    "name": "Llama 3.2 (90B)",
+                    "default": true
+                }
+            ]
+        },
+        {
+            "default": false,
+            "name": "SambaNovaAI",
+            "baseUrl": "https://api.sambanova.ai",
+            "basePath": "/v1",
+            "apiKey": "sambanovaKey",
+            "models": [
+                {
+                    "id": "Meta-Llama-3.1-405B-Instruct",
+                    "name": "Llama 3.1 (405B) - Instruct",
+                    "default": false
+                },
+                {
+                    "id": "Meta-Llama-3.1-8B-Instruct",
+                    "name": "Llama 3.1 (8B) - Instant",
+                    "default": true
+                }
+            ]
         }
     ],
     "tests": [