feat: optimize preview

nicepkg · Dec 6, 2024 · 0053311 · 0053311
1 parent 207e2aa
commit 0053311
Show file tree

Hide file tree

Showing 30 changed files with 512 additions and 332 deletions.
diff --git a/src/shared/plugins/doc-plugin/client/doc-client-plugin.tsx b/src/shared/plugins/doc-plugin/client/doc-client-plugin.tsx
@@ -1,4 +1,4 @@
-import { IdCardIcon } from '@radix-ui/react-icons'
+import { GearIcon, IdCardIcon } from '@radix-ui/react-icons'
 import type {
   ClientPlugin,
   ClientPluginContext
@@ -44,8 +44,6 @@ export class DocClientPlugin implements ClientPlugin<DocPluginState> {
   }
 
   private async getMentionOptions(): Promise<MentionOption[]> {
-    if (!this.context) return []
-
     const queryClient = this?.context?.getQueryClient?.()
 
     if (!queryClient) return []
@@ -55,19 +53,30 @@ export class DocClientPlugin implements ClientPlugin<DocPluginState> {
       queryFn: () => api.doc.getDocSites({})
     })
 
+    const docSiteNamesSettingMentionOption: MentionOption<string> = {
+      id: `${PluginId.Doc}#doc#setting`,
+      type: `${PluginId.Doc}#doc`,
+      label: 'docs setting',
+      disableAddToEditor: true,
+      onSelect: data => {
+        console.log('onSelect', data)
+      },
+      searchKeywords: ['setting', 'docsetting'],
+      itemLayoutProps: {
+        icon: <GearIcon className="size-4 mr-1" />,
+        label: 'docs setting',
+        details: ''
+      }
+    }
+
     const docSiteNamesMentionOptions: MentionOption[] = docSites.map(
       site =>
         ({
           id: `${PluginId.Doc}#doc#${site.id}`,
           type: `${PluginId.Doc}#doc`,
           label: site.name,
           data: site.name,
-          onAddOne: data => {
-            this.context?.setState(draft => {
-              draft.allowSearchDocSiteNamesFromEditor.push(data)
-            })
-          },
-          onReplaceAll: dataArr => {
+          onUpdatePluginState: dataArr => {
             this.context?.setState(draft => {
               draft.allowSearchDocSiteNamesFromEditor = dataArr
             })
@@ -93,7 +102,10 @@ export class DocClientPlugin implements ClientPlugin<DocPluginState> {
           icon: <IdCardIcon className="size-4 mr-1" />,
           label: 'Docs'
         },
-        children: docSiteNamesMentionOptions
+        children: [
+          docSiteNamesSettingMentionOption,
+          ...docSiteNamesMentionOptions
+        ]
       }
     ]
   }

diff --git a/src/shared/plugins/doc-plugin/client/doc-log-preview.tsx b/src/shared/plugins/doc-plugin/client/doc-log-preview.tsx
@@ -2,9 +2,9 @@ import { FC } from 'react'
 import { FileTextIcon } from '@radix-ui/react-icons'
 import type { ConversationLog } from '@shared/entities'
 import { PluginId } from '@shared/plugins/base/types'
-import type { PreviewContent } from '@webview/components/chat/editor/content-preview'
-import { ContentPreviewPopover } from '@webview/components/chat/editor/content-preview-popover'
 import { ChatLogPreview } from '@webview/components/chat/messages/roles/chat-log-preview'
+import type { PreviewContent } from '@webview/components/content-preview'
+import { ContentPreviewPopover } from '@webview/components/content-preview-popover'
 import { api } from '@webview/services/api-client'
 import { cn } from '@webview/utils/common'
 

diff --git a/src/shared/plugins/fs-plugin/client/fs-client-plugin.tsx b/src/shared/plugins/fs-plugin/client/fs-client-plugin.tsx
@@ -115,8 +115,6 @@ export class FsClientPlugin implements ClientPlugin<FsPluginState> {
   }
 
   private async getMentionOptions(): Promise<MentionOption[]> {
-    if (!this.context) return []
-
     const queryClient = this?.context?.getQueryClient?.()
 
     if (!queryClient) return []
@@ -149,12 +147,7 @@ export class FsClientPlugin implements ClientPlugin<FsPluginState> {
         type: `${PluginId.Fs}#file`,
         label,
         data: file,
-        onAddOne: data => {
-          this.context?.setState(draft => {
-            draft.selectedFilesFromEditor.push(data)
-          })
-        },
-        onReplaceAll: dataArr => {
+        onUpdatePluginState: dataArr => {
           this.context?.setState(draft => {
             draft.selectedFilesFromEditor = dataArr
           })
@@ -181,12 +174,7 @@ export class FsClientPlugin implements ClientPlugin<FsPluginState> {
         type: `${PluginId.Fs}#folder`,
         label,
         data: folder,
-        onAddOne: data => {
-          this.context?.setState(draft => {
-            draft.selectedFoldersFromEditor.push(data)
-          })
-        },
-        onReplaceAll: dataArr => {
+        onUpdatePluginState: dataArr => {
           this.context?.setState(draft => {
             draft.selectedFoldersFromEditor = dataArr
           })
@@ -221,12 +209,7 @@ export class FsClientPlugin implements ClientPlugin<FsPluginState> {
         type: `${PluginId.Fs}#tree`,
         label,
         data: treeInfo,
-        onAddOne: data => {
-          this.context?.setState(draft => {
-            draft.selectedTreesFromEditor.push(data)
-          })
-        },
-        onReplaceAll: dataArr => {
+        onUpdatePluginState: dataArr => {
           this.context?.setState(draft => {
             draft.selectedTreesFromEditor = dataArr
           })
@@ -295,13 +278,7 @@ export class FsClientPlugin implements ClientPlugin<FsPluginState> {
         type: `${PluginId.Fs}#codebase`,
         label: 'Codebase',
         data: true,
-        onAddOne: () => {
-          this.context?.setState(draft => {
-            draft.enableCodebaseAgent = true
-            draft.codeSnippetFromAgent = []
-          })
-        },
-        onReplaceAll: (dataArr: true[]) => {
+        onUpdatePluginState: (dataArr: true[]) => {
           this.context?.setState(draft => {
             draft.enableCodebaseAgent = dataArr.length > 0
             draft.codeSnippetFromAgent = []
@@ -319,12 +296,7 @@ export class FsClientPlugin implements ClientPlugin<FsPluginState> {
         type: `${PluginId.Fs}#errors`,
         label: 'Errors',
         data: editorErrors,
-        onAddOne: data => {
-          this.context?.setState(draft => {
-            draft.editorErrors = data
-          })
-        },
-        onReplaceAll: dataArr => {
+        onUpdatePluginState: dataArr => {
           this.context?.setState(draft => {
             draft.editorErrors = dataArr?.[0] ?? []
           })

diff --git a/src/shared/plugins/fs-plugin/client/mention-file-preview.tsx b/src/shared/plugins/fs-plugin/client/mention-file-preview.tsx
@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from '@radix-ui/react-icons'
-import { ContentPreview } from '@webview/components/chat/editor/content-preview'
+import { ContentPreview } from '@webview/components/content-preview'
 import { FileIcon } from '@webview/components/file-icon'
 import { Tree, type TreeNodeRenderProps } from '@webview/components/tree'
 import { useFilesTreeItems } from '@webview/hooks/chat/use-files-tree-items'

diff --git a/src/shared/plugins/git-plugin/client/git-client-plugin.tsx b/src/shared/plugins/git-plugin/client/git-client-plugin.tsx
@@ -40,8 +40,6 @@ export class GitClientPlugin implements ClientPlugin<GitPluginState> {
   }
 
   private async getMentionOptions(): Promise<MentionOption[]> {
-    if (!this.context) return []
-
     const queryClient = this?.context?.getQueryClient?.()
 
     if (!queryClient) return []
@@ -61,12 +59,7 @@ export class GitClientPlugin implements ClientPlugin<GitPluginState> {
           type: `${PluginId.Git}#git-commit`,
           label: commit.message,
           data: commit,
-          onAddOne: data => {
-            this.context?.setState(draft => {
-              draft.gitCommitsFromEditor.push(data)
-            })
-          },
-          onReplaceAll: dataArr => {
+          onUpdatePluginState: dataArr => {
             this.context?.setState(draft => {
               draft.gitCommitsFromEditor = dataArr
             })
@@ -97,13 +90,7 @@ export class GitClientPlugin implements ClientPlugin<GitPluginState> {
             id: `${PluginId.Git}#git-diff`,
             type: `${PluginId.Git}#git-diff`,
             label: 'Diff (Diff of Working State)',
-            // TODO: add data
-            onAddOne: data => {
-              this.context?.setState(draft => {
-                draft.gitDiffOfWorkingStateFromEditor = data
-              })
-            },
-            onReplaceAll: dataArr => {
+            onUpdatePluginState: dataArr => {
               this.context?.setState(draft => {
                 draft.gitDiffOfWorkingStateFromEditor = dataArr.at(-1)
               })
@@ -118,13 +105,7 @@ export class GitClientPlugin implements ClientPlugin<GitPluginState> {
             id: `${PluginId.Git}#git-pr`,
             type: `${PluginId.Git}#git-pr`,
             label: 'PR (Diff with Main Branch)',
-            // TODO: add data
-            onAddOne: data => {
-              this.context?.setState(draft => {
-                draft.gitDiffWithMainBranchFromEditor = data
-              })
-            },
-            onReplaceAll: dataArr => {
+            onUpdatePluginState: dataArr => {
               this.context?.setState(draft => {
                 draft.gitDiffWithMainBranchFromEditor = dataArr.at(-1)
               })

diff --git a/src/shared/plugins/terminal-plugin/client/terminal-client-plugin.tsx b/src/shared/plugins/terminal-plugin/client/terminal-client-plugin.tsx
@@ -58,12 +58,7 @@ export class TerminalClientPlugin implements ClientPlugin<TerminalPluginState> {
       type: `${PluginId.Terminal}#terminal`,
       label: terminal.name,
       data: terminal,
-      onAddOne: data => {
-        this.context?.setState(draft => {
-          draft.selectedTerminalsFromEditor.push(data)
-        })
-      },
-      onReplaceAll: dataArr => {
+      onUpdatePluginState: dataArr => {
         this.context?.setState(draft => {
           draft.selectedTerminalsFromEditor = dataArr
         })

diff --git a/src/shared/plugins/web-plugin/client/web-client-plugin.tsx b/src/shared/plugins/web-plugin/client/web-client-plugin.tsx
@@ -45,21 +45,17 @@ export class WebClientPlugin implements ClientPlugin<WebPluginState> {
   }
 
   private async getMentionOptions(): Promise<MentionOption[]> {
-    if (!this.context) return []
+    const queryClient = this?.context?.getQueryClient?.()
+
+    if (!queryClient) return []
 
     return [
       {
         id: `${PluginId.Web}#web`,
         type: `${PluginId.Web}#web`,
         label: 'Web',
         data: true,
-        onAddOne: () => {
-          this.context?.setState(draft => {
-            draft.enableWebVisitAgent = true
-            draft.enableWebSearchAgent = true
-          })
-        },
-        onReplaceAll: (dataArr: true[]) => {
+        onUpdatePluginState: (dataArr: true[]) => {
           this.context?.setState(draft => {
             draft.enableWebVisitAgent = dataArr.length > 0
             draft.enableWebSearchAgent = dataArr.length > 0

diff --git a/src/shared/plugins/web-plugin/client/web-log-preview.tsx b/src/shared/plugins/web-plugin/client/web-log-preview.tsx
@@ -2,9 +2,9 @@ import { FC } from 'react'
 import { GlobeIcon } from '@radix-ui/react-icons'
 import type { ConversationLog } from '@shared/entities'
 import { PluginId } from '@shared/plugins/base/types'
-import type { PreviewContent } from '@webview/components/chat/editor/content-preview'
-import { ContentPreviewPopover } from '@webview/components/chat/editor/content-preview-popover'
 import { ChatLogPreview } from '@webview/components/chat/messages/roles/chat-log-preview'
+import type { PreviewContent } from '@webview/components/content-preview'
+import { ContentPreviewPopover } from '@webview/components/content-preview-popover'
 import { cn } from '@webview/utils/common'
 
 import type { WebDocInfo, WebPluginLog } from '../types'

diff --git a/src/webview/components/chat/editor/chat-input.tsx b/src/webview/components/chat/editor/chat-input.tsx
@@ -51,7 +51,7 @@ export interface ChatInputProps {
   conversation: Conversation
   setConversation: Updater<Conversation>
   sendButtonDisabled: boolean
-  onSend: (conversation: Conversation) => void
+  onSend?: (conversation: Conversation) => void
 }
 
 export interface ChatInputRef extends ChatEditorRef {
@@ -139,7 +139,7 @@ const _ChatInput: FC<ChatInputProps> = ({
 
   const getConversation = useCallbackRef(() => conversation)
   const handleSend = async () => {
-    if (sendButtonDisabled) return
+    if (sendButtonDisabled || !onSend) return
     const editorState = editorRef.current?.editor.getEditorState()
 
     if (editorState) {
@@ -238,7 +238,7 @@ const _ChatInput: FC<ChatInputProps> = ({
               editable: ![ChatInputMode.MessageReadonly].includes(mode),
               editorState: initialEditorState
             }}
-            onComplete={handleSend}
+            onComplete={onSend ? handleSend : undefined}
             onChange={handleEditorChange}
             placeholder={[
               'Type your message here...',
@@ -289,16 +289,18 @@ const _ChatInput: FC<ChatInputProps> = ({
                   showExitEditModeButton={mode === ChatInputMode.MessageEdit}
                   onExitEditMode={onExitEditMode}
                 />
-                <ButtonWithTooltip
-                  variant="outline"
-                  disabled={sendButtonDisabled}
-                  size="xs"
-                  className="ml-auto"
-                  onClick={handleSend}
-                  tooltip="You can use ⌘↩ to send message"
-                >
-                  ⌘↩ Send
-                </ButtonWithTooltip>
+                {onSend && (
+                  <ButtonWithTooltip
+                    variant="outline"
+                    disabled={sendButtonDisabled}
+                    size="xs"
+                    className="ml-auto"
+                    onClick={handleSend}
+                    tooltip="You can use ⌘↩ to send message"
+                  >
+                    ⌘↩ Send
+                  </ButtonWithTooltip>
+                )}
               </motion.div>
             )}
           </AnimatePresence>