Chat: ensure ScrollDown button only takes it's width

- This way we allow interaction with interactive elements if we can see them. Previously the button parent took full width making it impossible to interact with the other elements unless scrolling
sourcegraph · Nov 17, 2024 · be19fe0 · be19fe0
1 parent 0070f3c
commit be19fe0
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 9 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -42,5 +42,11 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
+<<<<<<< Updated upstream
   "rust-analyzer.procMacro.ignored": { "napi-derive": ["napi"] }
+=======
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
+>>>>>>> Stashed changes
 }
diff --git a/vscode/webviews/components/MarkdownFromCody.tsx b/vscode/webviews/components/MarkdownFromCody.tsx
@@ -103,7 +103,6 @@ function markdownPluginProps(): Pick<
     if (_markdownPluginProps) {
         return _markdownPluginProps
     }
-
     _markdownPluginProps = {
         rehypePlugins: [
             [

diff --git a/vscode/webviews/components/ScrollDown.tsx b/vscode/webviews/components/ScrollDown.tsx
@@ -70,7 +70,7 @@ export const ScrollDown: FC<ScrollDownProps> = props => {
     }, [parentOnClick, scrollerAPI])
 
     return canScrollDown ? (
-        <div className="tw-sticky tw-bottom-0 tw-w-full tw-text-center tw-py-4">
+        <div className="tw-bottom-0 tw-left-1/2 tw-inline-block tw-sticky tw--translate-x-1/2 tw-py-4 tw-w-fit">
             <Button variant="outline" onClick={onClick} className="tw-py-3 hover:tw-bg-primary-hover">
                 <ArrowDownIcon size={16} /> Skip to end
             </Button>

diff --git a/vscode/webviews/tabs/TabsBar.tsx b/vscode/webviews/tabs/TabsBar.tsx
@@ -1,5 +1,6 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import * as Tabs from '@radix-ui/react-tabs'
+// import { chatHistory } from '../../src/chat/chat-view/ChatHistoryManager'
 
 import clsx from 'clsx'
 import {
@@ -19,15 +20,14 @@ import { getVSCodeAPI } from '../utils/VSCodeApi'
 import { View } from './types'
 
 import { CodyIDE, FeatureFlag, isDefined } from '@sourcegraph/cody-shared'
-import { type FC, Fragment, forwardRef, memo, useCallback, useMemo, useState } from 'react'
-import { Kbd } from '../components/Kbd'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../components/shadcn/ui/tooltip'
-import { useConfig } from '../utils/useConfig'
-
 import { useExtensionAPI } from '@sourcegraph/prompt-editor'
 import { isEqual } from 'lodash'
+import { type FC, Fragment, forwardRef, memo, useCallback, useMemo, useState } from 'react'
 import { downloadChatHistory } from '../chat/downloadChatHistory'
+import { Kbd } from '../components/Kbd'
 import { Button } from '../components/shadcn/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../components/shadcn/ui/tooltip'
+import { useConfig } from '../utils/useConfig'
 import { useFeatureFlag } from '../utils/useFeatureFlags'
 import styles from './TabsBar.module.css'
 import { getCreateNewChatCommand } from './utils'
@@ -356,13 +356,45 @@ function useTabs(input: Pick<TabsBarProps, 'IDE'>): TabConfig[] {
                         Icon: HistoryIcon,
                         subActions: [
                             {
-                                title: 'Export',
+                                title: 'Export David',
                                 Icon: DownloadIcon,
                                 command: 'cody.chat.history.export',
                                 callback: () => downloadChatHistory(extensionAPI),
                             },
+                            // {
+                            //     title: 'Import',
+                            //     Icon: DownloadIcon, // Or use a different icon like Upload
+                            //     command: 'cody.chat.history.import',
+                            //     callback: async () => {
+                            //         const input = document.createElement('input')
+                            //         input.type = 'file'
+                            //         input.accept = '.json'
+
+                            //         input.onchange = async e => {
+                            //             const file = (e.target as HTMLInputElement).files?.[0]
+                            //             if (file) {
+                            //                 try {
+                            //                     const text = await file.text()
+                            //                     const history = JSON.parse(text)
+                            //                     const state = getVSCodeAPI().getState() as {
+                            //                         authStatus: AuthStatus
+                            //                     }
+                            //                     await chatHistory.importChatHistory(
+                            //                         history,
+                            //                         true,
+                            //                         state.authStatus
+                            //                     )
+                            //                 } catch (error) {
+                            //                     console.error('Failed to import chat history:', error)
+                            //                 }
+                            //             }
+                            //         }
+
+                            //         input.click()
+                            //     },
+                            // },
                             {
-                                title: 'Delete all',
+                                title: 'Delete all d',
                                 Icon: Trash2Icon,
                                 command: 'cody.chat.history.clear',