feat(gpt-runner-web): optimize chat panel toolbar

2214962083 · 2214962083 · commit 18f4e3595a70 · 2023-05-31T17:21:31.000+08:00
diff --git a/packages/gpt-runner-web/client/src/components/chat-message-code-block/index.tsx b/packages/gpt-runner-web/client/src/components/chat-message-code-block/index.tsx
@@ -1,56 +1,25 @@
 import type { FC } from 'react'
-import { useCallback } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import { IconButton } from '../icon-button'
 import { CodeBlockHeader, CodeBlockWrapper } from './chat-message-code-block.styles'
 
+export interface BuildCodeToolbarState {
+  contents: string
+}
+
 export interface MessageCodeBlockProps {
   contents: string
   language: string
-  onCopyCode?: (value: string) => void
-  onInsertCode?: (value: string) => void
-  onDiffCode?: (value: string) => void
+  buildCodeToolbar?: (state: BuildCodeToolbarState) => React.ReactNode
 }
 
 export const MessageCodeBlock: FC<MessageCodeBlockProps> = (props) => {
-  const { contents, language, onCopyCode, onInsertCode, onDiffCode } = props
-
-  const handleCopyCode = useCallback(() => {
-    onCopyCode?.(contents)
-  }, [contents, onCopyCode])
-
-  const handleInsertCode = useCallback(() => {
-    onInsertCode?.(contents)
-  }, [contents, onInsertCode])
-
-  const handleDiffCode = useCallback(() => {
-    onDiffCode?.(contents)
-  }, [contents, onDiffCode])
+  const { contents, language, buildCodeToolbar } = props
 
   return (
     <CodeBlockWrapper>
       <CodeBlockHeader>
-        <IconButton
-          text='Copy'
-          iconClassName='codicon-copy'
-          onClick={handleCopyCode}
-        >
-        </IconButton>
-
-        <IconButton
-          text='Insert'
-          iconClassName='codicon-insert'
-          onClick={handleInsertCode}
-        >
-        </IconButton>
-
-        <IconButton
-          text='Diff'
-          iconClassName='codicon-arrow-swap'
-          onClick={handleDiffCode}
-        >
-        </IconButton>
+        {buildCodeToolbar?.({ contents })}
       </CodeBlockHeader>
       <SyntaxHighlighter
         useInlineStyles={true}
diff --git a/packages/gpt-runner-web/client/src/components/chat-message-item/index.tsx b/packages/gpt-runner-web/client/src/components/chat-message-item/index.tsx
@@ -1,23 +1,20 @@
 import type { FC } from 'react'
-import { useCallback } from 'react'
 import clsx from 'clsx'
 import type { SingleChatMessage } from '@nicepkg/gpt-runner-shared/common'
 import { ChatMessageStatus, ChatRole } from '@nicepkg/gpt-runner-shared/common'
 import { MessageTextView } from '../chat-message-text-view'
 import { Icon } from '../icon'
-import { IconButton } from '../icon-button'
 import { useHover } from '../../hooks/use-hover.hook'
 import type { MessageCodeBlockProps } from '../chat-message-code-block'
 import { MsgAvatarWrapper, MsgContent, MsgContentFooterWrapper, MsgContentWrapper, MsgWrapper } from './chat-message-item.styles'
 
+export interface BuildMessageToolbarState extends SingleChatMessage {
+  status: ChatMessageStatus
+}
 export interface MessageItemProps extends SingleChatMessage, Partial<MessageCodeBlockProps> {
   status: ChatMessageStatus
   showToolbar?: 'always' | 'hover' | 'never'
-  showRegenerateIcon?: boolean
-  onCopyMessage?: (value: string) => void
-  onEditMessage?: (value: string) => void
-  onRegenerateMessage?: () => void
-  onDeleteMessage?: () => void
+  buildMessageToolbar?: (state: BuildMessageToolbarState) => React.ReactNode
 }
 
 export const MessageItem: FC<MessageItemProps> = (props) => {
@@ -26,78 +23,31 @@ export const MessageItem: FC<MessageItemProps> = (props) => {
     text,
     status,
     showToolbar = 'hover',
-    showRegenerateIcon = false,
-    onCopyMessage,
-    onEditMessage,
-    onRegenerateMessage,
-    onDeleteMessage,
-    onCopyCode,
-    onDiffCode,
-    onInsertCode,
+    buildCodeToolbar,
+    buildMessageToolbar,
   } = props
 
   const [hoverContentRef, isContentHover] = useHover()
   const contents = status === ChatMessageStatus.Pending ? `${text}\u{258A}` : text
 
-  const handleCopyMessage = useCallback(() => {
-    onCopyMessage?.(text)
-  }, [text, onCopyMessage])
-
-  const handleEditMessage = useCallback(() => {
-    onEditMessage?.(text)
-  }, [text, onEditMessage])
-
-  const handleRegenerateMessage = useCallback(() => {
-    onRegenerateMessage?.()
-  }, [onRegenerateMessage])
-
-  const handleDeleteMessage = useCallback(() => {
-    onDeleteMessage?.()
-  }, [onDeleteMessage])
-
-  const renderContent = useCallback(({ showToolbar }: Pick<MessageItemProps, 'showToolbar'>) => {
+  const renderContent = ({ showToolbar }: Pick<MessageItemProps, 'showToolbar'>) => {
     return <MsgContent $showToolbar={showToolbar}
       $isMe={name === ChatRole.User}
     >
       <MessageTextView
         contents={contents}
-        onCopyCode={onCopyCode}
-        onDiffCode={onDiffCode}
-        onInsertCode={onInsertCode}
+        buildCodeToolbar={buildCodeToolbar}
       />
 
       <MsgContentFooterWrapper className='msg-content-footer'>
-        <IconButton
-          text='Copy'
-          iconClassName='codicon-copy'
-          onClick={handleCopyMessage}
-        >
-        </IconButton>
-
-        <IconButton
-          text='Edit'
-          iconClassName='codicon-edit'
-          onClick={handleEditMessage}
-        >
-        </IconButton>
-
-        {showRegenerateIcon && <IconButton
-          text={status === ChatMessageStatus.Error ? 'Retry' : 'Regenerate'}
-          iconClassName='codicon-sync'
-          disabled={[ChatMessageStatus.Pending, ChatMessageStatus.Idle].includes(status)}
-          onClick={handleRegenerateMessage}
-        ></IconButton>}
-
-        <IconButton
-          text='Delete'
-          iconClassName='codicon-trash'
-          onClick={handleDeleteMessage}
-        >
-        </IconButton>
-
+        {buildMessageToolbar?.({
+          name,
+          text,
+          status,
+        })}
       </MsgContentFooterWrapper>
     </MsgContent>
-  }, [name, contents, showToolbar, showRegenerateIcon, status])
+  }
 
   return (
     <MsgWrapper $isMe={name === ChatRole.User}>
diff --git a/packages/gpt-runner-web/client/src/components/chat-message-text-view/index.tsx b/packages/gpt-runner-web/client/src/components/chat-message-text-view/index.tsx
@@ -6,6 +6,7 @@ import { MessageCodeBlock } from '../chat-message-code-block'
 
 export interface MessageTextViewProps extends Partial<MessageCodeBlockProps> {
   contents: string
+
 }
 
 export const MessageTextView: FC<MessageTextViewProps> = (props) => {
diff --git a/packages/gpt-runner-web/client/src/pages/chat/chat-panel.tsx b/packages/gpt-runner-web/client/src/pages/chat/chat-panel.tsx
@@ -7,6 +7,7 @@ import { ChatMessagePanel } from '../../components/chat-message-panel'
 import { ChatMessageInput } from '../../components/chat-message-input'
 import { IconButton } from '../../components/icon-button'
 import { useChatInstance } from '../../hooks/use-chat-instance.hook'
+import type { MessageItemProps } from '../../components/chat-message-item'
 
 export interface ChatPanelProps {
   scrollDownRef: RefObject<any>
@@ -16,6 +17,7 @@ export interface ChatPanelProps {
 export const ChatPanel: FC<ChatPanelProps> = (props) => {
   const { scrollDownRef, chatId } = props
   const { chatInstance, updateCurrentChatInstance, generateCurrentChatAnswer, regenerateCurrentLastChatAnswer, stopCurrentGeneratingChatAnswer } = useChatInstance({ chatId })
+  const status = chatInstance?.status ?? ChatMessageStatus.Success
 
   const handleCopy = useCallback((value: string) => {
     copy(value)
@@ -63,28 +65,94 @@ export const ChatPanel: FC<ChatPanelProps> = (props) => {
       const handleRegenerateMessage = () => {
         if (!isLast)
           return
+
+        if (status === ChatMessageStatus.Pending) {
+          // is generating, stop first
+          stopCurrentGeneratingChatAnswer()
+        }
+
         regenerateCurrentLastChatAnswer()
       }
 
       const handleDeleteMessage = () => {
+        if (status === ChatMessageStatus.Pending) {
+          // is generating, stop first
+          stopCurrentGeneratingChatAnswer()
+        }
+
         updateCurrentChatInstance({
           messages: chatInstance.messages.filter((_, index) => index !== i),
         }, false)
       }
 
+      const buildCodeToolbar: MessageItemProps['buildCodeToolbar'] = ({ contents }) => {
+        return <>
+          <IconButton
+            text='Copy'
+            iconClassName='codicon-copy'
+            onClick={() => handleCopy(contents)}
+          >
+          </IconButton>
+
+          <IconButton
+            text='Insert'
+            iconClassName='codicon-insert'
+          >
+          </IconButton>
+
+          <IconButton
+            text='Diff'
+            iconClassName='codicon-arrow-swap'
+          >
+          </IconButton>
+        </>
+      }
+
+      const buildMessageToolbar: MessageItemProps['buildMessageToolbar'] = ({ text }) => {
+        return <>
+          <IconButton
+            text='Copy'
+            iconClassName='codicon-copy'
+            onClick={() => handleCopy(text)}
+          >
+          </IconButton>
+
+          <IconButton
+            text='Edit'
+            iconClassName='codicon-edit'
+            onClick={() => handleEditMessage(text)}
+          >
+          </IconButton>
+
+          {isAi && isLast && <IconButton
+            text={status === ChatMessageStatus.Error ? 'Retry' : 'Regenerate'}
+            iconClassName='codicon-sync'
+            onClick={handleRegenerateMessage}
+          ></IconButton>}
+
+          <IconButton
+            text='Delete'
+            iconClassName='codicon-trash'
+            onClick={handleDeleteMessage}
+          >
+          </IconButton>
+
+          {status === ChatMessageStatus.Pending && isLast && <IconButton
+            text='Stop'
+            iconClassName='codicon-chrome-maximize'
+            hoverShowText={false}
+            onClick={handleStopGenerateAnswer}
+          ></IconButton>}
+        </>
+      }
+
       return {
         ...message,
-        status: isLast ? chatInstance.status : ChatMessageStatus.Success,
+        status: isLast ? status : ChatMessageStatus.Success,
         showToolbar: isLastTwo ? 'always' : 'hover',
-        showRegenerateIcon: isAi && isLast,
-        onCopyCode: handleCopy,
-        onDiffCode: undefined,
-        onInsertCode: undefined,
-        onCopyMessage: handleCopy,
-        onEditMessage: handleEditMessage,
-        onRegenerateMessage: handleRegenerateMessage,
-        onDeleteMessage: handleDeleteMessage,
-      }
+        buildCodeToolbar,
+        buildMessageToolbar,
+      } satisfies MessageItemProps
     }) ?? [],
   }
 
@@ -109,32 +177,29 @@ export const ChatPanel: FC<ChatPanelProps> = (props) => {
         iconClassName='codicon-add'></IconButton>
 
       {/* right icon */}
-      {chatInstance?.status === ChatMessageStatus.Pending && <IconButton
-        style={{
-          marginLeft: 'auto',
-        }}
-        disabled={chatInstance?.status !== ChatMessageStatus.Pending}
-        text='Stop'
-        iconClassName='codicon-chrome-maximize'
-        onClick={handleStopGenerateAnswer}
-      ></IconButton>}
-
-      {chatInstance?.status === ChatMessageStatus.Success && <IconButton
+      <IconButton
         style={{
           marginLeft: 'auto',
         }}
-        disabled={chatInstance?.status !== ChatMessageStatus.Success}
+        disabled={status === ChatMessageStatus.Pending}
         text='Continue'
         iconClassName='codicon-debug-continue-small'
         onClick={handleContinueGenerateAnswer}
+      ></IconButton>
+
+      {status === ChatMessageStatus.Pending && <IconButton
+        text='Stop'
+        iconClassName='codicon-chrome-maximize'
+        hoverShowText={false}
+        onClick={handleStopGenerateAnswer}
       ></IconButton>}
 
-      <IconButton
+      {status !== ChatMessageStatus.Pending && <IconButton
         disabled={!chatInstance?.inputtingPrompt}
         text='Send'
         hoverShowText={false}
         iconClassName='codicon-send'
-        onClick={handleGenerateAnswer}></IconButton>
+        onClick={handleGenerateAnswer}></IconButton>}
     </>
   }
 

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ import { MessageCodeBlock } from '../chat-message-code-block'`
`6`	`6`
`7`	`7`	`export interface MessageTextViewProps extends Partial<MessageCodeBlockProps> {`
`8`	`8`	`contents: string`
	`9`	`+`
`9`	`10`	`}`
`10`	`11`
`11`	`12`	`export const MessageTextView: FC<MessageTextViewProps> = (props) => {`