refactor: standardize useChat hook ID usage

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "cSpell.words": [
-        "openai",
-        "Tavily"
-    ]
-}
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "cSpell.words": ["openai", "Tavily"],
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "always"
+  }
+}

components/chat-share.tsx

@@ -1,23 +1,24 @@
 'use client'
 
+import { shareChat } from '@/lib/actions/chat'
+import { CHAT_ID } from '@/lib/constants'
+import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
+import { cn } from '@/lib/utils'
+import { useChat } from 'ai/react'
+import { Share } from 'lucide-react'
 import { useState, useTransition } from 'react'
+import { toast } from 'sonner'
 import { Button } from './ui/button'
-import { Share } from 'lucide-react'
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTrigger,
-  DialogDescription,
-  DialogTitle
+  DialogTitle,
+  DialogTrigger
 } from './ui/dialog'
-import { shareChat } from '@/lib/actions/chat'
-import { toast } from 'sonner'
-import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
 import { Spinner } from './ui/spinner'
-import { useChat } from 'ai/react'
-import { cn } from '@/lib/utils'
 
 interface ChatShareProps {
   chatId: string
@@ -30,7 +31,7 @@ export function ChatShare({ chatId, className }: ChatShareProps) {
   const { copyToClipboard } = useCopyToClipboard({ timeout: 1000 })
   const [shareUrl, setShareUrl] = useState('')
   const { isLoading } = useChat({
-    id: 'chat'
+    id: CHAT_ID
   })
 
   const handleShare = async () => {

components/chat.tsx

@@ -1,9 +1,10 @@
 'use client'
 
+import { CHAT_ID } from '@/lib/constants'
 import { Message, useChat } from 'ai/react'
+import { toast } from 'sonner'
 import { ChatMessages } from './chat-messages'
 import { ChatPanel } from './chat-panel'
-import { toast } from 'sonner'
 
 export function Chat({
   id,
@@ -25,7 +26,7 @@ export function Chat({
     append
   } = useChat({
     initialMessages: savedMessages,
-    id: 'chat',
+    id: CHAT_ID,
     body: {
       id
     },
@@ -37,16 +38,18 @@ export function Chat({
     }
   })
 
+  const onQuerySelect = (query: string) => {
+    append({
+      role: 'user',
+      content: query
+    })
+  }
+
   return (
     <div className="flex flex-col w-full max-w-3xl pt-10 pb-16 mx-auto stretch">
       <ChatMessages
         messages={messages}
-        onQuerySelect={query => {
-          append({
-            role: 'user',
-            content: query
-          })
-        }}
+        onQuerySelect={onQuerySelect}
         isLoading={isLoading}
         chatId={id}
       />

components/related-questions.tsx

@@ -1,12 +1,13 @@
 'use client'
 
+import { CHAT_ID } from '@/lib/constants'
+import { JSONValue } from 'ai'
+import { useChat } from 'ai/react'
+import { ArrowRight, Repeat2 } from 'lucide-react'
 import React from 'react'
+import { CollapsibleMessage } from './collapsible-message'
 import { Button } from './ui/button'
-import { ArrowRight, Repeat2 } from 'lucide-react'
 import { Skeleton } from './ui/skeleton'
-import { JSONValue } from 'ai'
-import { CollapsibleMessage } from './collapsible-message'
-import { useChat } from 'ai/react'
 
 export interface RelatedQuestionsProps {
   annotations: JSONValue[]
@@ -29,7 +30,7 @@ export const RelatedQuestions: React.FC<RelatedQuestionsProps> = ({
   onOpenChange
 }) => {
   const { isLoading } = useChat({
-    id: 'chat'
+    id: CHAT_ID
   })
 
   if (!annotations) {

components/search-section.tsx

@@ -1,13 +1,14 @@
 'use client'
 
-import { SearchResults } from './search-results'
-import { DefaultSkeleton } from './default-skeleton'
-import { SearchResultsImageSection } from './search-results-image'
-import { Section, ToolArgsSection } from './section'
+import { CHAT_ID } from '@/lib/constants'
 import type { SearchResults as TypeSearchResults } from '@/lib/types'
 import { ToolInvocation } from 'ai'
-import { CollapsibleMessage } from './collapsible-message'
 import { useChat } from 'ai/react'
+import { CollapsibleMessage } from './collapsible-message'
+import { DefaultSkeleton } from './default-skeleton'
+import { SearchResults } from './search-results'
+import { SearchResultsImageSection } from './search-results-image'
+import { Section, ToolArgsSection } from './section'
 
 interface SearchSectionProps {
   tool: ToolInvocation
@@ -21,7 +22,7 @@ export function SearchSection({
   onOpenChange
 }: SearchSectionProps) {
   const { isLoading } = useChat({
-    id: 'chat'
+    id: CHAT_ID
   })
   const isToolLoading = tool.state === 'call'
   const searchResults: TypeSearchResults =

lib/constants/index.ts

@@ -0,0 +1 @@
+export const CHAT_ID = 'search' as const