@vibe-forge/client 3.0.0-alpha.6 → 3.0.0-alpha.7

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

@@ -1,68 +0,0 @@
-import type { ChatMessage } from '@vibe-forge/core'
-import { App } from 'antd'
-import type { ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useSearchParams } from 'react-router-dom'
-
-export function MessageFooter({
-  msg,
-  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 && totalTokens != null && (
-        <span className='msg-usage'>
-          {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>
-      )}
-    </div>
-  )
-}

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

@@ -1,486 +0,0 @@
-.chat-message-user, .chat-message-assistant {
-  display: flex;
-  align-items: flex-start;
-  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 {
-    position: relative;
-    width: fit-content;
-  }
-
-  .msg-footer {
-    opacity: 0;
-    transition: opacity .2s ease;
-    margin-top: 4px;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 8px;
-    min-width: 0;
-    font-size: 11px;
-    color: var(--sub-text-color, #9ca3af);
-
-    > * {
-      min-width: 0;
-    }
-
-    .msg-model,
-    .msg-usage,
-    .timestamp {
-      overflow-wrap: anywhere;
-    }
-
-    .timestamp {
-      user-select: none;
-      cursor: pointer;
-    }
-  }
-
-  .message-inline-editor {
-    width: 100%;
-  }
-
-  &.chat-message-user {
-    .message-body-container {
-      align-items: flex-end;
-    }
-    .msg-footer {
-      justify-content: flex-end;
-    }
-  }
-
-  &.chat-message-assistant {
-    .message-body-container {
-      align-items: flex-start;
-      width: 100%;
-      max-width: 100%;
-    }
-  }
-
-  &:hover .msg-footer {
-    opacity: 1;
-  }
-
-  &.is-editing {
-    .message-body-container {
-      align-items: stretch;
-      width: 100%;
-      max-width: 100%;
-    }
-  }
-
-  &.is-targeted {
-    scroll-margin-top: 96px;
-
-    .bubble {
-      outline: 2px solid rgba(59, 130, 246, .35);
-      outline-offset: 6px;
-      border-radius: 12px;
-    }
-  }
-}
-
-.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;
-  }
-}
-
-.chat-message-user.has-compact-menu,
-.chat-message-assistant.has-compact-menu {
-  .msg-footer {
-    opacity: 1;
-  }
-}
-
-.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;
-  }
-}
-
-.msg-action-button--menu {
-  width: 40px;
-  min-width: 40px;
-  height: 40px;
-}
-
-.chat-message-user {
-  flex-direction: row-reverse;
-  gap: 8px;
-
-  &.is-actions-visible .message-side-actions {
-    visibility: visible;
-    opacity: 1;
-    transform: translate(0, -50%);
-    pointer-events: auto;
-    transition-delay: 0s;
-  }
-
-  .bubble {
-    background-color: var(--user-bubble-bg, #3b82f6);
-    color: white;
-    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 {
-    border-radius: 16px;
-  }
-}
-
-.chat-message-assistant {
-  flex-direction: row;
-  gap: 0;
-  padding-left: 0;
-
-  .bubble {
-    background-color: transparent;
-    color: var(--text-color);
-    padding: 0;
-    max-width: 100%;
-    width: 100%;
-
-    &.is-editing {
-      width: 100%;
-    }
-  }
-}
-
-html.dark {
-  .chat-message-user {
-    --user-bubble-bg: #1d4ed8;
-  }
-  .chat-message-assistant {
-    .bubble {
-      color: #e5e7eb;
-    }
-  }
-
-  .markdown-body {
-    --border-color: #30363d;
-    --code-block-bg: #0d1117;
-    --code-header-bg: #161b22;
-    --hover-bg: rgba(255, 255, 255, .1);
-  }
-}
-
-.message-contents {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 100%;
-}
-
-.message-image {
-  display: block;
-  width: min(100%, 360px);
-  max-width: 100%;
-  border-radius: 10px;
-  overflow: hidden;
-  border: 1px solid var(--border-color);
-}
-
-.message-image img {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  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;
-  --code-header-bg: #f6f8fa;
-  --hover-bg: rgba(0, 0, 0, .05);
-
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-  overflow-wrap: anywhere;
-  width: 100%;
-  min-width: 0;
-
-  p {
-    margin: 0 0 4px 0;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  code {
-    background-color: var(--tag-bg, #f3f4f6);
-    padding: 1px 3px;
-    border-radius: 3px;
-    font-family:
-      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: .9em;
-    color: var(--text-color);
-  }
-
-  pre {
-    background-color: transparent;
-    padding: 0;
-    border-radius: 0;
-    overflow-x: visible;
-    margin: 8px 0;
-
-    code {
-      background-color: transparent;
-      padding: 0;
-      font-size: 12px;
-    }
-  }
-
-  ul, ol {
-    margin: 4px 0;
-    padding-left: 18px;
-  }
-
-  li {
-    margin-bottom: 2px;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    margin: 12px 0 6px 0;
-    font-weight: 600;
-    line-height: 1.25;
-  }
-
-  a {
-    color: #3b82f6;
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  blockquote {
-    margin: 8px 0;
-    padding-left: 10px;
-    border-left: 3px solid #e5e7eb;
-    color: #6b7280;
-  }
-
-  .markdown-table-wrapper {
-    max-width: 100%;
-    margin: 12px 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-gutter: stable both-edges;
-  }
-
-  table {
-    border-collapse: collapse;
-    width: max-content;
-    min-width: 100%;
-    margin: 0;
-
-    th, td {
-      border: 1px solid #e5e7eb;
-      padding: 6px 13px;
-      vertical-align: top;
-      overflow-wrap: anywhere;
-    }
-
-    tr:nth-child(2n) {
-      background-color: #f9fafb;
-    }
-  }
-}
-
-.chat-message-user {
-  .markdown-body {
-    color: white;
-    code {
-      background-color: rgba(255, 255, 255, .2);
-      color: white;
-    }
-    pre {
-      background-color: rgba(0, 0, 0, .1);
-      code {
-        background-color: transparent;
-      }
-    }
-    a {
-      color: white;
-      text-decoration: underline;
-    }
-    blockquote {
-      border-left-color: rgba(255, 255, 255, .3);
-      color: rgba(255, 255, 255, .9);
-    }
-  }
-}
-
-.adapter-event-item {
-  opacity: 0;
-  transition: opacity .2s ease;
-  font-size: 11px;
-  color: #9ca3af;
-  margin: 2px 0;
-  padding: 2px 6px;
-  background-color: #f9fafb;
-  border-radius: 4px;
-  border: 1px solid #f3f4f6;
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-@media (max-width: 960px) {
-  .chat-message-user, .chat-message-assistant {
-    scroll-margin-top: 64px;
-
-    .msg-footer {
-      gap: 6px;
-      font-size: 10px;
-    }
-  }
-
-  .chat-message-user, .chat-message-assistant {
-    &.is-targeted {
-      scroll-margin-top: 76px;
-
-      .bubble {
-        outline-offset: 4px;
-      }
-    }
-  }
-
-  .message-context-file {
-    width: 100%;
-  }
-
-  .markdown-body {
-    .markdown-table-wrapper {
-      margin: 8px 0;
-    }
-  }
-}