refactor(ux): consolidate BMAD skills, update design system, and clean up Prisma generated client

keep-notes/components/chat/chat-messages.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { User, Bot, Loader2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { useLanguage } from '@/lib/i18n'
+
+interface ChatMessagesProps {
+  messages: any[]
+  isLoading?: boolean
+}
+
+function getMessageContent(msg: any): string {
+  if (typeof msg.content === 'string') return msg.content
+  if (msg.parts && Array.isArray(msg.parts)) {
+    return msg.parts
+      .filter((p: any) => p.type === 'text')
+      .map((p: any) => p.text)
+      .join('')
+  }
+  return ''
+}
+
+export function ChatMessages({ messages, isLoading }: ChatMessagesProps) {
+  const { t } = useLanguage()
+
+  return (
+    <div className="w-full max-w-4xl flex flex-col pt-8 pb-4">
+      {messages.length === 0 && !isLoading && (
+        <div className="flex flex-col items-center justify-center h-[60vh] text-center space-y-6">
+          <div className="p-5 bg-gradient-to-br from-primary/10 to-primary/5 rounded-full shadow-inner ring-1 ring-primary/10">
+            <Bot className="h-12 w-12 text-primary opacity-60" />
+          </div>
+          <p className="text-muted-foreground text-sm md:text-base max-w-md px-4 font-medium">
+            {t('chat.welcome')}
+          </p>
+        </div>
+      )}
+
+      {messages.map((msg, index) => {
+        const content = getMessageContent(msg)
+        const isLastAssistant = msg.role === 'assistant' && index === messages.length - 1 && isLoading
+
+        return (
+          <div
+            key={msg.id || index}
+            className={cn(
+              "flex w-full px-4 md:px-0 py-6 my-2 group",
+              msg.role === 'user' ? "justify-end" : "justify-start border-y border-transparent dark:border-transparent"
+            )}
+          >
+            {msg.role === 'user' ? (
+              <div dir="auto" className="max-w-[85%] md:max-w-[70%] bg-[#f4f4f5] dark:bg-[#2a2d36] text-slate-800 dark:text-slate-100 rounded-3xl rounded-br-md px-6 py-4 shadow-sm border border-slate-200/50 dark:border-white/5">
+                <div className="prose prose-sm dark:prose-invert max-w-none text-[15px] leading-relaxed">
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+                </div>
+              </div>
+            ) : (
+              <div className="flex gap-4 md:gap-6 w-full max-w-3xl">
+                <Avatar className="h-8 w-8 shrink-0 bg-transparent border border-primary/20 text-primary mt-1 shadow-sm">
+                  <AvatarFallback className="bg-transparent"><Bot className="h-4 w-4" /></AvatarFallback>
+                </Avatar>
+                <div dir="auto" className="flex-1 overflow-hidden pt-1">
+                  {content ? (
+                    <div className="prose prose-slate dark:prose-invert max-w-none prose-p:leading-relaxed prose-pre:bg-slate-900 prose-pre:shadow-sm prose-pre:border prose-pre:border-slate-800 prose-headings:font-semibold marker:text-primary/50 text-[15px] prose-table:border prose-table:border-slate-300 prose-th:border prose-th:border-slate-300 prose-th:px-3 prose-th:py-2 prose-th:bg-slate-100 dark:prose-th:bg-slate-800 prose-td:border prose-td:border-slate-300 prose-td:px-3 prose-td:py-2">
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+                    </div>
+                  ) : isLastAssistant ? (
+                    <div className="flex items-center gap-3 text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                      <span className="text-[15px] animate-pulse">{t('chat.searching')}</span>
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}