@vibe-forge/client 0.8.4 → 0.10.0

package/src/components/chat/messages/MessageContextMenu.tsx

@@ -0,0 +1,108 @@
+import './MessageContextMenu.scss'
+
+import { App, Dropdown } from 'antd'
+import type { ReactElement } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { ChatMessage } from '@vibe-forge/core'
+
+import { MessageContextMenuContent } from './MessageContextMenuContent'
+import { buildMessageContextMenuEntries } from './build-message-context-menu-entries'
+
+interface MessageContextMenuProps {
+  anchorId: string
+  canEdit: boolean
+  canFork: boolean
+  canRecall: boolean
+  children: ReactElement
+  copyableText?: string
+  isDebugMode: boolean
+  isEditing: boolean
+  message: ChatMessage
+  sessionId?: string
+  onFork: () => void
+  onRecall: () => void
+  onStartEditing: () => void
+}
+
+type PendingMessageMenuAction = 'fork' | 'recall' | null
+
+export function MessageContextMenu({
+  anchorId,
+  canEdit,
+  canFork,
+  canRecall,
+  children,
+  copyableText,
+  isDebugMode,
+  isEditing,
+  message: sourceMessage,
+  sessionId,
+  onFork,
+  onRecall,
+  onStartEditing
+}: MessageContextMenuProps) {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const [open, setOpen] = useState(false)
+  const [pendingAction, setPendingAction] = useState<PendingMessageMenuAction>(null)
+
+  const closeMenu = () => {
+    setOpen(false)
+    setPendingAction(null)
+  }
+
+  const handleConfirmableActionClick = (action: Exclude<PendingMessageMenuAction, null>) => {
+    if (pendingAction === action) {
+      closeMenu()
+      if (action === 'recall') {
+        void onRecall()
+        return
+      }
+      void onFork()
+      return
+    }
+
+    setPendingAction(action)
+  }
+
+  const entries = buildMessageContextMenuEntries({
+    anchorId,
+    canEdit,
+    canFork,
+    canRecall,
+    copyableText,
+    isDebugMode,
+    isEditing,
+    messageApi: message,
+    onCloseMenu: closeMenu,
+    onConfirmableActionClick: handleConfirmableActionClick,
+    onStartEditing,
+    sessionId,
+    sourceMessage,
+    t
+  })
+
+  return (
+    <Dropdown
+      trigger={['contextMenu']}
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen)
+        if (!nextOpen) {
+          setPendingAction(null)
+        }
+      }}
+      dropdownRender={() => (
+        <MessageContextMenuContent
+          entries={entries}
+          pendingAction={pendingAction}
+          onCancelConfirm={() => setPendingAction(null)}
+        />
+      )}
+    >
+      {children}
+    </Dropdown>
+  )
+}

package/src/components/chat/messages/MessageContextMenuContent.tsx

@@ -0,0 +1,87 @@
+export interface MessageContextMenuEntry {
+  confirmLabel?: string
+  danger?: boolean
+  icon: string
+  key: string
+  label: string
+  onClick: () => void
+  type?: 'divider'
+}
+
+export function MessageContextMenuContent({
+  entries,
+  pendingAction,
+  onCancelConfirm
+}: {
+  entries: MessageContextMenuEntry[]
+  pendingAction: string | null
+  onCancelConfirm: () => void
+}) {
+  return (
+    <div className='message-context-menu' onContextMenu={(event) => event.preventDefault()}>
+      {entries.map((entry) => {
+        if (entry.type === 'divider') {
+          return <div key={entry.key} className='message-context-menu__divider' />
+        }
+
+        const isConfirming = pendingAction === entry.key
+        return (
+          <div
+            key={entry.key}
+            role='button'
+            tabIndex={0}
+            className={`message-context-menu__item message-context-menu__item--${entry.key} ${
+              entry.danger ? 'is-danger' : ''
+            } ${isConfirming ? 'is-confirming' : ''}`}
+            onClick={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              entry.onClick()
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                entry.onClick()
+              }
+            }}
+          >
+            <div className='message-context-menu__meta'>
+              <span className='material-symbols-rounded message-context-menu__icon'>
+                {entry.icon}
+              </span>
+              <span className='message-context-menu__label'>
+                {isConfirming ? (entry.confirmLabel ?? entry.label) : entry.label}
+              </span>
+            </div>
+            {isConfirming && (
+              <div className='message-context-menu__confirm-actions'>
+                <button
+                  type='button'
+                  className='message-context-menu__confirm-btn is-accept'
+                  onClick={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    entry.onClick()
+                  }}
+                >
+                  <span className='material-symbols-rounded'>check</span>
+                </button>
+                <button
+                  type='button'
+                  className='message-context-menu__confirm-btn is-cancel'
+                  onClick={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    onCancelConfirm()
+                  }}
+                >
+                  <span className='material-symbols-rounded'>close</span>
+                </button>
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/chat/messages/MessageFooter.tsx

@@ -1,48 +1,68 @@
 import type { ChatMessage } from '@vibe-forge/core'
 import { App } from 'antd'
-import React from 'react'
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSearchParams } from 'react-router-dom'
 
 export function MessageFooter({
   msg,
-  isUser
+  isUser,
+  children
 }: {
   msg: ChatMessage
   isUser: boolean
+  children?: ReactNode
 }) {
+  const { t, i18n } = useTranslation()
   const { message } = App.useApp()
+  const [searchParams] = useSearchParams()
+  const isDebugMode = searchParams.get('debug') === 'true'
+  const timestampLocale = i18n.resolvedLanguage?.startsWith('zh') === true ? 'zh-CN' : 'en-US'
+  const totalTokens = msg.usage != null ? msg.usage.input_tokens + msg.usage.output_tokens : undefined
+  const hasVisibleContent = children != null ||
+    (isUser && msg.model != null) ||
+    (isUser && totalTokens != null) ||
+    isDebugMode
+
+  if (!hasVisibleContent) {
+    return null
+  }
 
   return (
     <div className='msg-footer'>
+      {children}
       {isUser && msg.model != null && (
         <span className='msg-model'>
           {msg.model.split(',').pop()}
         </span>
       )}
-      {isUser && msg.usage != null && (
+      {isUser && totalTokens != null && (
         <span className='msg-usage'>
-          Tokens: {msg.usage.input_tokens + msg.usage.output_tokens}
+          {t('chat.messageFooter.tokens')}: {totalTokens}
+        </span>
+      )}
+      {isDebugMode && (
+        <span
+          className='timestamp'
+          onDoubleClick={() => {
+            // eslint-disable-next-line no-console
+            console.log('Debug Message:', msg)
+            void navigator.clipboard.writeText(new Date(msg.createdAt).toISOString())
+            void message.success(t('chat.messageFooter.copyTimestampSuccess'))
+          }}
+          title={t('chat.messageFooter.copyTimestampTitle')}
+        >
+          {new Date(msg.createdAt).toLocaleString(timestampLocale, {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false
+          })}
         </span>
       )}
-      <span
-        className='timestamp'
-        onDoubleClick={() => {
-          // eslint-disable-next-line no-console
-          console.log('Debug Message:', msg)
-          void navigator.clipboard.writeText(new Date(msg.createdAt).toISOString())
-          void message.success('ISO 时间已复制到剪贴板')
-        }}
-        title='双击复制 ISO 时间 (控制台打印消息结构)'
-      >
-        {new Date(msg.createdAt).toLocaleString('zh-CN', {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit',
-          second: '2-digit',
-          hour12: false
-        })}
-      </span>
     </div>
   )
 }

package/src/components/chat/messages/MessageItem.scss

@@ -1,14 +1,26 @@
 .chat-message-user, .chat-message-assistant {
   display: flex;
   align-items: flex-start;
-  margin-top: 12px;
-  margin-bottom: 0;
+  margin: 0;
   position: relative;
+  scroll-margin-top: 72px;
+  transition: background-color .2s ease;
+
+  &.is-anchor-target {
+    background-color: rgba(59, 130, 246, .08);
+    border-radius: 12px;
+  }
 
   .message-body-container {
     display: flex;
     flex-direction: column;
     max-width: 90%;
+    position: relative;
+
+    &.is-editing {
+      width: 100%;
+      max-width: 100%;
+    }
   }
 
   .bubble {
@@ -32,6 +44,10 @@
     }
   }
 
+  .message-inline-editor {
+    width: 100%;
+  }
+
   &.chat-message-user {
     .message-body-container {
       align-items: flex-end;
@@ -53,8 +69,94 @@
     opacity: 1;
   }
 
-  &:first-child {
-    margin-top: 0;
+  &.is-editing {
+    .message-body-container {
+      align-items: stretch;
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+}
+
+.message-side-actions {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 8px);
+  display: flex;
+  transform: translate(-4px, -50%);
+  visibility: hidden;
+  opacity: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  pointer-events: none;
+  z-index: 1;
+  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
+}
+
+.msg-action-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: var(--bg-color);
+  color: var(--sub-text-color, inherit);
+  cursor: pointer;
+  transition:
+    width .2s ease,
+    padding .2s ease,
+    background-color .2s ease,
+    border-color .2s ease,
+    color .2s ease;
+
+  &:hover {
+    background: var(--tag-hover-bg, rgba(127, 127, 127, .12));
+    color: var(--text-color, inherit);
+  }
+
+  .material-symbols-rounded {
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  &.is-confirming {
+    width: auto;
+    padding: 0 10px;
+    gap: 4px;
+  }
+}
+
+.msg-action-button__label {
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.msg-action-button--copy {
+  color: var(--sub-text-color, inherit);
+}
+
+.msg-action-button--recall {
+  color: #dc2626;
+
+  &:hover {
+    background: rgba(220, 38, 38, .12);
+    color: #b91c1c;
+  }
+}
+
+.msg-action-button--fork {
+  color: #0891b2;
+
+  &:hover {
+    background: rgba(8, 145, 178, .12);
+    color: #0e7490;
   }
 }
 
@@ -62,8 +164,12 @@
   flex-direction: row-reverse;
   gap: 8px;
 
-  &.consecutive {
-    margin-top: 4px;
+  &.is-actions-visible .message-side-actions {
+    visibility: visible;
+    opacity: 1;
+    transform: translate(0, -50%);
+    pointer-events: auto;
+    transition-delay: 0s;
   }
 
   .bubble {
@@ -72,6 +178,13 @@
     padding: 8px 12px;
     border-radius: 16px 0 16px 16px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+
+    &.is-editing {
+      background: transparent;
+      box-shadow: none;
+      padding: 0;
+      width: 100%;
+    }
   }
 
   &.consecutive .bubble {
@@ -84,16 +197,16 @@
   gap: 0;
   padding-left: 0;
 
-  &.consecutive {
-    margin-top: 0;
-  }
-
   .bubble {
     background-color: transparent;
     color: var(--text-color);
     padding: 0;
     max-width: 100%;
     width: 100%;
+
+    &.is-editing {
+      width: 100%;
+    }
   }
 }
 
@@ -136,6 +249,30 @@ html.dark {
   height: auto;
 }
 
+.message-context-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  background: var(--bg-color);
+}
+
+.message-context-file__icon {
+  font-size: 18px;
+  color: var(--sub-text-color, #6b7280);
+}
+
+.message-context-file__path {
+  min-width: 0;
+  color: var(--text-color);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
 .markdown-body {
   --border-color: #e5e7eb;
   --code-block-bg: #ffffff;