chore(ui): adjust chat sidebar bottom buttons for small screens

TabbyML · Dec 13, 2024 · 67528ff · 67528ff
1 parent c2110bc
commit 67528ff
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 36 deletions.
diff --git a/ee/tabby-ui/components/chat/chat-panel.tsx b/ee/tabby-ui/components/chat/chat-panel.tsx
@@ -1,5 +1,6 @@
 import React, { RefObject, useMemo, useState } from 'react'
 import slugify from '@sindresorhus/slugify'
+import { useWindowSize } from '@uidotdev/usehooks'
 import type { UseChatHelpers } from 'ai/react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { compact } from 'lodash-es'
@@ -29,6 +30,7 @@ import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom'
 import { PromptForm, PromptFormRef } from '@/components/chat/prompt-form'
 import { FooterText } from '@/components/footer'
 
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 import { ChatContext } from './chat'
 
 export interface ChatPanelProps
@@ -74,6 +76,9 @@ function ChatPanelRenderer(
     state => state.enableActiveSelection
   )
   const [persisting, setPerisiting] = useState(false)
+  const { width } = useWindowSize()
+  const isExtraSmallScreen = typeof width === 'number' && width < 376
+
   const slugWithThreadId = useMemo(() => {
     if (!threadId) return ''
     const content = qaPairs[0]?.user.message
@@ -135,47 +140,81 @@ function ChatPanelRenderer(
     <div className={className}>
       <ButtonScrollToBottom container={container} />
       <div className={`mx-auto md:px-4 ${chatMaxWidthClass}`}>
-        <div className="flex h-10 items-center justify-center gap-2">
+        <div
+          className={cn(
+            'flex h-10 items-center justify-center',
+            isExtraSmallScreen ? 'gap-3' : 'gap-2'
+          )}
+        >
           {isLoading ? (
-            <Button
-              variant="outline"
-              onClick={() => stop()}
-              className="bg-background"
-            >
-              <IconStop className="mr-2" />
-              Stop generating
-            </Button>
-          ) : (
-            qaPairs?.length > 0 && (
-              <>
+            <Tooltip>
+              <TooltipTrigger asChild>
                 <Button
                   variant="outline"
-                  onClick={() => reload()}
-                  className="bg-background"
+                  onClick={() => stop()}
+                  className="bg-background gap-2"
                 >
-                  <IconRefresh className="mr-2" />
-                  Regenerate
-                </Button>
-                <Button
-                  variant="outline"
-                  className="gap-2 bg-background"
-                  onClick={handleShareThread}
-                >
-                  {isCopied ? <IconCheck /> : <IconShare />}
-                  Share
+                  <IconStop />
+                  {!isExtraSmallScreen && 'Stop generating'}
                 </Button>
+              </TooltipTrigger>
+              <TooltipContent hidden={!isExtraSmallScreen}>
+                Stop generating
+              </TooltipContent>
+            </Tooltip>
+          ) : (
+            qaPairs?.length > 0 && (
+              <>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      onClick={() => reload()}
+                      className="bg-background gap-2"
+                    >
+                      <IconRefresh />
+                      {!isExtraSmallScreen && 'Regenerate'}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent hidden={!isExtraSmallScreen}>
+                    Regenerate
+                  </TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className="gap-2 bg-background"
+                      onClick={handleShareThread}
+                    >
+                      {isCopied ? <IconCheck /> : <IconShare />}
+                      {!isExtraSmallScreen && 'Share'}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent hidden={!isExtraSmallScreen}>
+                    Share
+                  </TooltipContent>
+                </Tooltip>
               </>
             )
           )}
           {qaPairs?.length > 0 && (
-            <Button
-              variant="outline"
-              onClick={onClearMessages}
-              className="bg-background"
-            >
-              <IconTrash className="mr-2" />
-              Clear
-            </Button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  onClick={onClearMessages}
+                  className="bg-background gap-2"
+                >
+                  <IconTrash />
+                  {!isExtraSmallScreen && 'Clear'}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent hidden={!isExtraSmallScreen}>
+                Clear
+              </TooltipContent>
+            </Tooltip>
           )}
         </div>
         <div className="border-t bg-background px-4 py-2 shadow-lg sm:space-y-4 sm:rounded-t-xl sm:border md:py-4">

diff --git a/ee/tabby-ui/components/ui/sidebar.tsx b/ee/tabby-ui/components/ui/sidebar.tsx
@@ -4,8 +4,8 @@ import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, VariantProps } from 'class-variance-authority'
 
+import { useIsMobile } from '@/lib/hooks/use-mobile'
 import { cn } from '@/lib/utils'
-import { useIsMobile } from '@/hooks/use-mobile'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Separator } from '@/components/ui/separator'

diff --git a/ee/tabby-ui/hooks/use-mobile.tsx → ee/tabby-ui/lib/hooks/use-mobile.tsx b/ee/tabby-ui/hooks/use-mobile.tsx → ee/tabby-ui/lib/hooks/use-mobile.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from 'react'
 
 const MOBILE_BREAKPOINT = 768
 
@@ -10,9 +10,9 @@ export function useIsMobile() {
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
     }
-    mql.addEventListener("change", onChange)
+    mql.addEventListener('change', onChange)
     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
+    return () => mql.removeEventListener('change', onChange)
   }, [])
 
   return !!isMobile