Update components with UI and functionality improvements

Author: Gerome-Elassaad

components/chat-history.tsx

@@ -21,7 +21,6 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog'
-import { ChatSession } from '@/lib/chat-persistence'
 import { 
   MessageSquare, 
   Search, 
@@ -36,6 +35,7 @@ import {
   Clock
 } from 'lucide-react'
 import { formatDistanceToNow } from 'date-fns'
+import { ChatSession } from '@/lib/database.types'
 
 interface ChatHistoryProps {
   sessions: ChatSession[]
@@ -71,26 +71,26 @@ export function ChatHistory({
 
   const groupedSessions = {
     today: filteredSessions.filter(session => {
-      const sessionDate = new Date(session.lastActivity)
+      const sessionDate = new Date(session.last_activity)
       const today = new Date()
       return sessionDate.toDateString() === today.toDateString()
     }),
     yesterday: filteredSessions.filter(session => {
-      const sessionDate = new Date(session.lastActivity)
+      const sessionDate = new Date(session.last_activity)
       const yesterday = new Date()
       yesterday.setDate(yesterday.getDate() - 1)
       return sessionDate.toDateString() === yesterday.toDateString()
     }),
     lastWeek: filteredSessions.filter(session => {
-      const sessionDate = new Date(session.lastActivity)
+      const sessionDate = new Date(session.last_activity)
       const weekAgo = new Date()
       weekAgo.setDate(weekAgo.getDate() - 7)
       const yesterday = new Date()
       yesterday.setDate(yesterday.getDate() - 1)
       return sessionDate > weekAgo && sessionDate < yesterday
     }),
     older: filteredSessions.filter(session => {
-      const sessionDate = new Date(session.lastActivity)
+      const sessionDate = new Date(session.last_activity)
       const weekAgo = new Date()
       weekAgo.setDate(weekAgo.getDate() - 7)
       return sessionDate <= weekAgo
@@ -106,27 +106,27 @@ export function ChatHistory({
   }
 
   const startEditing = (session: ChatSession) => {
-    setEditingSession(session.sessionId)
+    setEditingSession(session.session_id)
     setEditTitle(session.title || '')
   }
 
   const handleDeleteConfirm = () => {
     if (deletingSession) {
-      onSessionDelete(deletingSession.sessionId)
+      onSessionDelete(deletingSession.session_id)
       setDeletingSession(null)
     }
   }
 
   const SessionItem = ({ session }: { session: ChatSession }) => {
-    const isActive = session.sessionId === currentSessionId
-    const isEditing = editingSession === session.sessionId
+    const isActive = session.session_id === currentSessionId
+    const isEditing = editingSession === session.session_id
 
     return (
       <div
         className={`group flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-colors hover:bg-accent ${
           isActive ? 'bg-accent border border-border' : ''
         }`}
-        onClick={() => !isEditing && onSessionSelect(session.sessionId)}
+        onClick={() => !isEditing && onSessionSelect(session.session_id)}
       >
         <MessageSquare className="h-4 w-4 text-muted-foreground shrink-0" />
 
@@ -135,10 +135,10 @@ export function ChatHistory({
             <Input
               value={editTitle}
               onChange={(e) => setEditTitle(e.target.value)}
-              onBlur={() => handleSessionRename(session.sessionId)}
+              onBlur={() => handleSessionRename(session.session_id)}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {
-                  handleSessionRename(session.sessionId)
+                  handleSessionRename(session.session_id)
                 } else if (e.key === 'Escape') {
                   setEditingSession(null)
                   setEditTitle('')
@@ -155,9 +155,9 @@ export function ChatHistory({
               </div>
               <div className="flex items-center gap-1 text-xs text-muted-foreground">
                 <Hash className="h-3 w-3" />
-                <span>{session.messageCount}</span>
+                <span>{session.message_count}</span>
                 <Clock className="h-3 w-3 ml-1" />
-                <span>{formatDistanceToNow(new Date(session.lastActivity), { addSuffix: true })}</span>
+                <span>{formatDistanceToNow(new Date(session.last_activity), { addSuffix: true })}</span>
               </div>
               {(session.model || session.template) && (
                 <div className="flex items-center gap-1 text-xs text-muted-foreground mt-1">
@@ -210,7 +210,7 @@ export function ChatHistory({
         </h3>
         <div className="space-y-1">
           {sessions.map(session => (
-            <SessionItem key={session.sessionId} session={session} />
+            <SessionItem key={session.session_id} session={session} />
           ))}
         </div>
       </div>

components/chat-settings.tsx

@@ -7,6 +7,7 @@ import {
 } from './ui/dropdown-menu'
 import { Input } from './ui/input'
 import { Label } from './ui/label'
+import { Switch } from './ui/switch'
 import {
   Tooltip,
   TooltipContent,
@@ -21,11 +22,15 @@ export function ChatSettings({
   baseURLConfigurable,
   languageModel,
   onLanguageModelChange,
+  useMorphApply,
+  onUseMorphApplyChange,
 }: {
   apiKeyConfigurable: boolean
   baseURLConfigurable: boolean
   languageModel: LLMModelConfig
   onLanguageModelChange: (model: LLMModelConfig) => void
+  useMorphApply?: boolean
+  onUseMorphApplyChange?: (value: boolean) => void
 }) {
   return (
     <DropdownMenu>
@@ -199,6 +204,26 @@ export function ChatSettings({
             />
           </div>
         </div>
+        {onUseMorphApplyChange && (
+          <>
+            <DropdownMenuSeparator />
+            <div className="flex items-center justify-between px-2 py-2">
+              <div className="flex flex-col gap-0.5">
+                <Label htmlFor="morph-apply" className="text-sm font-medium">
+                  Morph Apply
+                </Label>
+                <span className="text-xs text-muted-foreground">
+                  Edit existing code instead of regenerating
+                </span>
+              </div>
+              <Switch
+                id="morph-apply"
+                checked={useMorphApply}
+                onCheckedChange={onUseMorphApplyChange}
+              />
+            </div>
+          </>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   )

components/chat.tsx

@@ -2,7 +2,7 @@ import { Message } from '@/lib/messages'
 import { FragmentSchema } from '@/lib/schema'
 import { ExecutionResult } from '@/lib/types'
 import { DeepPartial } from 'ai'
-import { LoaderIcon, Terminal } from 'lucide-react'
+import { LoaderIcon, Terminal, Sparkles } from 'lucide-react'
 import { useEffect } from 'react'
 
 export function Chat({
@@ -17,6 +17,7 @@ export function Chat({
     result: ExecutionResult | undefined
   }) => void
 }) {
+
   useEffect(() => {
     const chatContainer = document.getElementById('chat-container')
     if (chatContainer) {
@@ -30,6 +31,11 @@ export function Chat({
       id="chat-container"
       className="flex flex-col pb-12 gap-2 overflow-y-auto max-h-full"
     >
+      {messages.length === 0 && !isLoading && (
+        <div className="flex items-center justify-center h-full text-muted-foreground text-lg font-serif">
+        </div>
+      )}
+
       {messages.map((message: Message, index: number) => (
         <div
           className={`flex flex-col px-4 shadow-sm whitespace-pre-wrap ${message.role !== 'user' ? 'bg-accent dark:bg-white/5 border text-accent-foreground dark:text-muted-foreground py-4 rounded-2xl gap-4 w-full' : 'bg-gradient-to-b from-black/5 to-black/10 dark:from-black/30 dark:to-black/50 py-2 rounded-xl gap-2 w-fit'} font-serif text-primary`}

components/code-view.tsx

@@ -1,50 +1,30 @@
-import { useEffect, useRef } from 'react'
-import 'prismjs'
-import { readonlyEditor } from 'prism-code-editor/setups'
-import 'prism-code-editor/themes/prism-tomorrow.css'
-import 'prism-code-editor/layout.css'
-import 'prism-code-editor/scrollbar.css'
+// import "prismjs/plugins/line-numbers/prism-line-numbers.js";
+// import "prismjs/plugins/line-numbers/prism-line-numbers.css";
 import './code-theme.css'
+import Prism from 'prismjs'
 import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-jsx'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-tsx'
 import 'prismjs/components/prism-typescript'
+import { useEffect } from 'react'
 
 export function CodeView({ code, lang }: { code: string; lang: string }) {
-  const editorRef = useRef<HTMLDivElement>(null)
-  const editor = useRef<any>(null)
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      if (editorRef.current && !editor.current) {
-        editor.current = readonlyEditor(editorRef.current, {
-          language: lang,
-          value: code,
-          wordWrap: true,
-          theme: 'prism-tomorrow',
-        })
-      }
-    }
-  }, [lang, code])
-
   useEffect(() => {
-    if (editor.current) {
-      editor.current.setOptions({ value: code })
-    }
+    Prism.highlightAll()
   }, [code])
 
   return (
-    <div
-      ref={editorRef}
+    <pre
       className="p-4 pt-2"
       style={{
         fontSize: 12,
         backgroundColor: 'transparent',
         borderRadius: 0,
         margin: 0,
-        height: '100%',
       }}
-    />
+    >
+      <code className={`language-${lang}`}>{code}</code>
+    </pre>
   )
-}
+}