From f268011e93dabe7acd79e13bbdf78becae555772 Mon Sep 17 00:00:00 2001
From: Blair Chen <blrchen@hotmail.com>
Date: Sun, 1 Jun 2025 17:04:39 +0800
Subject: [PATCH] Enhance chat and markdown content rendering experience.

---
 app/chat/PersonaModal.tsx        |  50 +++++++----
 app/chat/PersonaPanel.tsx        |  19 +---
 app/layout.tsx                   |   2 +-
 components/Chat/Chat.tsx         |  59 +++++++++----
 components/Chat/ChatSideBar.tsx  |  20 +++--
 components/Chat/Message.tsx      |  49 ++++-------
 components/Chat/chatContext.ts   |   4 +-
 components/Chat/index.scss       |  11 +--
 components/Chat/useChatHook.ts   | 143 ++++++++++---------------------
 components/Markdown/Markdown.tsx | 119 +++++++++++++++++++++----
 components/Markdown/index.scss   |  18 ----
 eslint.config.mjs                |   4 +-
 package.json                     |   2 +-
 styles/globals.scss              |  18 ----
 14 files changed, 263 insertions(+), 255 deletions(-)
 delete mode 100644 components/Markdown/index.scss

diff --git a/app/chat/PersonaModal.tsx b/app/chat/PersonaModal.tsx
index e7a75dd2..3ff778cc 100644
--- a/app/chat/PersonaModal.tsx
+++ b/app/chat/PersonaModal.tsx
@@ -1,38 +1,58 @@
 import React, { useContext, useEffect } from 'react'
 import { Button, Dialog, Flex, TextArea, TextField } from '@radix-ui/themes'
 import { useForm } from 'react-hook-form'
-import { ChatContext, Persona } from '@/components'
+import ChatContext from '@/components/Chat/chatContext'
+import type { Persona } from '@/components/Chat/interface'
 
 const PersonaModal = () => {
   const {
     isOpenPersonaModal: open,
     editPersona: detail,
-    onCreatePersona,
+    onCreateOrUpdatePersona,
     onClosePersonaModal
   } = useContext(ChatContext)
 
-  const { register, handleSubmit, setValue } = useForm()
-
-  const formSubmit = handleSubmit((values: any) => {
-    onCreatePersona?.(values as Persona)
-  })
+  const { register, handleSubmit, setValue, reset } = useForm<{
+    name: string
+    prompt: string
+    role: string
+  }>()
 
   useEffect(() => {
-    if (detail) {
-      setValue('name', detail.name, { shouldTouch: true })
-      setValue('prompt', detail.prompt, { shouldTouch: true })
+    if (open && detail) {
+      setValue('name', detail.name ?? '')
+      setValue('prompt', detail.prompt ?? '')
+    } else if (open && !detail) {
+      reset({ name: '', prompt: '' })
+    }
+    if (!open) {
+      reset({ name: '', prompt: '' })
     }
-  }, [detail, setValue])
+  }, [open, detail, setValue, reset])
+
+  const formSubmit = handleSubmit(({ name, prompt }) => {
+    const persona: Persona = { name, prompt, role: 'assistant' }
+    onCreateOrUpdatePersona?.(persona)
+  })
 
   return (
-    <Dialog.Root open={open!}>
+    <Dialog.Root open={!!open}>
       <Dialog.Content size="4">
-        <Dialog.Title>Create or Edit Persona Prompt</Dialog.Title>
+        <Dialog.Title>{detail ? 'Edit Persona Prompt' : 'Create Persona Prompt'}</Dialog.Title>
         <Dialog.Description size="2" mb="4"></Dialog.Description>
         <form onSubmit={formSubmit}>
           <Flex direction="column" gap="3">
-            <TextField.Root placeholder="Name" {...register('name', { required: true })} />
-            <TextArea placeholder="Prompt" rows={7} {...register('prompt', { required: true })} />
+            <TextField.Root
+              placeholder="Name"
+              {...register('name', { required: true })}
+              autoComplete="off"
+            />
+            <TextArea
+              placeholder="Prompt"
+              rows={7}
+              {...register('prompt', { required: true })}
+              autoComplete="off"
+            />
           </Flex>
           <Flex gap="3" mt="4" justify="end">
             <Dialog.Close>
diff --git a/app/chat/PersonaPanel.tsx b/app/chat/PersonaPanel.tsx
index f6aad0d9..19365d43 100644
--- a/app/chat/PersonaPanel.tsx
+++ b/app/chat/PersonaPanel.tsx
@@ -20,7 +20,6 @@ import { ChatContext, Persona } from '@/components'
 
 const PersonaPanel = () => {
   const {
-    personaPanelType,
     DefaultPersonas,
     personas,
     openPersonaPanel,
@@ -35,27 +34,17 @@ const PersonaPanel = () => {
   const [searchText, setSearchText] = useState('')
 
   const handleSearch = useCallback(
-    debounce((type: string, list: Persona[], searchText: string) => {
+    debounce((list: Persona[], searchText: string) => {
       setPromptList(
-        list.filter((item) => {
-          if (type === 'chat') {
-            return (
-              !item.key && (item.prompt?.includes(searchText) || item.name?.includes(searchText))
-            )
-          } else {
-            return (
-              item.key && (item.prompt?.includes(searchText) || item.name?.includes(searchText))
-            )
-          }
-        })
+        list.filter((item) => item.prompt?.includes(searchText) || item.name?.includes(searchText))
       )
     }, 350),
     []
   )
 
   useEffect(() => {
-    handleSearch(personaPanelType, [...DefaultPersonas, ...personas], searchText)
-  }, [personaPanelType, searchText, DefaultPersonas, personas, handleSearch])
+    handleSearch([...DefaultPersonas, ...personas], searchText)
+  }, [searchText, DefaultPersonas, personas, handleSearch])
 
   return openPersonaPanel ? (
     <Flex
diff --git a/app/layout.tsx b/app/layout.tsx
index b898be2c..688d8e33 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -22,7 +22,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className="light" style={{ colorScheme: 'light' }}>
+    <html lang="en" suppressHydrationWarning>
       <body>
         <ThemesProvider>
           <Header />
diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index dbdb09c0..1e0c42e9 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -9,7 +9,7 @@ import {
   useRef,
   useState
 } from 'react'
-import { Flex, Heading, IconButton, ScrollArea, Tooltip } from '@radix-ui/themes'
+import { Flex, Heading, IconButton, ScrollArea, Tooltip, Button } from '@radix-ui/themes'
 import ContentEditable from 'react-contenteditable'
 import { AiOutlineClear, AiOutlineLoading3Quarters, AiOutlineUnorderedList } from 'react-icons/ai'
 import { FiSend } from 'react-icons/fi'
@@ -205,32 +205,23 @@ const Chat = (props: ChatProps, ref: any) => {
   return (
     <Flex direction="column" height="100%" className="relative" gap="3">
       <Flex
-        justify="between"
+        justify="center"
         align="center"
         py="3"
         px="4"
-        style={{ backgroundColor: 'var(--gray-a2)' }}
+        style={{
+          backgroundColor: 'var(--gray-a2)',
+          borderBottom: '1px solid var(--gray-a4)',
+          position: 'relative'
+        }}
       >
-        <Heading size="4">{currentChatRef?.current?.persona?.name || 'No Persona'}</Heading>
-        <Flex gap="2" align="center">
-          <Tooltip content="Clear History">
-            <IconButton
-              variant="soft"
-              color="gray"
-              size="2"
-              className="rounded-xl cursor-pointer"
-              disabled={isLoading}
-              onClick={clearMessages}
-            >
-              <AiOutlineClear className="size-5" />
-            </IconButton>
-          </Tooltip>
+        <Flex gap="2" align="center" className="absolute left-4 top-1/2 -translate-y-1/2 md:hidden">
           <Tooltip content="Toggle Sidebar">
             <IconButton
               variant="soft"
               color="gray"
               size="2"
-              className="rounded-lg md:hidden cursor-pointer"
+              className="rounded-lg cursor-pointer"
               disabled={isLoading}
               onClick={onToggleSidebar}
             >
@@ -238,6 +229,19 @@ const Chat = (props: ChatProps, ref: any) => {
             </IconButton>
           </Tooltip>
         </Flex>
+        <Flex align="center" width="100%" justify="center" gap="1">
+          <Heading
+            size="4"
+            style={{
+              flex: 'none',
+              textAlign: 'center',
+              fontWeight: 600,
+              letterSpacing: 0.5
+            }}
+          >
+            {currentChatRef?.current?.persona?.name || 'No Persona'}
+          </Heading>
+        </Flex>
       </Flex>
       <ScrollArea
         className="flex-1 px-4"
@@ -252,6 +256,23 @@ const Chat = (props: ChatProps, ref: any) => {
         <div ref={bottomOfChatRef}></div>
       </ScrollArea>
       <div className="px-4 pb-3">
+        {conversation.current.length > 0 && (
+          <Flex justify="start" mb="2">
+            <Button
+              variant="soft"
+              color="gray"
+              size="2"
+              className="rounded-xl cursor-pointer"
+              disabled={isLoading}
+              onClick={clearMessages}
+              tabIndex={0}
+              style={{ gap: 8, display: 'flex', alignItems: 'center' }}
+            >
+              <AiOutlineClear className="size-5" />
+              Clear Chat History
+            </Button>
+          </Flex>
+        )}
         <Flex align="end" justify="between" gap="3" className="relative">
           <div className="rt-TextAreaRoot rt-r-size-1 rt-variant-surface flex-1 rounded-3xl chat-textarea">
             <ContentEditable
@@ -287,7 +308,7 @@ const Chat = (props: ChatProps, ref: any) => {
             )}
             <Tooltip content="Send Message">
               <IconButton
-                variant="surface"
+                variant="soft"
                 disabled={isLoading}
                 color="gray"
                 size="2"
diff --git a/components/Chat/ChatSideBar.tsx b/components/Chat/ChatSideBar.tsx
index 653bb6ba..9d0c8e00 100644
--- a/components/Chat/ChatSideBar.tsx
+++ b/components/Chat/ChatSideBar.tsx
@@ -1,11 +1,10 @@
 'use client'
 
 import React, { useContext } from 'react'
-import { Box, Flex, IconButton, ScrollArea, Text } from '@radix-ui/themes'
+import { Avatar, Box, Flex, IconButton, ScrollArea, Text } from '@radix-ui/themes'
 import clsx from 'clsx'
 import { AiOutlineCloseCircle } from 'react-icons/ai'
-import { BiMessageDetail } from 'react-icons/bi'
-import { FiPlus } from 'react-icons/fi'
+import { BiEdit, BiMessageDetail } from 'react-icons/bi'
 import { RiRobot2Line } from 'react-icons/ri'
 import ChatContext from './chatContext'
 
@@ -20,7 +19,8 @@ export const ChatSideBar = () => {
     onDeleteChat,
     onChangeChat,
     onCreateChat,
-    onOpenPersonaPanel
+    onOpenPersonaPanel,
+    onToggleSidebar
   } = useContext(ChatContext)
 
   return (
@@ -28,10 +28,13 @@ export const ChatSideBar = () => {
       <Flex className="p-2 h-full overflow-hidden w-64" direction="column" gap="3">
         <Box
           width="auto"
-          onClick={() => onCreateChat?.(DefaultPersonas[0])}
+          onClick={() => {
+            onCreateChat?.(DefaultPersonas[0])
+            onToggleSidebar?.()
+          }}
           className="bg-token-surface-primary active:scale-95 cursor-pointer"
         >
-          <FiPlus className="size-4" />
+          <Avatar fallback={<BiEdit className="size-6" />} />
           <Text>New Chat</Text>
         </Box>
         <ScrollArea className="flex-1 " style={{ width: '100%' }} type="auto">
@@ -43,7 +46,10 @@ export const ChatSideBar = () => {
                 className={clsx('bg-token-surface active:scale-95 truncate cursor-pointer', {
                   active: currentChatRef?.current?.id === chat.id
                 })}
-                onClick={() => onChangeChat?.(chat)}
+                onClick={() => {
+                  onChangeChat?.(chat)
+                  onToggleSidebar?.()
+                }}
               >
                 <Flex gap="2" align="center" className="overflow-hidden whitespace-nowrap">
                   <BiMessageDetail className="size-4" />
diff --git a/components/Chat/Message.tsx b/components/Chat/Message.tsx
index 51f8f759..875ae76a 100644
--- a/components/Chat/Message.tsx
+++ b/components/Chat/Message.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useState } from 'react'
-import { Avatar, Flex, IconButton, Tooltip } from '@radix-ui/themes'
+import { Avatar, Flex, Tooltip, Text, Button } from '@radix-ui/themes'
 import { FaRegCopy } from 'react-icons/fa6'
 import { HiUser } from 'react-icons/hi'
 import { RiRobot2Line } from 'react-icons/ri'
@@ -18,18 +18,15 @@ const Message = (props: MessageProps) => {
   const { role, content } = props.message
   const isUser = role === 'user'
   const copy = useCopyToClipboard()
-  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false)
-  const [tooltipText, setTooltipText] = useState<string>('Copy response')
+  const [copied, setCopied] = useState<boolean>(false)
 
   const onCopy = useCallback(() => {
     copy(content, (isSuccess) => {
       if (isSuccess) {
-        setTooltipText('Copied!')
-        setTooltipOpen(true)
+        setCopied(true)
         setTimeout(() => {
-          setTooltipText('Copy response')
-          setTooltipOpen(false)
-        }, 1000)
+          setCopied(false)
+        }, 1500)
       }
     })
   }, [content, copy])
@@ -45,10 +42,9 @@ const Message = (props: MessageProps) => {
       <div className="flex-1 pt-1 break-all">
         {isUser ? (
           <div
-            className="userMessage"
             dangerouslySetInnerHTML={{
               __html: sanitizeHtml(content, {
-                allowedTags: ['br', 'img', 'table', 'thead', 'tbody', 'tr', 'td', 'th'],
+                allowedTags: ['br', 'img', 'table', 'thead', 'tbody', 'tr', 'td', 'th', 'div'],
                 allowedAttributes: {
                   img: ['src', 'alt'],
                   '*': ['class']
@@ -59,28 +55,21 @@ const Message = (props: MessageProps) => {
         ) : (
           <Flex direction="column" gap="4">
             <Markdown>{content}</Markdown>
-            <Flex gap="4" align="center">
-              <Tooltip
-                open={tooltipOpen}
-                content={tooltipText}
-                onOpenChange={setTooltipOpen}
-                delayDuration={200}
-              >
-                <IconButton
-                  className="cursor-pointer"
-                  variant="outline"
-                  color="gray"
+            <Flex gap="2" align="center" className="copy-btn-group">
+              <Tooltip content={copied ? 'Copied!' : 'Copy to clipboard'} delayDuration={200}>
+                <Button
+                  variant="soft"
+                  color={copied ? 'green' : 'gray'}
+                  size="2"
+                  className="rounded-xl cursor-pointer"
+                  disabled={copied}
                   onClick={onCopy}
-                  onMouseEnter={() => {
-                    setTooltipText('Copy response')
-                    setTooltipOpen(true)
-                  }}
-                  onMouseLeave={() => {
-                    setTooltipOpen(false)
-                  }}
+                  tabIndex={0}
+                  style={{ gap: 8, display: 'flex', alignItems: 'center' }}
                 >
-                  <FaRegCopy />
-                </IconButton>
+                  <FaRegCopy className="size-5" />
+                  {copied ? 'Copied' : 'Copy'}
+                </Button>
               </Tooltip>
             </Flex>
           </Flex>
diff --git a/components/Chat/chatContext.ts b/components/Chat/chatContext.ts
index 1697a991..6ce0e61c 100644
--- a/components/Chat/chatContext.ts
+++ b/components/Chat/chatContext.ts
@@ -5,7 +5,6 @@ import { Chat, ChatMessage, Persona } from './interface'
 
 const ChatContext = createContext<{
   debug?: boolean
-  personaPanelType: string
   DefaultPersonas: Persona[]
   currentChatRef?: MutableRefObject<Chat | undefined>
   chatList: Chat[]
@@ -18,7 +17,7 @@ const ChatContext = createContext<{
   onOpenPersonaModal?: () => void
   onClosePersonaModal?: () => void
   setCurrentChat?: (chat: Chat) => void
-  onCreatePersona?: (persona: Persona) => void
+  onCreateOrUpdatePersona?: (persona: Persona) => void
   onDeleteChat?: (chat: Chat) => void
   onDeletePersona?: (persona: Persona) => void
   onEditPersona?: (persona: Persona) => void
@@ -30,7 +29,6 @@ const ChatContext = createContext<{
   onToggleSidebar?: () => void
   forceUpdate?: () => void
 }>({
-  personaPanelType: 'chat',
   DefaultPersonas: [],
   chatList: [],
   personas: []
diff --git a/components/Chat/index.scss b/components/Chat/index.scss
index 86ed6e92..7fe25022 100644
--- a/components/Chat/index.scss
+++ b/components/Chat/index.scss
@@ -2,6 +2,7 @@
   .rt-TextAreaInput {
     height: 50px;
     @apply py-3 px-4 pr-24;
+    outline: none;
     img {
       @apply max-w-md max-md:max-w-full;
     }
@@ -54,13 +55,3 @@
     background-color: var(--accent-a3);
   }
 }
-
-.userMessage {
-  table {
-    @apply border-collapse border  border-slate-400;
-    th,
-    td {
-      @apply border  border-slate-300;
-    }
-  }
-}
diff --git a/components/Chat/useChatHook.ts b/components/Chat/useChatHook.ts
index 6977df43..1d04b1fd 100644
--- a/components/Chat/useChatHook.ts
+++ b/components/Chat/useChatHook.ts
@@ -1,9 +1,6 @@
 'use client'
 
 import { useCallback, useEffect, useReducer, useRef, useState } from 'react'
-import axios from 'axios'
-import { useSearchParams } from 'next/navigation'
-import { toast } from 'sonner'
 import { v4 as uuid } from 'uuid'
 import { ChatGPInstance } from './Chat'
 import { Chat, ChatMessage, Persona } from './interface'
@@ -31,54 +28,21 @@ enum StorageKeys {
   Chat_Current_ID = 'chatCurrentID'
 }
 
-const uploadFiles = async (files: File[]) => {
-  const formData = new FormData()
-
-  files.forEach((file) => {
-    formData.append('files', file)
-  })
-  const { data } = await axios<any>({
-    method: 'POST',
-    url: '/api/document/upload',
-    data: formData,
-    timeout: 1000 * 60 * 5
-  })
-  return data
-}
-
 let isInit = false
 
 const useChatHook = () => {
-  const searchParams = useSearchParams()
-
-  const debug = searchParams.get('debug') === 'true'
-
   const [_, forceUpdate] = useReducer((x: number) => x + 1, 0)
-
   const messagesMap = useRef<Map<string, ChatMessage[]>>(new Map<string, ChatMessage[]>())
-
   const chatRef = useRef<ChatGPInstance>(null)
-
   const currentChatRef = useRef<Chat | undefined>(undefined)
-
   const [chatList, setChatList] = useState<Chat[]>([])
-
   const [personas, setPersonas] = useState<Persona[]>([])
-
   const [editPersona, setEditPersona] = useState<Persona | undefined>()
-
   const [isOpenPersonaModal, setIsOpenPersonaModal] = useState<boolean>(false)
-
-  const [personaModalLoading, setPersonaModalLoading] = useState<boolean>(false)
-
   const [openPersonaPanel, setOpenPersonaPanel] = useState<boolean>(false)
-
-  const [personaPanelType, setPersonaPanelType] = useState<string>('')
-
   const [toggleSidebar, setToggleSidebar] = useState<boolean>(false)
 
-  const onOpenPersonaPanel = (type: string = 'chat') => {
-    setPersonaPanelType(type)
+  const onOpenPersonaPanel = () => {
     setOpenPersonaPanel(true)
   }
 
@@ -100,7 +64,9 @@ const useChatHook = () => {
     const newMessages = messagesMap.current.get(chat.id) || []
     chatRef.current?.setConversation(newMessages)
     chatRef.current?.focus()
-    messagesMap.current.set(currentChatRef.current?.id!, oldMessages)
+    if (currentChatRef.current?.id) {
+      messagesMap.current.set(currentChatRef.current?.id, oldMessages)
+    }
     currentChatRef.current = chat
     forceUpdate()
   }, [])
@@ -112,11 +78,7 @@ const useChatHook = () => {
         id,
         persona: persona
       }
-
-      setChatList((state) => {
-        return [...state, newChat]
-      })
-
+      setChatList((state) => [...state, newChat])
       onChangeChat(newChat)
       onClosePersonaPanel()
     },
@@ -127,66 +89,56 @@ const useChatHook = () => {
     setToggleSidebar((state) => !state)
   }, [])
 
-  const onDeleteChat = (chat: Chat) => {
-    const index = chatList.findIndex((item) => item.id === chat.id)
-    chatList.splice(index, 1)
-    setChatList([...chatList])
-    localStorage.removeItem(`ms_${chat.id}`)
-    if (currentChatRef.current?.id === chat.id) {
-      currentChatRef.current = chatList[0]
-    }
-    if (chatList.length === 0) {
-      onOpenPersonaPanel('chat')
-    }
-  }
-
-  const onCreatePersona = async (values: any) => {
-    const { type, name, prompt, files } = values
-    const persona: Persona = {
-      id: uuid(),
-      role: 'system',
-      name,
-      prompt,
-      key: ''
-    }
+  const onDeleteChat = useCallback(
+    (chat: Chat) => {
+      setChatList((prevList) => {
+        const newList = prevList.filter((item) => item.id !== chat.id)
+        localStorage.removeItem(`ms_${chat.id}`)
+        messagesMap.current.delete(chat.id)
+        if (currentChatRef.current?.id === chat.id) {
+          if (newList.length > 0) {
+            currentChatRef.current = newList[0]
+            const newMessages = messagesMap.current.get(newList[0].id) || []
+            chatRef.current?.setConversation(newMessages)
+            chatRef.current?.focus()
+          } else {
+            currentChatRef.current = undefined
+            onOpenPersonaPanel()
+          }
+        }
+        return newList
+      })
+    },
+    [onOpenPersonaPanel]
+  )
 
-    if (type === 'document') {
-      try {
-        setPersonaModalLoading(true)
-        const data = await uploadFiles(files)
-        persona.key = data.key
-      } catch (e) {
-        console.log(e)
-        toast.error('Error uploading files')
-      } finally {
-        setPersonaModalLoading(false)
+  const onCreateOrUpdatePersona = (values: any) => {
+    const { name, prompt } = values
+    if (editPersona) {
+      setPersonas((state) =>
+        state.map((item) => (item.id === editPersona.id ? { ...item, name, prompt } : item))
+      )
+    } else {
+      // Create new persona
+      const persona: Persona = {
+        id: uuid(),
+        role: 'system',
+        name,
+        prompt,
+        key: ''
       }
+      setPersonas((state) => [...state, persona])
     }
-
-    setPersonas((state) => {
-      const index = state.findIndex((item) => item.id === editPersona?.id)
-      if (index === -1) {
-        state.push(persona)
-      } else {
-        state.splice(index, 1, persona)
-      }
-      return [...state]
-    })
-
     onClosePersonaModal()
   }
 
-  const onEditPersona = async (persona: Persona) => {
+  const onEditPersona = (persona: Persona) => {
     setEditPersona(persona)
     onOpenPersonaModal()
   }
 
   const onDeletePersona = (persona: Persona) => {
-    setPersonas((state) => {
-      const index = state.findIndex((item) => item.id === persona.id)
-      state.splice(index, 1)
-      return [...state]
-    })
+    setPersonas((state) => state.filter((item) => item.id !== persona.id))
   }
 
   const saveMessages = (messages: ChatMessage[]) => {
@@ -225,7 +177,7 @@ const useChatHook = () => {
     if (currentChatRef.current?.id) {
       localStorage.setItem(StorageKeys.Chat_Current_ID, currentChatRef.current.id)
     }
-  }, [currentChatRef.current?.id])
+  }, [chatList, currentChatRef.current?.id])
 
   useEffect(() => {
     localStorage.setItem(StorageKeys.Chat_List, JSON.stringify(chatList))
@@ -254,7 +206,6 @@ const useChatHook = () => {
   }, [chatList, openPersonaPanel, onCreateChat])
 
   return {
-    debug,
     DefaultPersonas,
     chatRef,
     currentChatRef,
@@ -262,16 +213,14 @@ const useChatHook = () => {
     personas,
     editPersona,
     isOpenPersonaModal,
-    personaModalLoading,
     openPersonaPanel,
-    personaPanelType,
     toggleSidebar,
     onOpenPersonaModal,
     onClosePersonaModal,
     onCreateChat,
     onDeleteChat,
     onChangeChat,
-    onCreatePersona,
+    onCreateOrUpdatePersona,
     onDeletePersona,
     onEditPersona,
     saveMessages,
diff --git a/components/Markdown/Markdown.tsx b/components/Markdown/Markdown.tsx
index c1b19710..f6659cfc 100644
--- a/components/Markdown/Markdown.tsx
+++ b/components/Markdown/Markdown.tsx
@@ -1,9 +1,8 @@
 'use client'
 
 import { ClassAttributes, Fragment, HTMLAttributes, useCallback, useState } from 'react'
-import { IconButton, Tooltip } from '@radix-ui/themes'
 import clsx from 'clsx'
-import { FaRegCopy } from 'react-icons/fa6'
+import { FaRegCopy, FaCheck } from 'react-icons/fa6'
 import ReactMarkdown, { ExtraProps } from 'react-markdown'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
@@ -16,8 +15,6 @@ import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
 import { useCopyToClipboard } from '@/hooks/useCopyToClipboard'
 
-import './index.scss'
-
 export interface MarkdownProps {
   className?: string
   children: string
@@ -29,36 +26,56 @@ const HighlightCode = (
   const { children, className, ref, ...rest } = props
   const match = /language-(\w+)/.exec(className || '')
   const copy = useCopyToClipboard()
-  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false)
+  const [copied, setCopied] = useState<boolean>(false)
 
   const code = match ? String(children).replace(/\n$/, '') : ''
 
   const onCopy = useCallback(() => {
     copy(code, (isSuccess) => {
       if (isSuccess) {
-        setTooltipOpen(true)
+        setCopied(true)
+        setTimeout(() => {
+          setCopied(false)
+        }, 1500)
       }
     })
   }, [code, copy])
 
   return match ? (
     <Fragment>
-      <Tooltip open={tooltipOpen} content="Copied!">
-        <IconButton
-          className="absolute right-4 top-4 cursor-pointer"
-          variant="solid"
-          onClick={onCopy}
-          onMouseLeave={() => setTooltipOpen(false)}
-        >
-          <FaRegCopy />
-        </IconButton>
-      </Tooltip>
+      <button
+        type="button"
+        aria-label={copied ? 'Copied!' : 'Copy to clipboard'}
+        onClick={onCopy}
+        className={clsx(
+          'absolute right-3 top-3 z-10',
+          'rounded-md bg-gray-700 text-white p-2',
+          'hover:bg-gray-600 transition-colors',
+          'focus:outline-none focus:ring-2 focus:ring-blue-500',
+          'flex items-center justify-center'
+        )}
+        tabIndex={0}
+        title={copied ? 'Copied!' : 'Copy to clipboard'}
+      >
+        {copied ? (
+          <FaCheck className="w-4 h-4 text-green-400" />
+        ) : (
+          <FaRegCopy className="w-4 h-4" />
+        )}
+      </button>
       <SyntaxHighlighter {...rest} style={vscDarkPlus} language={match[1]} PreTag="div">
         {code}
       </SyntaxHighlighter>
     </Fragment>
   ) : (
-    <code ref={ref} {...rest} className={clsx('highlight', className)}>
+    <code
+      ref={ref}
+      {...rest}
+      className={clsx(
+        'px-1 py-0.5 rounded bg-gray-100 dark:bg-gray-800/60 font-mono text-sm',
+        className
+      )}
+    >
       {children}
     </code>
   )
@@ -66,13 +83,79 @@ const HighlightCode = (
 
 export const Markdown = ({ className, children }: MarkdownProps) => {
   return (
-    <div className={clsx('prose dark:prose-invert max-w-none', className)}>
+    <div
+      className={clsx(
+        'prose dark:prose-invert max-w-none break-normal',
+        '[&_.katex]{font-size:1em;}',
+        'prose-img:max-w-[48rem] lg:prose-img:max-w-full',
+        className
+      )}
+    >
+      <style jsx global>{`
+        .prose p {
+          margin-top: 0.3em;
+          margin-bottom: 0.3em;
+        }
+        .prose h1,
+        .prose h2,
+        .prose h3,
+        .prose h4,
+        .prose h5,
+        .prose h6 {
+          margin-top: 0.5em;
+          margin-bottom: 0.5em;
+        }
+        .prose ul,
+        .prose ol {
+          margin-top: 0.5em;
+          margin-bottom: 0.5em;
+        }
+        .prose blockquote {
+          margin-top: 0.5em;
+          margin-bottom: 0.5em;
+        }
+        .prose hr {
+          margin-top: 0.5em;
+          margin-bottom: 0.5em;
+        }
+        .prose pre {
+          margin: 0.5em 0 !important;
+          position: relative;
+          background-color: #1e1e1e !important;
+          overflow-x: auto;
+        }
+        .prose pre code {
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+          white-space: pre-wrap !important;
+          overflow-wrap: anywhere !important;
+          background: transparent !important;
+        }
+        @media (prefers-color-scheme: light) {
+          .prose pre {
+            background-color: #f6f8fa !important;
+          }
+        }
+        .prose table {
+          margin-top: 0.5em;
+          margin-bottom: 0.5em;
+        }
+        .prose pre code span.token.table-header-row,
+        .prose pre code span.token.table-line,
+        .prose pre code span.token.table-data-rows {
+          display: initial !important;
+        }
+      `}</style>
       <ReactMarkdown
         remarkPlugins={[remarkParse, remarkMath, remarkRehype, remarkGfm]}
         rehypePlugins={[rehypeRaw, rehypeKatex, rehypeStringify]}
         components={{
           code(props) {
             return <HighlightCode {...props} />
+          },
+          pre({ node, children, ...props }) {
+            return <pre {...props}>{children}</pre>
           }
         }}
       >
diff --git a/components/Markdown/index.scss b/components/Markdown/index.scss
deleted file mode 100644
index 4cc2134e..00000000
--- a/components/Markdown/index.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.prose {
-  img {
-    @apply max-w-3xl max-lg:max-w-full;
-  }
-
-  :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
-    position: relative;
-    background-color: rgb(30, 30, 30) !important;
-  }
-
-  :where(pre code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
-    @apply whitespace-pre-wrap #{!important};
-  }
-
-  :where(code[class~='highlight']) {
-    background-color: var(--accent-a5);
-  }
-}
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 3df467bb..93dda12c 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -44,9 +44,7 @@ const eslintConfig = [
       '@typescript-eslint/no-empty-object-type': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
-      'react-hooks/exhaustive-deps': 'off',
-      'tailwindcss/no-custom-classname': 'off',
-      'tailwindcss/classnames-order': 'off'
+      'react-hooks/exhaustive-deps': 'off'
     }
   }
 ]
diff --git a/package.json b/package.json
index d3a255fd..45e9a19f 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,8 @@
     "@radix-ui/themes": "^3.2.1",
     "@vercel/analytics": "^1.5.0",
     "axios": "^1.9.0",
-    "clipboard": "^2.0.11",
     "clsx": "^2.1.1",
+    "clipboard": "^2.0.11",
     "delay": "^6.0.0",
     "eventsource-parser": "^2.0.0",
     "lodash-es": "^4.17.21",
diff --git a/styles/globals.scss b/styles/globals.scss
index 23bc997b..4c708f2a 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -37,24 +37,6 @@ body {
   @apply flex flex-col;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
 @keyframes slideIn {
   from {
     transform: translateX(calc(100% + 25px));