Merge pull request #395 from miurla/refactor/improve-ui

Refactor/improve UI

Author: miurla

app/api/chat/route.ts

@@ -1,16 +1,16 @@
-import {
-  streamText,
-  createDataStreamResponse,
-  convertToCoreMessages,
-  JSONValue
-} from 'ai'
-import { researcher } from '@/lib/agents/researcher'
-import { generateRelatedQuestions } from '@/lib/agents/generate-related-questions'
-import { cookies } from 'next/headers'
 import { getChat, saveChat } from '@/lib/actions/chat'
+import { generateRelatedQuestions } from '@/lib/agents/generate-related-questions'
+import { researcher } from '@/lib/agents/researcher'
 import { ExtendedCoreMessage } from '@/lib/types'
 import { convertToExtendedCoreMessages } from '@/lib/utils'
 import { isProviderEnabled } from '@/lib/utils/registry'
+import {
+  convertToCoreMessages,
+  createDataStreamResponse,
+  JSONValue,
+  streamText
+} from 'ai'
+import { cookies } from 'next/headers'
 
 export const maxDuration = 30
 

components/chat-share.tsx

@@ -73,7 +73,7 @@ export function ChatShare({ chatId, className }: ChatShareProps) {
       >
         <DialogTrigger asChild>
           <Button
-            className={cn('rounded-full', isLoading && 'hidden')}
+            className={cn('rounded-full', isLoading && 'invisible')}
             size="icon"
             variant={'ghost'}
             onClick={() => setOpen(true)}

components/chat.tsx

@@ -2,6 +2,7 @@
 
 import { CHAT_ID } from '@/lib/constants'
 import { Message, useChat } from 'ai/react'
+import { useEffect } from 'react'
 import { toast } from 'sonner'
 import { ChatMessages } from './chat-messages'
 import { ChatPanel } from './chat-panel'
@@ -38,6 +39,10 @@ export function Chat({
     }
   })
 
+  useEffect(() => {
+    setMessages(savedMessages)
+  }, [id])
+
   const onQuerySelect = (query: string) => {
     append({
       role: 'user',
@@ -46,7 +51,7 @@ export function Chat({
   }
 
   return (
-    <div className="flex flex-col w-full max-w-3xl pt-10 pb-16 mx-auto stretch">
+    <div className="flex flex-col w-full max-w-3xl pt-10 pb-20 mx-auto stretch">
       <ChatMessages
         messages={messages}
         onQuerySelect={onQuerySelect}

components/custom-link.tsx

@@ -0,0 +1,37 @@
+import { cn } from '@/lib/utils'
+import { AnchorHTMLAttributes, DetailedHTMLProps, ReactNode } from 'react'
+
+type CustomLinkProps = Omit<
+  DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>,
+  'ref'
+> & {
+  children: ReactNode
+}
+
+export function Citing({
+  href,
+  children,
+  className,
+  ...props
+}: CustomLinkProps) {
+  const childrenText = children?.toString() || ''
+  const isNumber = /^\d+$/.test(childrenText)
+  const linkClasses = cn(
+    isNumber
+      ? 'text-[10px] bg-muted text-muted-froreground rounded-full w-4 h-4 px-0.5 inline-flex items-center justify-center hover:bg-muted/50 duration-200 no-underline -translate-y-0.5'
+      : 'hover:underline inline-flex items-center gap-1.5',
+    className
+  )
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={linkClasses}
+      {...props}
+    >
+      {children}
+    </a>
+  )
+}

components/message.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import { MemoizedReactMarkdown } from './ui/markdown'
+import 'katex/dist/katex.min.css'
 import rehypeExternalLinks from 'rehype-external-links'
+import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
-import rehypeKatex from 'rehype-katex'
-import 'katex/dist/katex.min.css'
+import { Citing } from './custom-link'
 import { CodeBlock } from './ui/codeblock'
+import { MemoizedReactMarkdown } from './ui/markdown'
 
 export function BotMessage({ message }: { message: string }) {
   // Check if the content contains LaTeX patterns
@@ -67,7 +68,8 @@ export function BotMessage({ message }: { message: string }) {
               {...props}
             />
           )
-        }
+        },
+        a: Citing
       }}
     >
       {message}

lib/agents/researcher.ts

@@ -1,10 +1,13 @@
 import { CoreMessage, streamText } from 'ai'
-import { getModel } from '../utils/registry'
-import { searchTool } from '../tools/search'
 import { retrieveTool } from '../tools/retrieve'
+import { searchTool } from '../tools/search'
 import { videoSearchTool } from '../tools/video-search'
+import { getModel } from '../utils/registry'
+
+const SYSTEM_PROMPT = `
+Instructions:
 
-const SYSTEM_PROMPT = `You are a helpful AI assistant with access to real-time web search, content retrieval, and video search capabilities.
+You are a helpful AI assistant with access to real-time web search, content retrieval, and video search capabilities.
 When asked a question, you should:
 1. Search for relevant information using the search tool when needed
 2. Use the retrieve tool to get detailed content from specific URLs
@@ -16,6 +19,9 @@ When asked a question, you should:
 8. Use markdown to structure your responses. Use headings to break up the content into sections.
 9. Include relevant images that support your explanations, but avoid using images frequently. Use images only when they actively aid the user's understanding.
 10. **Use the retrieve tool only with user-provided URLs.**
+
+Citation Format:
+<cite_format>[number](url)</cite_format>
 `
 
 type ResearcherReturn = Parameters<typeof streamText>[0]