chore: update frontend packages (#877)

Author: gooishin

usecases/ai/edge-ai-demo-studio/frontend/package-lock.json

@@ -41,7 +41,7 @@
     "graphql": "^16.11.0",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "lucide-react": "^0.552.0",
-    "next": "^15.5.4",
+    "next": "^15.5.7",
     "next-themes": "^0.4.6",
     "openai": "^6.7.0",
     "openvino-node": "^2025.1.0",

usecases/ai/edge-ai-demo-studio/frontend/package.json

@@ -25,6 +25,7 @@ import {
   Square,
   Languages,
   Mic,
+  Trash2,
 } from 'lucide-react'
 import { useEffect, useRef, useState, useMemo } from 'react'
 import { toast } from 'sonner'
@@ -36,6 +37,11 @@ import {
 } from '@/components/workloads/text-to-speech/common'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 
 interface ConversationPanelProps {
   sessionId: string
@@ -62,7 +68,7 @@ export function ConversationPanel({
     enabled: !disabled,
   })
 
-  const { messages, sendMessage, status, stop } = useChat({
+  const { messages, sendMessage, status, stop, setMessages } = useChat({
     transport: new DefaultChatTransport({
       api: '/api/chat/digital-avatar',
     }),
@@ -182,16 +188,42 @@ export function ConversationPanel({
     }
   }
 
+  const handleClearChat = () => {
+    handleStopChat() // Stop any ongoing generation
+    setMessages([])
+    toast.success('Chat history cleared')
+  }
+
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <MessageCircle className="h-5 w-5 text-blue-500" />
-          Conversation
-        </CardTitle>
-        <CardDescription>
-          Chat with your digital avatar in multiple languages
-        </CardDescription>
+        <div className="flex items-center justify-between">
+          <div className="space-y-1.5">
+            <CardTitle className="flex items-center gap-2">
+              <MessageCircle className="h-5 w-5 text-blue-500" />
+              Conversation
+            </CardTitle>
+            <CardDescription>
+              Chat with your digital avatar in multiple languages
+            </CardDescription>
+          </div>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline-destructive"
+                size="sm"
+                onClick={handleClearChat}
+                hidden={messages.length === 0}
+                className="flex items-center gap-2"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" align="center">
+              <p className="text-sm">Clear chat history</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
       </CardHeader>
       <CardContent className="space-y-4">
         {/* Language and Voice Settings */}

usecases/ai/edge-ai-demo-studio/frontend/src/components/samples/digital-avatar/conversation-panel.tsx

@@ -6,9 +6,14 @@
 import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import { useChat } from '@ai-sdk/react'
 import { DefaultChatTransport } from 'ai'
-import { Bot, Send, User, Square, Loader2 } from 'lucide-react'
+import { Bot, Send, User, Square, Loader2, Trash2 } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -26,7 +31,7 @@ export function ChatPanel({
   const chatEndRef = useRef<HTMLDivElement>(null)
   const [currentMessage, setCurrentMessage] = useState('')
 
-  const { messages, sendMessage, status, stop } = useChat({
+  const { messages, sendMessage, status, stop, setMessages } = useChat({
     transport: new DefaultChatTransport({
       api: '/api/chat/rag',
     }),
@@ -66,6 +71,11 @@ export function ChatPanel({
     stop()
   }
 
+  const handleClearChat = () => {
+    handleStopChat() // Stop any ongoing generation
+    setMessages([])
+  }
+
   return (
     <div className="flex h-full flex-col bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-800">
       {/* Chat Messages */}
@@ -146,7 +156,7 @@ export function ChatPanel({
               className="max-h-[120px] min-h-[56px] resize-none rounded-xl border-slate-300 bg-slate-50 px-4 py-3 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-slate-600 dark:bg-slate-800"
               disabled={disabled || status !== 'ready'}
             />
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-row gap-2">
               {status === 'streaming' ? (
                 <Button
                   type="button"
@@ -176,6 +186,23 @@ export function ChatPanel({
                   <Send className="h-5 w-5" />
                 </Button>
               )}
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline-destructive"
+                    size="icon"
+                    onClick={handleClearChat}
+                    hidden={messages.length === 0}
+                    className="h-[56px] w-14 rounded-xl"
+                  >
+                    <Trash2 className="h-5 w-5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top" align="center">
+                  <p className="text-sm">Clear chat history</p>
+                </TooltipContent>
+              </Tooltip>
             </div>
           </div>
         </div>

usecases/ai/edge-ai-demo-studio/frontend/src/components/samples/rag-chat/chat-panel.tsx

@@ -18,10 +18,14 @@ const buttonVariants = cva(
           'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        ['outline-destructive']:
+          'border border-destructive text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20',
         secondary:
           'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost:
           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        ['ghost-destructive']:
+          'hover:bg-destructive/10 hover:text-destructive dark:hover:bg-destructive/20',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {

usecases/ai/edge-ai-demo-studio/frontend/src/components/ui/button.tsx

@@ -225,8 +225,10 @@ export interface ImageGenerationFormData {
   showAdvanced: boolean
 }
 
-export interface ImageEditFormData
-  extends Omit<ImageGenerationFormData, 'numImages'> {
+export interface ImageEditFormData extends Omit<
+  ImageGenerationFormData,
+  'numImages'
+> {
   numImages: number
   sourceImage: File | null
   sourceImagePreview: string

usecases/ai/edge-ai-demo-studio/frontend/src/hooks/use-image-generation.ts

@@ -6,15 +6,6 @@ import { getPayload } from 'payload'
 import configPromise from '@payload-config'
 import { McpServer } from '@/payload-types'
 
-// export interface McpServerDoc {
-//   id: number
-//   name: string
-//   url: string
-//   apiKey?: string
-//   disabled?: boolean | null
-//   description?: string
-// }
-
 let payload: Awaited<ReturnType<typeof getPayload>> | null = null
 
 async function getPayloadInstance() {