Add search-related components to the application

Introduced several new components for search functionality including SearchResults, SearchSection, SearchRelated, and VideoSearchSection. These components enhance the user experience by displaying search results, related queries, and search videos in an organized manner. Additional components for theme toggling and history viewing were also integrated to improve navigation and usability.

Took 30 seconds

Author: mikepsinn

app/search/[id]/page.tsx

@@ -0,0 +1,43 @@
+import { notFound, redirect } from 'next/navigation'
+import { Chat } from '@/app/search/components/chat'
+import { getChat } from '@/lib/actions/chat'
+import { AI } from '@/app/search/actions'
+
+export const maxDuration = 60
+
+export interface SearchPageProps {
+  params: {
+    id: string
+  }
+}
+
+export async function generateMetadata({ params }: SearchPageProps) {
+  const chat = await getChat(params.id, 'anonymous')
+  return {
+    title: chat?.title.toString().slice(0, 50) || 'Search'
+  }
+}
+
+export default async function SearchPage({ params }: SearchPageProps) {
+  const userId = 'anonymous'
+  const chat = await getChat(params.id, userId)
+
+  if (!chat) {
+    redirect('/')
+  }
+
+  if (chat?.userId !== userId) {
+    notFound()
+  }
+
+  return (
+    <AI
+      initialAIState={{
+        chatId: chat.id,
+        messages: chat.messages
+      }}
+    >
+      <Chat id={params.id} />
+    </AI>
+  )
+}

app/search/actions.tsx

@@ -0,0 +1,330 @@
+import {
+  StreamableValue,
+  createAI,
+  createStreamableUI,
+  createStreamableValue,
+  getAIState,
+  getMutableAIState
+} from 'ai/rsc'
+import { CoreMessage, generateId } from 'ai'
+import { Section } from '@/app/search/components/section'
+import { FollowupPanel } from '@/app/search/components/followup-panel'
+import { saveChat } from '@/lib/actions/chat'
+import { Chat } from '@/lib/types/index'
+import { AIMessage } from '@/lib/types/index'
+import { UserMessage } from '@/app/search/components/user-message'
+import { SearchSection } from '@/app/search/components/search-section'
+import SearchRelated from '@/app/search/components/search-related'
+import { CopilotDisplay } from '@/app/search/components/copilot-display'
+import RetrieveSection from '@/app/search/components/retrieve-section'
+import { VideoSearchSection } from '@/app/search/components/video-search-section'
+import { AnswerSection } from '@/app/search/components/answer-section'
+import { workflow } from '@/lib/actions/workflow'
+
+const MAX_MESSAGES = 6
+
+async function submit(
+    formData?: FormData,
+    skip?: boolean,
+    retryMessages?: AIMessage[]
+) {
+  'use server'
+  console.log('🚀 Submit action started:', { skip, hasFormData: !!formData })
+
+  const aiState = getMutableAIState<typeof AI>()
+  const uiStream = createStreamableUI()
+  const isGenerating = createStreamableValue(true)
+  const isCollapsed = createStreamableValue(false)
+
+  const aiMessages = [...(retryMessages ?? aiState.get().messages)]
+  // Get the messages from the state, filter out the tool messages
+  const messages: CoreMessage[] = aiMessages
+      .filter(
+          message =>
+              message.role !== 'tool' &&
+              message.type !== 'followup' &&
+              message.type !== 'related' &&
+              message.type !== 'end'
+      )
+      .map(message => {
+        const { role, content } = message
+        return { role, content } as CoreMessage
+      })
+
+  // Limit the number of messages to the maximum
+  messages.splice(0, Math.max(messages.length - MAX_MESSAGES, 0))
+  // Get the user input from the form data
+  const userInput = skip
+      ? `{"action": "skip"}`
+      : (formData?.get('input') as string)
+
+  const content = skip
+      ? userInput
+      : formData
+          ? JSON.stringify(Object.fromEntries(formData))
+          : null
+  const type = skip
+      ? undefined
+      : formData?.has('input')
+          ? 'input'
+          : formData?.has('related_query')
+              ? 'input_related'
+              : 'inquiry'
+
+  // Add the user message to the state
+  if (content) {
+    console.log('📝 Adding user message:', { type, contentPreview: content.substring(0, 100) })
+    aiState.update({
+      ...aiState.get(),
+      messages: [
+        ...aiState.get().messages,
+        {
+          id: generateId(),
+          role: 'user',
+          content,
+          type
+        }
+      ]
+    })
+    messages.push({
+      role: 'user',
+      content
+    })
+  }
+
+  // Run the agent workflow
+  workflow(
+      { uiStream, isCollapsed, isGenerating },
+      aiState,
+      messages,
+      skip ?? false
+  )
+
+  console.log('✅ Submit action completed')
+  return {
+    id: generateId(),
+    isGenerating: isGenerating.value,
+    component: uiStream.value,
+    isCollapsed: isCollapsed.value
+  }
+}
+
+export type AIState = {
+  messages: AIMessage[]
+  chatId: string
+  isSharePage?: boolean
+}
+
+export type UIState = {
+  id: string
+  component: React.ReactNode
+  isGenerating?: StreamableValue<boolean>
+  isCollapsed?: StreamableValue<boolean>
+}[]
+
+const initialAIState: AIState = {
+  chatId: generateId(),
+  messages: []
+}
+
+const initialUIState: UIState = []
+
+// AI is a provider you wrap your application with so you can access AI and UI state in your components.
+export const AI = createAI<AIState, UIState>({
+  actions: {
+    submit
+  },
+  initialUIState,
+  initialAIState,
+  onGetUIState: async () => {
+    'use server'
+    console.log('🔍 Getting UI state')
+
+    const aiState = getAIState()
+    if (aiState) {
+      const uiState = getUIStateFromAIState(aiState as Chat)
+      return uiState
+    } else {
+      return
+    }
+  },
+  onSetAIState: async ({ state, done }) => {
+    'use server'
+    console.log('💾 Starting onSetAIState:', { 
+      chatId: state.chatId,
+      messageCount: state.messages.length,
+      done 
+    })
+
+    // Check if there is any message of type 'answer' in the state messages
+    if (!state.messages.some(e => e.type === 'answer')) {
+      console.log('⏭️ Skipping save - no answer message found')
+      return
+    }
+
+    const { chatId, messages } = state
+    const path = `/search/${chatId}`
+    console.log('🛣️ Generated path:', path)
+
+    const createdAt = new Date()
+    const userId = 'anonymous'
+    const title =
+        messages.length > 0
+            ? JSON.parse(messages[0].content)?.input?.substring(0, 100) ||
+            'Untitled'
+            : 'Untitled'
+    // Add an 'end' message at the end to determine if the history needs to be reloaded
+    const updatedMessages: AIMessage[] = [
+      ...messages,
+      {
+        id: generateId(),
+        role: 'assistant',
+        content: `end`,
+        type: 'end'
+      }
+    ]
+
+    const chat: Chat = {
+      id: chatId,
+      createdAt,
+      userId,
+      path,
+      title,
+      messages: updatedMessages
+    }
+
+    try {
+      await saveChat(chat)
+      console.log('✨ Chat saved successfully:', { 
+        chatId: chat.id, 
+        path,
+        done,
+        messageCount: chat.messages.length 
+      })
+    } catch (error) {
+      console.error('❌ Error saving chat:', error)
+    }
+  }
+})
+
+export const getUIStateFromAIState = (aiState: Chat) => {
+  console.log('🎨 Converting AI state to UI state:', { 
+    chatId: aiState.chatId,
+    messageCount: aiState.messages.length 
+  })
+
+  const chatId = aiState.chatId
+  const isSharePage = aiState.isSharePage
+
+  // Ensure messages is an array of plain objects
+  const messages = Array.isArray(aiState.messages)
+      ? aiState.messages.map(msg => ({ ...msg }))
+      : []
+
+  return messages
+      .map((message, index) => {
+        const { role, content, id, type, name } = message
+
+        if (
+            !type ||
+            type === 'end' ||
+            (isSharePage && type === 'related') ||
+            (isSharePage && type === 'followup')
+        )
+          return null
+
+        switch (role) {
+          case 'user':
+            switch (type) {
+              case 'input':
+              case 'input_related':
+                const json = JSON.parse(content)
+                const value = type === 'input' ? json.input : json.related_query
+                return {
+                  id,
+                  component: (
+                      <UserMessage
+                          message={value}
+                          chatId={chatId}
+                          showShare={index === 0 && !isSharePage}
+                      />
+                  )
+                }
+              case 'inquiry':
+                return {
+                  id,
+                  component: <CopilotDisplay content={content} />
+                }
+            }
+          case 'assistant':
+            const answer = createStreamableValue()
+            answer.done(content)
+            switch (type) {
+              case 'answer':
+                return {
+                  id,
+                  component: <AnswerSection result={answer.value} />
+                }
+              case 'related':
+                const relatedQueries = createStreamableValue()
+                relatedQueries.done(JSON.parse(content))
+                return {
+                  id,
+                  component: (
+                      <SearchRelated relatedQueries={relatedQueries.value} />
+                  )
+                }
+              case 'followup':
+                return {
+                  id,
+                  component: (
+                      <Section title="Follow-up" className="pb-8">
+                        <FollowupPanel />
+                      </Section>
+                  )
+                }
+            }
+          case 'tool':
+            try {
+              const toolOutput = JSON.parse(content)
+              const isCollapsed = createStreamableValue()
+              isCollapsed.done(true)
+              const searchResults = createStreamableValue()
+              searchResults.done(JSON.stringify(toolOutput))
+              switch (name) {
+                case 'search':
+                  return {
+                    id,
+                    component: <SearchSection result={searchResults.value} />,
+                    isCollapsed: isCollapsed.value
+                  }
+                case 'retrieve':
+                  return {
+                    id,
+                    component: <RetrieveSection data={toolOutput} />,
+                    isCollapsed: isCollapsed.value
+                  }
+                case 'videoSearch':
+                  return {
+                    id,
+                    component: (
+                        <VideoSearchSection result={searchResults.value} />
+                    ),
+                    isCollapsed: isCollapsed.value
+                  }
+              }
+            } catch (error) {
+              return {
+                id,
+                component: null
+              }
+            }
+          default:
+            return {
+              id,
+              component: null
+            }
+        }
+      })
+      .filter(message => message !== null) as UIState
+}

app/search/components/answer-section-generated.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { Section } from './section'
+import { BotMessage } from './message'
+
+export type AnswerSectionProps = {
+  result: string
+}
+
+export function AnswerSectionGenerated({ result }: AnswerSectionProps) {
+  return (
+    <div>
+      <Section title="Answer">
+        <BotMessage content={result} />
+      </Section>
+    </div>
+  )
+}