Add tooltips to icons and buttons

blrchen · Feb 3, 2024 · 507e07b · 507e07b
1 parent 9d7c526
commit 507e07b
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 62 deletions.
diff --git a/.editorconfig b/.editorconfig
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   }
 }
diff --git a/app/chat/page.tsx b/app/chat/page.tsx
@@ -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
diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.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>

diff --git a/components/Chat/ChatSideBar.tsx b/components/Chat/ChatSideBar.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>

diff --git a/components/Markdown.tsx b/components/Markdown.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}
               >

diff --git a/components/Spin/interface.ts b/components/Spin/interface.ts
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react'
+import { CSSProperties, ReactNode } from "react";
 
 /**
  * @title Spin

diff --git a/components/Themes/useTheme.ts b/components/Themes/useTheme.ts
@@ -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
diff --git a/next.config.js b/next.config.js
@@ -15,6 +15,11 @@ const nextConfig = {
         permanent: true
       }
     ]
+  },
+  logging: {
+    fetches: {
+      fullUrl: true
+    }
   }
 }
 

diff --git a/package.json b/package.json
@@ -15,19 +15,19 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^2.0.2",
     "@vercel/analytics": "^1.1.2",
-    "axios": "^1.6.0",
-    "classnames": "^2.3.2",
+    "axios": "^1.6.5",
+    "classnames": "^2.5.1",
     "clipboard": "^2.0.11",
     "delay": "^6.0.0",
     "eventsource-parser": "^1.1.1",
     "lodash-es": "^4.17.21",
-    "next": "14.0.4",
+    "next": "14.1.0",
     "react": "^18",
     "react-contenteditable": "^3.3.7",
     "react-dom": "^18",
-    "react-hook-form": "^7.48.2",
+    "react-hook-form": "^7.49.3",
     "react-hot-toast": "^2.4.1",
-    "react-icons": "^4.11.0",
+    "react-icons": "^5.0.1",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-katex": "^7.0.0",
@@ -36,8 +36,8 @@
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.0.0",
-    "sass": "^1.69.5",
+    "remark-rehype": "^11.1.0",
+    "sass": "^1.70.0",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
@@ -48,16 +48,16 @@
     "@types/react-dom": "^18",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@types/uuid": "^9.0.7",
-    "@typescript-eslint/parser": "^6.17.0",
+    "@typescript-eslint/parser": "^6.19.0",
     "autoprefixer": "^10.4.16",
     "eslint": "^8",
-    "eslint-config-next": "^14.0.3",
+    "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",
     "postcss": "^8",
     "postcss-import": "^15.1.0",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.4",
     "tailwind-merge": "^2.2.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5"
   }