Merge pull request #132 from miurla/share

Enable sharing of search results

README.md

@@ -19,7 +19,7 @@ Please note that there are differences between this repository and the official
 
 - [x] Enable specifying the model to use (only writer agent)
 - [x] Implement search history functionality
-- [ ] Develop features for sharing results
+- [x] Develop features for sharing results
 - [ ] Add video support for search functionality
 - [ ] Implement RAG support
 - [ ] Introduce tool support for enhanced productivity

app/actions.tsx

@@ -229,6 +229,7 @@ async function submit(formData?: FormData, skip?: boolean) {
 export type AIState = {
   messages: AIMessage[]
   chatId: string
+  isSharePage?: boolean
 }
 
 export type UIState = {
@@ -304,11 +305,19 @@ export const AI = createAI<AIState, UIState>({
 })
 
 export const getUIStateFromAIState = (aiState: Chat) => {
+  const chatId = aiState.chatId
+  const isSharePage = aiState.isSharePage
   return aiState.messages
-    .map(message => {
+    .map((message, index) => {
       const { role, content, id, type, name } = message
 
-      if (!type || type === 'end') return null
+      if (
+        !type ||
+        type === 'end' ||
+        (isSharePage && type === 'related') ||
+        (isSharePage && type === 'followup')
+      )
+        return null
 
       switch (role) {
         case 'user':
@@ -319,7 +328,13 @@ export const getUIStateFromAIState = (aiState: Chat) => {
               const value = type === 'input' ? json.input : json.related_query
               return {
                 id,
-                component: <UserMessage message={value} />
+                component: (
+                  <UserMessage
+                    message={value}
+                    chatId={chatId}
+                    showShare={index === 0 && !isSharePage}
+                  />
+                )
               }
             case 'inquiry':
               return {

app/search/[id]/page.tsx

@@ -31,7 +31,12 @@ export default async function SearchPage({ params }: SearchPageProps) {
   }
 
   return (
-    <AI initialAIState={{ chatId: chat.id, messages: chat.messages }}>
+    <AI
+      initialAIState={{
+        chatId: chat.id,
+        messages: chat.messages
+      }}
+    >
       <Chat id={params.id} />
     </AI>
   )

app/share/[id]/page.tsx

@@ -0,0 +1,42 @@
+import { notFound } from 'next/navigation'
+import { Chat } from '@/components/chat'
+import { getSharedChat } from '@/lib/actions/chat'
+import { AI } from '@/app/actions'
+
+export interface SharePageProps {
+  params: {
+    id: string
+  }
+}
+
+export async function generateMetadata({ params }: SharePageProps) {
+  const chat = await getSharedChat(params.id)
+
+  if (!chat || !chat.sharePath) {
+    return notFound()
+  }
+
+  return {
+    title: chat?.title.toString().slice(0, 50) || 'Search'
+  }
+}
+
+export default async function SharePage({ params }: SharePageProps) {
+  const chat = await getSharedChat(params.id)
+
+  if (!chat || !chat.sharePath) {
+    notFound()
+  }
+
+  return (
+    <AI
+      initialAIState={{
+        chatId: chat.id,
+        messages: chat.messages,
+        isSharePage: true
+      }}
+    >
+      <Chat id={params.id} />
+    </AI>
+  )
+}

components/chat-share.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { Button } from './ui/button'
+import { Share } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTrigger,
+  DialogDescription,
+  DialogTitle
+} 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'
+
+interface ChatShareProps {
+  chatId: string
+  className?: string
+}
+
+export function ChatShare({ chatId, className }: ChatShareProps) {
+  const [open, setOpen] = useState(false)
+  const [pending, startTransition] = useTransition()
+  const { copyToClipboard } = useCopyToClipboard({ timeout: 1000 })
+
+  const handleClick = async () => {
+    startTransition(async () => {
+      const result = await shareChat(chatId)
+      if (!result) {
+        toast.error('Failed to share chat')
+      }
+
+      if (!result?.sharePath) {
+        toast.error('Could not copy link to clipboard')
+        return
+      }
+
+      const url = new URL(result.sharePath, window.location.origin)
+      copyToClipboard(url.toString())
+      toast.success('Link copied to clipboard')
+      setOpen(false)
+    })
+  }
+
+  return (
+    <div className={className}>
+      <Dialog
+        open={open}
+        onOpenChange={open => setOpen(open)}
+        aria-labelledby="share-dialog-title"
+        aria-describedby="share-dialog-description"
+      >
+        <DialogTrigger asChild>
+          <Button
+            className="rounded-full"
+            size="icon"
+            variant={'ghost'}
+            onClick={() => setOpen(true)}
+          >
+            <Share size={14} />
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Share link to search result</DialogTitle>
+            <DialogDescription>
+              Anyone with the link will be able to view this search result.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="items-center">
+            <Button onClick={handleClick} disabled={pending} size="sm">
+              {pending ? <Spinner /> : 'Copy link'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

components/chat.tsx

@@ -30,7 +30,7 @@ export function Chat({ id }: ChatProps) {
   }, [aiState, router])
 
   return (
-    <div className="px-8 sm:px-12 pt-6 md:pt-8 pb-14 md:pb-24 max-w-3xl mx-auto flex flex-col space-y-3 md:space-y-4">
+    <div className="px-8 sm:px-12 pt-12 md:pt-14 pb-14 md:pb-24 max-w-3xl mx-auto flex flex-col space-y-3 md:space-y-4">
       <ChatMessages messages={messages} />
       <ChatPanel messages={messages} />
     </div>

components/collapsible-message.tsx

@@ -58,6 +58,7 @@ export const CollapsibleMessage: React.FC<CollapsibleMessageProps> = ({
             className={cn('-mt-3 rounded-full')}
           >
             <ChevronDown
+              size={14}
               className={cn(
                 open ? 'rotate-180' : 'rotate-0',
                 'h-4 w-4 transition-all'

components/copilot-display.tsx

@@ -20,10 +20,7 @@ export function CopilotDisplay({ content }: CopilotDisplayProps) {
 
     return (
       <Card className="p-3 md:p-4 w-full flex justify-between items-center">
-        <div className="flex items-center space-x-2 flex-1 min-w-0">
-          <IconLogo className="w-4 h-4 flex-shrink-0" />
-          <h5 className="text-muted-foreground text-xs truncate">{query}</h5>
-        </div>
+        <h5 className="text-muted-foreground text-xs truncate">{query}</h5>
         <Check size={16} className="text-green-500 w-4 h-4" />
       </Card>
     )

components/user-message.tsx

@@ -1,13 +1,21 @@
 import React from 'react'
+import { ChatShare } from './chat-share'
 
 type UserMessageProps = {
   message: string
+  chatId?: string
+  showShare?: boolean
 }
 
-export const UserMessage: React.FC<UserMessageProps> = ({ message }) => {
+export const UserMessage: React.FC<UserMessageProps> = ({
+  message,
+  chatId,
+  showShare = false
+}) => {
   return (
-    <div className="mt-6">
-      <div className="text-xl">{message}</div>
+    <div className="flex items-center w-full space-x-1 mt-2 min-h-10">
+      <div className="text-xl flex-1">{message}</div>
+      {showShare && chatId && <ChatShare chatId={chatId} />}
     </div>
   )
 }

lib/actions/chat.ts

@@ -71,4 +71,31 @@ export async function saveChat(chat: Chat, userId: string = 'anonymous') {
     member: `chat:${chat.id}`
   })
   await pipeline.exec()
-}
+}
+
+export async function getSharedChat(id: string) {
+  const chat = await redis.hgetall<Chat>(`chat:${id}`)
+
+  if (!chat || !chat.sharePath) {
+    return null
+  }
+
+  return chat
+}
+
+export async function shareChat(id: string, userId: string = 'anonymous') {
+  const chat = await redis.hgetall<Chat>(`chat:${id}`)
+
+  if (!chat || chat.userId !== userId) {
+    return null
+  }
+
+  const payload = {
+    ...chat,
+    sharePath: `/share/${id}`
+  }
+
+  await redis.hmset(`chat:${id}`, payload)
+
+  return payload
+}

lib/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,33 @@
+'use client'
+
+import { useState } from 'react'
+
+export interface useCopyToClipboardProps {
+  timeout?: number
+}
+
+export function useCopyToClipboard({
+  timeout = 2000
+}: useCopyToClipboardProps) {
+  const [isCopied, setIsCopied] = useState<Boolean>(false)
+
+  const copyToClipboard = (value: string) => {
+    if (typeof window === 'undefined' || !navigator.clipboard?.writeText) {
+      return
+    }
+
+    if (!value) {
+      return
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true)
+
+      setTimeout(() => {
+        setIsCopied(false)
+      }, timeout)
+    })
+  }
+
+  return { isCopied, copyToClipboard }
+}