cx-chat 0.0.1

package/src/views/chat/components/header-thread-title.tsx

@@ -0,0 +1,210 @@
+import React, { useEffect, useState } from 'react'
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+import {
+  Check,
+  ChevronDown,
+  Edit2,
+  Loader2,
+  Pin,
+  PinOff,
+  Trash2,
+  X,
+} from 'lucide-react'
+
+import ConfirmDialog from '@/components/common/modal/confirm-dialog'
+import {
+  useDeletingChatSessionId,
+  useThreadActions,
+} from '@/hooks/useThreadActions'
+import type { Thread } from '@/types'
+import { resolveThreadDisplayTitle } from '@/utils/chatUtils'
+
+export type HeaderThreadTitleProps = {
+  threadId: string
+  allThreads: Thread[]
+  /** 消息多选删除等场景：仅展示标题，不可展开菜单/重命名 */
+  titleReadOnly?: boolean
+}
+
+const HeaderThreadTitle: React.FC<HeaderThreadTitleProps> = ({
+  threadId,
+  allThreads,
+  titleReadOnly = false,
+}) => {
+  const { t } = useTranslation()
+  const { renameThread, togglePinThread, deleteThread } = useThreadActions()
+  const deletingSessionId = useDeletingChatSessionId()
+
+  const activeThread = allThreads.find((x) => x.id === threadId)
+  const [open, setOpen] = useState(false)
+  const [renaming, setRenaming] = useState(false)
+  const [renameTitle, setRenameTitle] = useState('')
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
+
+  useEffect(() => {
+    if (activeThread) setRenameTitle(activeThread.title || '')
+    setRenaming(false)
+    setOpen(false)
+  }, [activeThread?.id, activeThread?.title])
+
+  useEffect(() => {
+    const onDocClick = () => setOpen(false)
+    if (open) document.addEventListener('click', onDocClick)
+    return () => document.removeEventListener('click', onDocClick)
+  }, [open])
+
+  if (!activeThread) return null
+
+  if (titleReadOnly) {
+    return (
+      <div className="flex min-h-[36px] items-center justify-center px-3">
+        <span className="max-w-[240px] truncate text-sm font-medium text-gray-900 dark:text-gray-100">
+          {resolveThreadDisplayTitle(
+            activeThread.title,
+            t('chat.untitled_session'),
+          )}
+        </span>
+      </div>
+    )
+  }
+
+  const onPin = () => {
+    togglePinThread(activeThread.id, activeThread.top_status === 1)
+    setOpen(false)
+  }
+
+  const onSaveRename = () => {
+    if (renameTitle.trim()) {
+      renameThread(activeThread.id, renameTitle)
+    }
+    setRenaming(false)
+  }
+
+  return (
+    <>
+      <div className="relative flex min-h-[36px] items-center justify-center">
+        {renaming ? (
+          <div
+            className="flex items-center gap-1"
+            onClick={(e) => e.stopPropagation()}>
+            <input
+              value={renameTitle}
+              onChange={(e) => setRenameTitle(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') onSaveRename()
+                if (e.key === 'Escape') setRenaming(false)
+              }}
+              className="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-blue-500 rounded px-2 py-1 text-sm outline-none w-56 text-center"
+              autoFocus
+            />
+            <button
+              type="button"
+              onClick={onSaveRename}
+              className="p-1 text-green-600 hover:bg-green-100 dark:hover:bg-green-900/30 rounded">
+              <Check size={16} />
+            </button>
+            <button
+              type="button"
+              onClick={() => setRenaming(false)}
+              className="p-1 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+              <X size={16} />
+            </button>
+          </div>
+        ) : (
+          <div className="relative">
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation()
+                setOpen(!open)
+              }}
+              className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm font-medium text-gray-900 dark:text-gray-100">
+              <span className="max-w-[240px] truncate">
+                {resolveThreadDisplayTitle(
+                  activeThread.title,
+                  t('chat.untitled_session'),
+                )}
+              </span>
+              <ChevronDown
+                size={14}
+                className={clsx(
+                  'text-gray-500 transition-transform',
+                  open && 'rotate-180',
+                )}
+              />
+            </button>
+
+            {open && (
+              <div
+                className="absolute top-full left-1/2 -translate-x-1/2 mt-1 w-44 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-100 dark:border-gray-700 py-1 z-20 overflow-hidden text-left"
+                onClick={(e) => e.stopPropagation()}>
+                <button
+                  type="button"
+                  onClick={onPin}
+                  className="w-full text-left px-4 py-2 text-sm flex items-center gap-2 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">
+                  {activeThread.top_status === 1 ? (
+                    <PinOff size={14} />
+                  ) : (
+                    <Pin size={14} />
+                  )}
+                  <span>
+                    {activeThread.top_status === 1
+                      ? t('common.unpin')
+                      : t('common.pin')}
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setRenaming(true)
+                    setOpen(false)
+                  }}
+                  className="w-full text-left px-4 py-2 text-sm flex items-center gap-2 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">
+                  <Edit2 size={14} />
+                  <span>{t('common.rename')}</span>
+                </button>
+                <div className="h-px bg-gray-100 dark:bg-gray-700 my-1" />
+                <button
+                  type="button"
+                  onClick={() => {
+                    setOpen(false)
+                    setDeleteConfirmOpen(true)
+                  }}
+                  className="w-full text-left px-4 py-2 text-sm flex items-center gap-2 hover:bg-red-50 dark:hover:bg-red-900/10 text-red-600 dark:text-red-400">
+                  <Trash2 size={14} />
+                  <span>{t('common.delete')}</span>
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+        {deletingSessionId === activeThread.id && (
+          <div
+            className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-white/85 backdrop-blur-[1px] dark:bg-gray-950/80"
+            aria-busy="true"
+            aria-label={t('common.loading')}
+          >
+            <Loader2 size={20} className="animate-spin text-blue-500" />
+          </div>
+        )}
+      </div>
+
+      <ConfirmDialog
+        confirmText={t('common.delete')}
+        danger
+        isOpen={deleteConfirmOpen}
+        message={t('chat.delete_confirm')}
+        title={t('chat.delete_title')}
+        onClose={() => setDeleteConfirmOpen(false)}
+        onConfirm={() => {
+          deleteThread(activeThread.id)
+          setDeleteConfirmOpen(false)
+        }}
+      />
+    </>
+  )
+}
+
+export default HeaderThreadTitle
+

package/src/views/chat/components/message-list/content-answer.tsx

@@ -0,0 +1,100 @@
+import {
+  markdownRehypePlugins,
+  markdownRemarkPlugins,
+} from '@/utils/markdown-math-plugins';
+import 'highlight.js/styles/github-dark.css';
+import React from 'react';
+import type { Options as ReactMarkdownOptions } from 'react-markdown';
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import remarkEmoji from 'remark-emoji';
+import type { PluggableList } from 'unified';
+
+const answerRemarkPlugins = [
+  ...(markdownRemarkPlugins as PluggableList),
+  [remarkEmoji, { emoticon: true }],
+] as ReactMarkdownOptions['remarkPlugins'];
+
+const answerRehypePlugins = [
+  ...(markdownRehypePlugins as PluggableList),
+  rehypeHighlight,
+] as ReactMarkdownOptions['rehypePlugins'];
+
+const markdownTableComponents = {
+  /**
+   * 让回答里的超链接统一新窗口打开，避免打断当前会话。
+   */
+  a: ({ node, ...props }: { node?: unknown } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+    <a
+      {...props}
+      target="_blank"
+      rel="noopener noreferrer"
+    />
+  ),
+  table: ({ node, ...props }: { node?: unknown }) => (
+    <div className="my-4 max-h-[500px] overflow-auto rounded-lg border border-gray-200 dark:border-gray-700">
+      <table
+        className="min-w-full divide-y divide-gray-200 dark:divide-gray-700"
+        {...props}
+      />
+    </div>
+  ),
+  thead: ({ node, ...props }: { node?: unknown }) => (
+    <thead className="bg-gray-50 dark:bg-gray-800" {...props} />
+  ),
+  tbody: ({ node, ...props }: { node?: unknown }) => (
+    <tbody
+      className="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-900"
+      {...props}
+    />
+  ),
+  tr: ({ node, ...props }: { node?: unknown }) => <tr {...props} />,
+  th: ({ node, ...props }: { node?: unknown }) => (
+    <th
+      className="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider border-r border-gray-200 dark:border-gray-700 last:border-r-0 whitespace-nowrap"
+      {...props}
+    />
+  ),
+  td: ({ node, ...props }: { node?: unknown }) => (
+    <td
+      className="px-3 py-2 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r border-gray-200 dark:border-gray-700 last:border-r-0"
+      {...props}
+    />
+  ),
+  /** 代码块容器：与 github-dark 主题配合，统一圆角与外边距 */
+  pre: ({ node, ...props }: { node?: unknown } & React.HTMLAttributes<HTMLPreElement>) => (
+    <pre
+      className="my-3 max-w-full overflow-x-auto rounded-lg border border-gray-700/80 dark:border-gray-600/80"
+      {...props}
+    />
+  ),
+  /** 行内代码（无 hljs）与 fenced 块内 code 均由 rehype-highlight 处理 className */
+  code: ({
+    node,
+    className,
+    ...props
+  }: { node?: unknown; className?: string } & React.HTMLAttributes<HTMLElement>) => {
+    const isBlock = typeof className === 'string' && className.includes('hljs');
+    if (isBlock) {
+      return <code className={className} {...props} />;
+    }
+    return (
+      <code
+        className="rounded bg-gray-200/90 px-1.5 py-0.5 text-[0.9em] dark:bg-gray-700/90"
+        {...props}
+      />
+    );
+  },
+};
+
+export function ContentAnswer({ content }: { content: string }) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={answerRemarkPlugins}
+      rehypePlugins={answerRehypePlugins}
+      components={markdownTableComponents as ReactMarkdownOptions['components']}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}

package/src/views/chat/components/message-list/content-question.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export function ContentQuestion({ content }: { content: string }) {
+  return (
+    <div
+      className={clsx(
+        'px-5 py-3.5 break-words',
+        'bg-[#f0f4f9] dark:bg-[#1e1f20] text-gray-900 dark:text-gray-100 rounded-[2rem] rounded-tr-sm',
+      )}
+    >
+      {content ? (
+        <div className="whitespace-pre-wrap break-words">{content}</div>
+      ) : null}
+    </div>
+  );
+}
+