Replace useCompletion with useChat, upgrade dependencies

.env.example

@@ -5,4 +5,4 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=
 SUPABASE_SERVICE_ROLE_KEY=
 
 # Get your key at https://platform.openai.com/account/api-keys
-OPENAI_KEY=
+OPENAI_API_KEY=

README.md

@@ -4,9 +4,9 @@ This starter takes all the `.mdx` files in the `pages` directory and processes t
 
 ## Deploy
 
-Deploy this starter to Vercel. The Supabase integration will automatically set the required environment variables and configure your [Database Schema](./supabase/migrations/20230406025118_init.sql). All you have to do is set your `OPENAI_KEY` and you're ready to go!
+Deploy this starter to Vercel. The Supabase integration will automatically set the required environment variables and configure your [Database Schema](./supabase/migrations/20230406025118_init.sql). All you have to do is set your `OPENAI_API_KEY` and you're ready to go!
 
-[![Deploy with Vercel](https://vercel.com/new/clone?demo-title=Next.js%20OpenAI%20Doc%20Search%20Starter&demo-description=Template%20for%20building%20your%20own%20custom%20ChatGPT%20style%20doc%20search%20powered%20by%20Next.js%2C%20OpenAI%2C%20and%20Supabase.&demo-url=https%3A%2F%2Fsupabase.com%2Fdocs&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1OntM6THNEUvlUsYy6Bjmf%2F475e39dbc84779538c8ed47c63a37e0e%2Fnextjs_openai_doc_search_og.png&project-name=Next.js%20OpenAI%20Doc%20Search%20Starter&repository-name=nextjs-openai-doc-search-starter&repository-url=https%3A%2F%2Fgithub.com%2Fsupabase-community%2Fnextjs-openai-doc-search%2F&from=github&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6&env=OPENAI_KEY&envDescription=Get%20your%20OpenAI%20API%20key%3A&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&teamCreateStatus=hidden&external-id=https%3A%2F%2Fgithub.com%2Fsupabase-community%2Fnextjs-openai-doc-search%2Ftree%2Fmain)
+[![Deploy with Vercel](https://vercel.com/new/clone?demo-title=Next.js%20OpenAI%20Doc%20Search%20Starter&demo-description=Template%20for%20building%20your%20own%20custom%20ChatGPT%20style%20doc%20search%20powered%20by%20Next.js%2C%20OpenAI%2C%20and%20Supabase.&demo-url=https%3A%2F%2Fsupabase.com%2Fdocs&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1OntM6THNEUvlUsYy6Bjmf%2F475e39dbc84779538c8ed47c63a37e0e%2Fnextjs_openai_doc_search_og.png&project-name=Next.js%20OpenAI%20Doc%20Search%20Starter&repository-name=nextjs-openai-doc-search-starter&repository-url=https%3A%2F%2Fgithub.com%2Fsupabase-community%2Fnextjs-openai-doc-search%2F&from=github&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6&env=OPENAI_API_KEY&envDescription=Get%20your%20OpenAI%20API%20key%3A&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&teamCreateStatus=hidden&external-id=https%3A%2F%2Fgithub.com%2Fsupabase-community%2Fnextjs-openai-doc-search%2Ftree%2Fmain)
 
 ## Technical Details
 
@@ -70,7 +70,7 @@ The initialization of the database, including the setup of the `pgvector` extens
 ### Configuration
 
 - `cp .env.example .env`
-- Set your `OPENAI_KEY` in the newly created `.env` file.
+- Set your `OPENAI_API_KEY` in the newly created `.env` file.
 - Set `NEXT_PUBLIC_SUPABASE_ANON_KEY` and `SUPABASE_SERVICE_ROLE_KEY` run:
   > Note: You have to run supabase to retrieve the keys.
 

components/SearchDialog.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import * as React from 'react'
+import { ChangeEvent, useEffect, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import {
   Dialog,
@@ -11,18 +11,24 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
-import { useCompletion } from 'ai/react'
+import { useChat } from '@ai-sdk/react'
 import { X, Loader, User, Frown, CornerDownLeft, Search, Wand } from 'lucide-react'
 
 export function SearchDialog() {
-  const [open, setOpen] = React.useState(false)
-  const [query, setQuery] = React.useState<string>('')
-
-  const { complete, completion, isLoading, error } = useCompletion({
+  const [open, setOpen] = useState(false)
+  const { messages, input, handleInputChange, handleSubmit, status, error, isLoading } = useChat({
     api: '/api/vector-search',
+    onFinish: (message, { usage, finishReason }) => {
+      console.log('Finished streaming message:', message)
+      console.log('Token usage:', usage)
+      console.log('Finish reason:', finishReason)
+    },
+    onError: (error) => {
+      console.error('An error occurred:', error)
+    },
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === 'k' && e.metaKey) {
         setOpen(true)
@@ -40,13 +46,10 @@ export function SearchDialog() {
 
   function handleModalToggle() {
     setOpen(!open)
-    setQuery('')
   }
 
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
-    e.preventDefault()
-    console.log(query)
-    complete(query)
+  const clearConversation = () => {
+    handleInputChange({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)
   }
 
   return (
@@ -89,16 +92,33 @@ export function SearchDialog() {
 
           <form onSubmit={handleSubmit}>
             <div className="grid gap-4 py-4 text-slate-700">
-              {query && (
-                <div className="flex gap-4">
-                  <span className="bg-slate-100 dark:bg-slate-300 p-2 w-8 h-8 rounded-full text-center flex items-center justify-center">
-                    <User width={18} />{' '}
+              {messages.map((message, index) => (
+                <div key={index} className="flex gap-4">
+                  <span
+                    className={`p-2 w-8 h-8 rounded-full text-center flex items-center justify-center ${
+                      message.role === 'user' ? 'bg-slate-100 dark:bg-slate-300' : 'bg-green-500'
+                    }`}
+                  >
+                    {message.role === 'user' ? (
+                      <User width={18} />
+                    ) : (
+                      <Wand width={18} className="text-white" />
+                    )}
                   </span>
-                  <p className="mt-0.5 font-semibold text-slate-700 dark:text-slate-100">{query}</p>
+                  <div className="mt-0.5 text-slate-700 dark:text-slate-100">
+                    {message.role === 'user' ? (
+                      <p className="font-semibold">{message.content}</p>
+                    ) : (
+                      <div>
+                        <h3 className="font-semibold">Арнольд:</h3>
+                        <div>{message.content}</div>
+                      </div>
+                    )}
+                  </div>
                 </div>
-              )}
+              ))}
 
-              {isLoading && (
+              {(status === 'streaming' || isLoading) && (
                 <div className="animate-spin relative flex w-5 h-5 ml-2">
                   <Loader />
                 </div>
@@ -115,27 +135,17 @@ export function SearchDialog() {
                 </div>
               )}
 
-              {completion && !error ? (
-                <div className="flex items-center gap-4 dark:text-white">
-                  <span className="bg-green-500 p-2 w-8 h-8 rounded-full text-center flex items-center justify-center">
-                    <Wand width={18} className="text-white" />
-                  </span>
-                  <h3 className="font-semibold">Answer:</h3>
-                  {completion}
-                </div>
-              ) : null}
-
               <div className="relative">
                 <Input
                   placeholder="Ask a question..."
                   name="search"
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
+                  value={input}
+                  onChange={handleInputChange}
                   className="col-span-3"
                 />
                 <CornerDownLeft
                   className={`absolute top-3 right-5 h-4 w-4 text-gray-300 transition-opacity ${
-                    query ? 'opacity-100' : 'opacity-0'
+                    input ? 'opacity-100' : 'opacity-0'
                   }`}
                 />
               </div>
@@ -148,13 +158,22 @@ export function SearchDialog() {
                   hover:bg-slate-100 dark:hover:bg-gray-600
                   rounded border border-slate-200 dark:border-slate-600
                   transition-colors"
-                  onClick={(_) => setQuery('What are embeddings?')}
+                  onClick={(_) =>
+                    handleInputChange({
+                      target: { value: 'What are embeddings?' },
+                    } as ChangeEvent<HTMLInputElement>)
+                  }
                 >
                   What are embeddings?
                 </button>
               </div>
             </div>
-            <DialogFooter>
+            <DialogFooter className="flex justify-between">
+              {messages.length > 0 && (
+                <Button type="button" variant="outline" onClick={clearConversation}>
+                  Clear Conversation
+                </Button>
+              )}
               <Button type="submit" className="bg-red-500">
                 Ask
               </Button>