Add tooltips to icons and buttons. (#46)

Author: blrchen

.editorconfig

@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   }
 }

.vscode/settings.json

@@ -1,10 +1,10 @@
 'use client'
-
+import { Suspense } from 'react'
 import { Flex } from '@radix-ui/themes'
 import { Chat, ChatContext, ChatSideBar, PersonaPanel, useChatHook } from '@/components'
 import PersonaModal from './PersonaModal'
 
-const ChatPage = () => {
+const ChatProvider = () => {
   const provider = useChatHook()
 
   return (
@@ -21,4 +21,12 @@ const ChatPage = () => {
   )
 }
 
+const ChatPage = () => {
+  return (
+    <Suspense>
+      <ChatProvider />
+    </Suspense>
+  )
+}
+
 export default ChatPage

app/chat/page.tsx

@@ -9,7 +9,7 @@ import {
   useRef,
   useState
 } from 'react'
-import { Flex, Heading, IconButton, ScrollArea } from '@radix-ui/themes'
+import { Flex, Heading, IconButton, ScrollArea, Tooltip } from '@radix-ui/themes'
 import clipboard from 'clipboard'
 import ContentEditable from 'react-contenteditable'
 import toast from 'react-hot-toast'
@@ -267,37 +267,42 @@ const Chat = (props: ChatProps, ref: any) => {
                 <AiOutlineLoading3Quarters className="animate-spin h-4 w-4" />
               </Flex>
             )}
-            <IconButton
-              variant="soft"
-              disabled={isLoading}
-              color="gray"
-              size="2"
-              className="rounded-xl"
-              onClick={sendMessage}
-            >
-              <FiSend className="h-4 w-4" />
-            </IconButton>
-            <IconButton
-              variant="soft"
-              color="gray"
-              size="2"
-              className="rounded-xl"
-              disabled={isLoading}
-              onClick={clearMessages}
-            >
-              <AiOutlineClear className="h-4 w-4" />
-            </IconButton>
-
-            <IconButton
-              variant="soft"
-              color="gray"
-              size="2"
-              className="rounded-xl md:hidden"
-              disabled={isLoading}
-              onClick={onToggleSidebar}
-            >
-              <AiOutlineUnorderedList className="h-4 w-4" />
-            </IconButton>
+            <Tooltip content={'Send Message'}>
+              <IconButton
+                variant="soft"
+                disabled={isLoading}
+                color="gray"
+                size="2"
+                className="rounded-xl cursor-pointer"
+                onClick={sendMessage}
+              >
+                <FiSend className="h-4 w-4" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip content={'Clear Message'}>
+              <IconButton
+                variant="soft"
+                color="gray"
+                size="2"
+                className="rounded-xl cursor-pointer"
+                disabled={isLoading}
+                onClick={clearMessages}
+              >
+                <AiOutlineClear className="h-4 w-4" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip content={'Toggle Sidebar'}>
+              <IconButton
+                variant="soft"
+                color="gray"
+                size="2"
+                className="rounded-xl md:hidden cursor-pointer"
+                disabled={isLoading}
+                onClick={onToggleSidebar}
+              >
+                <AiOutlineUnorderedList className="h-4 w-4" />
+              </IconButton>
+            </Tooltip>
           </Flex>
         </Flex>
       </div>

components/Chat/Chat.tsx

@@ -29,7 +29,7 @@ export const ChatSideBar = () => {
         <Box
           width="auto"
           onClick={() => onCreateChat?.(DefaultPersonas[0])}
-          className="bg-token-surface-primary active:scale-95 "
+          className="bg-token-surface-primary active:scale-95 cursor-pointer"
         >
           <FiPlus className="h-4 w-4" />
           <Text>New Chat</Text>
@@ -40,7 +40,7 @@ export const ChatSideBar = () => {
               <Box
                 key={chat.id}
                 width="auto"
-                className={cs('bg-token-surface active:scale-95 truncate', {
+                className={cs('bg-token-surface active:scale-95 truncate cursor-pointer', {
                   active: currentChatRef?.current?.id === chat.id
                 })}
                 onClick={() => onChangeChat?.(chat)}
@@ -53,6 +53,7 @@ export const ChatSideBar = () => {
                 </Flex>
                 <IconButton
                   size="2"
+                  className="cursor-pointer"
                   variant="ghost"
                   color="gray"
                   radius="full"
@@ -70,7 +71,7 @@ export const ChatSideBar = () => {
         <Box
           width="auto"
           onClick={() => onOpenPersonaPanel?.('chat')}
-          className="bg-token-surface-primary active:scale-95 "
+          className="bg-token-surface-primary active:scale-95 cursor-pointer"
         >
           <RiRobot2Line className="h-4 w-4" />
           <Text>Persona Store</Text>

components/Chat/ChatSideBar.tsx

@@ -20,7 +20,7 @@ export interface MarkdownProps {
 export const Markdown = ({ className, children }: MarkdownProps) => {
   return (
     <ReactMarkdown
-      className="prose dark:prose-invert max-w-none"
+      className={cs('prose dark:prose-invert max-w-none', className)}
       remarkPlugins={[remarkParse, remarkMath, remarkRehype, remarkGfm]}
       rehypePlugins={[rehypeRaw, rehypeKatex, rehypeStringify]}
       components={{
@@ -30,7 +30,7 @@ export const Markdown = ({ className, children }: MarkdownProps) => {
           return match ? (
             <>
               <IconButton
-                className="absolute right-4 top-4 copy-btn"
+                className="absolute right-4 top-4 copy-btn cursor-pointer"
                 variant="solid"
                 data-clipboard-text={children}
               >

components/Markdown.tsx

@@ -2,6 +2,6 @@ import { useContext } from 'react'
 import { UseThemeProps } from './interface'
 import { ThemeContext } from './ThemeContext'
 
-const defaultContext: UseThemeProps = { setTheme: (_) => {}, themes: [] }
+const defaultContext: UseThemeProps = { setTheme: () => {}, themes: [] }
 
 export const useTheme = () => useContext(ThemeContext) ?? defaultContext

components/Themes/useTheme.ts

@@ -15,6 +15,11 @@ const nextConfig = {
         permanent: true
       }
     ]
+  },
+  logging: {
+    fetches: {
+      fullUrl: true
+    }
   }
 }