cx-chat 0.0.1

package/src/views/page-system/logs/components/log-message-stream.ts

@@ -0,0 +1,184 @@
+import {
+  markMessagePreparationDone,
+  mergeMessagePreparationDelta,
+} from '@/utils/chatUtils'
+import type { Message } from '@/types'
+import { flushSync } from 'react-dom'
+import type { MutableRefObject, Dispatch, SetStateAction } from 'react'
+
+/** 从 content_block_delta 的 delta 中取出正文片段（兼容 text / content 字段）。 */
+function pickContentBlockDeltaText(
+  delta: Record<string, unknown> | undefined,
+): string {
+  if (!delta || typeof delta !== 'object') return ''
+  if (typeof delta.text === 'string') return delta.text
+  if (typeof delta.content === 'string') return delta.content
+  return ''
+}
+
+export type LogMessageSseStreamRefs = {
+  thisStreamGen: number
+  streamGenerationRef: MutableRefObject<number>
+  setStreamingContent: Dispatch<SetStateAction<Message | null>>
+  setIsStreaming: Dispatch<SetStateAction<boolean>>
+  streamingContentRef: MutableRefObject<Message | null>
+  syncLastUserMessageTurnId?: (turnKey: string) => void
+}
+
+/** 消费日志弹窗内流式 SSE，更新本地 streaming 消息状态。 */
+export async function readLogMessageSseStream(
+  response: Response,
+  refs: LogMessageSseStreamRefs,
+): Promise<void> {
+  if (!response.body) throw new Error('No response body')
+  const reader = response.body.getReader()
+  const decoder = new TextDecoder()
+  let startBuffer = ''
+  const {
+    thisStreamGen,
+    streamGenerationRef,
+    setStreamingContent,
+    setIsStreaming,
+    streamingContentRef,
+    syncLastUserMessageTurnId,
+  } = refs
+
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+
+    const chunk = decoder.decode(value, { stream: true })
+    startBuffer += chunk
+    const lines = startBuffer.split('\n')
+    startBuffer = lines.pop() || ''
+
+    for (const line of lines) {
+      const trimmed = line.replace(/\r$/, '').trim()
+      if (!trimmed.startsWith('data:')) continue
+
+      const dataStr = trimmed.slice(5).trimStart()
+
+      try {
+        const parsedData: Record<string, unknown> = JSON.parse(dataStr)
+        if (thisStreamGen !== streamGenerationRef.current) {
+          continue
+        }
+        const eventType = parsedData.type as string | undefined
+
+        if (eventType === 'message_start') {
+          const turnId = parsedData.turn_id
+          const turnKey =
+            turnId != null && String(turnId) ? String(turnId) : ''
+          setStreamingContent((prev) => {
+            if (!prev) return prev
+            const nextId = turnKey ? `${turnKey}-20` : prev.id
+            const updated = {
+              ...prev,
+              id: nextId,
+              turn_id: turnKey || prev.turn_id,
+            }
+            streamingContentRef.current = updated
+            return updated
+          })
+          if (turnKey) {
+            syncLastUserMessageTurnId?.(turnKey)
+          }
+          continue
+        }
+
+        if (eventType === 'preparation') {
+          const delta = parsedData.delta as
+            | Record<string, unknown>
+            | undefined
+          setStreamingContent((prev) => {
+            if (!prev) return null
+            const preparation_items = mergeMessagePreparationDelta(
+              prev.preparation_items,
+              delta,
+            )
+            const updated = { ...prev, preparation_items }
+            streamingContentRef.current = updated
+            return updated
+          })
+          continue
+        }
+
+        if (eventType === 'content_block_delta') {
+          const delta = parsedData.delta as Record<string, unknown> | undefined
+          const piece = pickContentBlockDeltaText(delta)
+          if (piece) {
+            flushSync(() => {
+              setStreamingContent((prev) => {
+                if (!prev) return null
+                const updated = {
+                  ...prev,
+                  content: prev.content + piece,
+                }
+                streamingContentRef.current = updated
+                return updated
+              })
+            })
+          }
+          continue
+        }
+
+        if (eventType === 'content_block_stop') {
+          setStreamingContent((prev) => {
+            if (!prev) return prev
+            const updated = markMessagePreparationDone(prev)
+            streamingContentRef.current = updated
+            return updated
+          })
+          continue
+        }
+
+        if (
+          eventType === 'suggested_replies' &&
+          Array.isArray(parsedData.items)
+        ) {
+          setStreamingContent((prev) => {
+            if (!prev) return null
+            const updated = {
+              ...prev,
+              options: parsedData.items as string[],
+            }
+            streamingContentRef.current = updated
+            return updated
+          })
+          continue
+        }
+
+        if (
+          eventType === 'references_knowledge' &&
+          Array.isArray(parsedData.items)
+        ) {
+          setStreamingContent((prev) => {
+            if (!prev) return null
+            const updated = {
+              ...prev,
+              references_knowledge_items: parsedData.items as any[],
+            }
+            streamingContentRef.current = updated
+            return updated
+          })
+          continue
+        }
+
+        if (eventType === 'message_end') {
+          setStreamingContent((prev) => {
+            if (!prev) return prev
+            const updated = markMessagePreparationDone({
+              ...prev,
+              is_streaming: false,
+            })
+            streamingContentRef.current = updated
+            return updated
+          })
+          continue
+        }
+      } catch (e) {
+        console.error('解析 SSE 数据错误', e)
+      }
+    }
+  }
+}

package/src/views/page-system/logs/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/page-system/logs/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>
+  );
+}
+