groundwork (#1185)

* groundwork for tools

* remove optional text

* polish sidebar

* slight style change

* add tests

Author: mckaywrigley

__tests__/lib/openai-to-functions.test.ts

@@ -0,0 +1,61 @@
+import { openapiToFunctions } from "@/lib/openapi-to-functions"
+
+describe("openapiToFunctions", () => {
+  const validSchema = JSON.stringify({
+    openapi: "3.1.0",
+    info: {
+      title: "Get weather data",
+      description: "Retrieves current weather data for a location.",
+      version: "v1.0.0"
+    },
+    servers: [
+      {
+        url: "https://weather.example.com"
+      }
+    ],
+    paths: {
+      "/location": {
+        get: {
+          description: "Get temperature for a specific location",
+          operationId: "GetCurrentWeather",
+          parameters: [
+            {
+              name: "location",
+              in: "query",
+              description: "The city and state to retrieve the weather for",
+              required: true,
+              schema: {
+                type: "string"
+              }
+            }
+          ]
+        }
+      }
+    }
+  })
+
+  const invalidSchema = JSON.stringify({
+    openapi: "2.0" // Invalid version
+    // ... rest of the schema
+  })
+
+  it("should parse a valid OpenAPI schema", () => {
+    const result = openapiToFunctions(validSchema)
+    expect(result.title).toBe("Get weather data")
+    expect(result.description).toBe(
+      "Retrieves current weather data for a location."
+    )
+    expect(result.url).toBe("https://weather.example.com")
+    expect(result.routes).toHaveLength(1)
+    expect(result.routes[0].path).toBe("/location")
+    // Add more assertions as needed
+  })
+
+  it("should throw an error for an invalid OpenAPI schema", () => {
+    expect(() => openapiToFunctions(invalidSchema)).toThrow(
+      "Invalid OpenAPI schema. Only version 3.1.0 is supported."
+    )
+  })
+
+  // Add more tests as needed
+})

app/login/page.tsx

@@ -63,7 +63,7 @@ export default async function Login({
       email,
       password,
       options: {
-        // TODO: USE IF YOU WANT TO SEND EMAIL VERIFICATION, ALSO CHANGE TOML FILE
+        // USE IF YOU WANT TO SEND EMAIL VERIFICATION, ALSO CHANGE TOML FILE
         // emailRedirectTo: `${origin}/auth/callback`
       }
     })
@@ -75,7 +75,7 @@ export default async function Login({
 
     return redirect("/setup")
 
-    // TODO: USE IF YOU WANT TO SEND EMAIL VERIFICATION, ALSO CHANGE TOML FILE
+    // USE IF YOU WANT TO SEND EMAIL VERIFICATION, ALSO CHANGE TOML FILE
     // return redirect("/login?message=Check email to continue sign in process")
   }
 

components/chat/file-picker.tsx

@@ -27,14 +27,14 @@ export const FilePicker: FC<FilePickerProps> = ({
 }) => {
   const { files, collections, setIsAtPickerOpen } = useContext(ChatbotUIContext)
 
+  const itemsRef = useRef<(HTMLDivElement | null)[]>([])
+
   useEffect(() => {
     if (isFocused && itemsRef.current[0]) {
       itemsRef.current[0].focus()
     }
   }, [isFocused])
 
-  const itemsRef = useRef<(HTMLDivElement | null)[]>([])
-
   const filteredFiles = files.filter(
     file =>
       file.name.toLowerCase().includes(searchQuery.toLowerCase()) &&

components/chat/prompt-picker.tsx

@@ -20,7 +20,7 @@ export const PromptPicker: FC<PromptPickerProps> = ({
   const { prompts, isPromptPickerOpen, setIsPromptPickerOpen } =
     useContext(ChatbotUIContext)
 
-  const firstPromptRef = useRef<HTMLDivElement>(null)
+  const itemsRef = useRef<(HTMLDivElement | null)[]>([])
 
   const [promptVariables, setPromptVariables] = useState<
     {
@@ -31,6 +31,12 @@ export const PromptPicker: FC<PromptPickerProps> = ({
   >([])
   const [showPromptVariables, setShowPromptVariables] = useState(false)
 
+  useEffect(() => {
+    if (isFocused && itemsRef.current[0]) {
+      itemsRef.current[0].focus()
+    }
+  }, [isFocused])
+
   const filteredPrompts = prompts.filter(prompt =>
     prompt.name.toLowerCase().includes(searchQuery.toLowerCase())
   )
@@ -72,7 +78,20 @@ export const PromptPicker: FC<PromptPickerProps> = ({
         index === filteredPrompts.length - 1
       ) {
         e.preventDefault()
-        firstPromptRef.current?.focus()
+        itemsRef.current[0]?.focus()
+      } else if (e.key === "ArrowUp" && !e.shiftKey && index === 0) {
+        // go to last element if arrow up is pressed on first element
+        e.preventDefault()
+        itemsRef.current[itemsRef.current.length - 1]?.focus()
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault()
+        const prevIndex =
+          index - 1 >= 0 ? index - 1 : itemsRef.current.length - 1
+        itemsRef.current[prevIndex]?.focus()
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault()
+        const nextIndex = index + 1 < itemsRef.current.length ? index + 1 : 0
+        itemsRef.current[nextIndex]?.focus()
       }
     }
 
@@ -112,10 +131,6 @@ export const PromptPicker: FC<PromptPickerProps> = ({
     }
   }
 
-  useEffect(() => {
-    firstPromptRef.current?.focus()
-  }, [isFocused])
-
   return (
     <>
       {isPromptPickerOpen && (
@@ -173,7 +188,9 @@ export const PromptPicker: FC<PromptPickerProps> = ({
             filteredPrompts.map((prompt, index) => (
               <div
                 key={prompt.id}
-                ref={index === 0 ? firstPromptRef : null}
+                ref={ref => {
+                  itemsRef.current[index] = ref
+                }}
                 tabIndex={0}
                 className="hover:bg-accent focus:bg-accent flex cursor-pointer flex-col rounded p-2 focus:outline-none"
                 onClick={() => handleSelectPrompt(prompt)}

components/sharing/add-to-workspace.tsx

@@ -35,7 +35,8 @@ export const AddToWorkspace: FC<AddToWorkspaceProps> = ({
     setPrompts,
     setFiles,
     setCollections,
-    setAssistants
+    setAssistants,
+    setTools
   } = useContext(ChatbotUIContext)
 
   const router = useRouter()
@@ -149,6 +150,13 @@ export const AddToWorkspace: FC<AddToWorkspaceProps> = ({
       )
 
       return createdAssistant
+    },
+    tools: async (
+      item: Tables<"tools">,
+      workspaceId: string,
+      userId: string
+    ) => {
+      // TODO
     }
   }
 
@@ -158,7 +166,8 @@ export const AddToWorkspace: FC<AddToWorkspaceProps> = ({
     prompts: setPrompts,
     files: setFiles,
     collections: setCollections,
-    assistants: setAssistants
+    assistants: setAssistants,
+    tools: setTools
   }
 
   const handleAddToWorkspace = async (workspaceId: string) => {

components/sharing/share-item.tsx

@@ -106,6 +106,13 @@ export const ShareItem: FC<ShareItemProps> = ({
         }
         break
 
+      case "tools":
+        data = {
+          ...data,
+          name: item.name
+        }
+        break
+
       default:
         break
     }

components/sidebar/items/all/sidebar-create-item.tsx

@@ -1,11 +1,11 @@
 import { Button } from "@/components/ui/button"
 import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from "@/components/ui/dialog"
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle
+} from "@/components/ui/sheet"
 import { ChatbotUIContext } from "@/context/context"
 import { createAssistant, updateAssistant } from "@/db/assistants"
 import { createChat } from "@/db/chats"
@@ -18,6 +18,7 @@ import {
   getAssistantImageFromStorage,
   uploadAssistantImage
 } from "@/db/storage/assistant-images"
+import { createTool } from "@/db/tools"
 import { convertBlobToBase64 } from "@/lib/blob-to-b64"
 import { Tables, TablesInsert } from "@/supabase/types"
 import { ContentType } from "@/types"
@@ -47,7 +48,8 @@ export const SidebarCreateItem: FC<SidebarCreateItemProps> = ({
     setFiles,
     setCollections,
     setAssistants,
-    setAssistantImages
+    setAssistantImages,
+    setTools
   } = useContext(ChatbotUIContext)
 
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -105,32 +107,37 @@ export const SidebarCreateItem: FC<SidebarCreateItemProps> = ({
 
       const createdAssistant = await createAssistant(rest, workspaceId)
 
-      const filePath = await uploadAssistantImage(createdAssistant, image)
+      let updatedAssistant = createdAssistant
 
-      const updatedAssistant = await updateAssistant(createdAssistant.id, {
-        image_path: filePath
-      })
+      if (image) {
+        const filePath = await uploadAssistantImage(createdAssistant, image)
 
-      const url = (await getAssistantImageFromStorage(filePath)) || ""
+        const updatedAssistant = await updateAssistant(createdAssistant.id, {
+          image_path: filePath
+        })
 
-      if (url) {
-        const response = await fetch(url)
-        const blob = await response.blob()
-        const base64 = await convertBlobToBase64(blob)
+        const url = (await getAssistantImageFromStorage(filePath)) || ""
 
-        setAssistantImages(prev => [
-          ...prev,
-          {
-            assistantId: updatedAssistant.id,
-            path: filePath,
-            base64,
-            url
-          }
-        ])
+        if (url) {
+          const response = await fetch(url)
+          const blob = await response.blob()
+          const base64 = await convertBlobToBase64(blob)
+
+          setAssistantImages(prev => [
+            ...prev,
+            {
+              assistantId: updatedAssistant.id,
+              path: filePath,
+              base64,
+              url
+            }
+          ])
+        }
       }
 
       return updatedAssistant
-    }
+    },
+    tools: createTool
   }
 
   const stateUpdateFunctions = {
@@ -139,7 +146,8 @@ export const SidebarCreateItem: FC<SidebarCreateItemProps> = ({
     prompts: setPrompts,
     files: setFiles,
     collections: setCollections,
-    assistants: setAssistants
+    assistants: setAssistants,
+    tools: setTools
   }
 
   const handleCreate = async () => {
@@ -173,17 +181,24 @@ export const SidebarCreateItem: FC<SidebarCreateItemProps> = ({
   }
 
   return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent onKeyDown={handleKeyDown}>
-        <DialogHeader>
-          <DialogTitle className="text-2xl font-bold">
-            Create {contentType.slice(0, -1)}
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-3">{renderInputs()}</div>
-
-        <DialogFooter className="mt-2 flex justify-between">
+    <Sheet open={isOpen} onOpenChange={onOpenChange}>
+      <SheetContent
+        className="flex flex-col justify-between"
+        side="left"
+        onKeyDown={handleKeyDown}
+      >
+        <div className="grow">
+          <SheetHeader>
+            <SheetTitle className="text-2xl font-bold">
+              Create{" "}
+              {contentType.charAt(0).toUpperCase() + contentType.slice(1, -1)}
+            </SheetTitle>
+          </SheetHeader>
+
+          <div className="mt-4 space-y-3">{renderInputs()}</div>
+        </div>
+
+        <SheetFooter className="mt-2 flex justify-between">
           <div className="flex grow justify-end space-x-2">
             <Button
               disabled={creating}
@@ -197,8 +212,8 @@ export const SidebarCreateItem: FC<SidebarCreateItemProps> = ({
               {creating ? "Creating..." : "Create"}
             </Button>
           </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
   )
 }