cx-chat 0.0.1

package/src/views/chat/chat.less

@@ -0,0 +1,323 @@
+/**
+ * 会话 / 聊天相关样式（`chat-*` 前缀，避免污染全局）
+ * 由 `views/chat/index.tsx`、`index-session.tsx` 引入；后续会话 UI 可继续往本文件加块。
+ */
+
+/* ----- preparation：流式「正在分析」步骤条 ----- */
+
+.chat-prep-panel {
+  margin-bottom: 6px;
+  border-radius: 8px;
+  border: 1px solid rgba(229, 231, 235, 0.9);
+  background: rgba(249, 250, 251, 0.8);
+  padding: 6px 10px;
+  text-align: left;
+  width: 600px;
+
+  html.dark & {
+    border-color: rgba(55, 65, 81, 0.9);
+    background: rgba(17, 24, 39, 0.5);
+  }
+}
+
+.chat-prep-heading {
+  margin: 8px 0;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: #6b7280;
+
+  html.dark & {
+    color: #9ca3af;
+  }
+}
+
+/* 单步副标题 description：限高 + 纵向可滚（脚本粘底）；滚动条隐藏，避免占位与「可操作条」观感 */
+.chat-prep-step-desc-scroll {
+  max-height: 60px;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin-right: 0;
+  padding-right: 0;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+
+/* short_memory / long_memory / knowledge_retrieval：可视约 4 行，裁切顶部；无滚动条、不可滚，内容贴底显示末尾 */
+.chat-prep-step-desc-scroll--memory-tail {
+  /* 略加高度，抵消内边距，减轻首行/首段顶边被裁切 */
+  max-height: calc(12px * 1.5 * 3 + 10px);
+  overflow: hidden;
+  margin-right: 0;
+  padding-right: 0;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  overscroll-behavior: none;
+  touch-action: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-height: 0;
+
+  .chat-prep-step-md {
+    flex-shrink: 0;
+    min-height: 0;
+    padding-top: 6px;
+    padding-bottom: 4px;
+    box-sizing: border-box;
+
+    > p:first-child,
+    > :first-child {
+      margin-top: 0 !important;
+    }
+  }
+}
+
+.chat-prep-steps-wrap {
+  width: 100%;
+  min-width: 0;
+}
+
+/* 勿在 .ant-steps-item-icon 上写死宽高：竖向 rail 与 margin 按 antd 的 icon-size 变量计算 */
+
+.chat-prep-steps {
+  .ant-steps-item {
+    padding-top: 0 !important;
+    padding-bottom: 6px !important;
+
+    &:last-child {
+      padding-bottom: 0 !important;
+    }
+  }
+
+  /* antd v6 竖向连线：.ant-steps-item-rail（border-inline-start） */
+  .ant-steps-item-rail {
+    border-inline-start-color: #e2e8f0 !important;
+  }
+
+  .ant-steps-item-icon {
+    display: flex !important;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    line-height: 1 !important;
+    border-color: #e2e8f0;
+    color: #cbd5e1;
+  }
+
+  .ant-steps-item-process .ant-steps-item-icon {
+    border-color: #e2e8f0 !important;
+  }
+
+  .ant-steps-item-finish .ant-steps-item-icon {
+    border: 0 !important;
+    background: transparent !important;
+  }
+
+  /* 副标题在 rc-steps 里走 .ant-steps-item-content；antd 按 finish/wait 等状态写不同 token，需统一色值 */
+  .ant-steps-item-content {
+    min-width: 0 !important;
+    margin-top: 0 !important;
+    max-width: none !important;
+    white-space: normal !important;
+    word-break: break-word;
+    padding-bottom: 0 !important;
+    font-size: 12px;
+    line-height: 1.375;
+    color: #94a3b8 !important;
+  }
+
+  .ant-steps-item-title {
+    margin: 0 !important;
+    padding-bottom: 2px;
+    line-height: 1.25 !important;
+    font-size: 13px;
+  }
+
+  .ant-steps-item-finish .ant-steps-item-title {
+    font-weight: 500;
+    color: #334155 !important;
+  }
+
+  .ant-steps-item-process .ant-steps-item-title,
+  .ant-steps-item-wait .ant-steps-item-title {
+    font-weight: 500;
+    color: #1e293b !important;
+  }
+
+  /* 兼容仍带 -description 类名的旧结构 */
+  .ant-steps-item-description {
+    margin-top: 0 !important;
+    max-width: none !important;
+    white-space: normal !important;
+    word-break: break-word;
+    padding-bottom: 0 !important;
+    font-size: 12px;
+    line-height: 1.375;
+    color: #94a3b8 !important;
+  }
+
+  /* loading 点保持主题主色 */
+  .chat-prep-step-spin .ant-spin-dot-item {
+    background-color: var(--antd-color-primary, #2563eb) !important;
+  }
+
+  html.dark & {
+    .ant-steps-item-rail {
+      border-inline-start-color: #64748b !important;
+    }
+
+    .ant-steps-item-icon {
+      border-color: #64748b;
+      color: #94a3b8;
+    }
+
+    .ant-steps-item-process .ant-steps-item-icon {
+      border-color: #64748b !important;
+    }
+
+    .ant-steps-item-finish .ant-steps-item-title {
+      color: #e2e8f0 !important;
+    }
+
+    .ant-steps-item-process .ant-steps-item-title,
+    .ant-steps-item-wait .ant-steps-item-title {
+      color: #f1f5f9 !important;
+    }
+
+    .ant-steps-item-content,
+    .ant-steps-item-description {
+      color: #cbd5e1 !important;
+    }
+  }
+}
+
+.chat-prep-step-icon-inner {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  color: #cbd5e1;
+
+  html.dark & {
+    color: #94a3b8;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+.chat-prep-step-spin {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+
+  .ant-spin-nested-loading {
+    padding: 0 !important;
+  }
+}
+
+/* preparation 副标题内 Markdown（GFM），字号与步骤 content 一致 */
+.chat-prep-step-md {
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-word;
+
+  p {
+    margin: 0 0 0.35em;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ul,
+  ol {
+    margin: 0.25em 0 0.35em;
+    padding-left: 1.25em;
+  }
+
+  li {
+    margin: 0.15em 0;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  a {
+    color: var(--antd-color-primary, #2563eb);
+    text-decoration: underline;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  code {
+    padding: 0.1em 0.35em;
+    font-size: 0.92em;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.06);
+
+    html.dark & {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  pre {
+    margin: 0.35em 0;
+    padding: 0.5em 0.65em;
+    font-size: 11px;
+    line-height: 1.4;
+    border-radius: 6px;
+    overflow-x: auto;
+    background: rgba(0, 0, 0, 0.06);
+
+    html.dark & {
+      background: rgba(0, 0, 0, 0.35);
+    }
+
+    code {
+      padding: 0;
+      background: transparent;
+    }
+  }
+
+  blockquote {
+    margin: 0.35em 0;
+    padding-left: 0.75em;
+    border-left: 3px solid #cbd5e1;
+
+    html.dark & {
+      border-left-color: #64748b;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-size: inherit;
+    font-weight: 600;
+    margin: 0.35em 0 0.2em;
+  }
+}

package/src/views/chat/components/chat-input.tsx

@@ -0,0 +1,298 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import { ArrowUp, BarChart2, Globe, Library } from 'lucide-react'
+// import { Atom } from 'lucide-react' // 深度思考入口恢复时一并启用
+import { useTranslation } from 'react-i18next'
+import clsx from 'clsx'
+import { useAuth } from '@/contexts/AuthContext'
+import {
+  CHAT_PERM_ENABLE_DATA_ANALYSIS,
+  CHAT_PERM_ENABLE_KNOWLEDGE,
+  CHAT_PERM_ENABLE_NETWORK,
+  clampChatStreamFeatureFlags,
+} from '@/contexts/ChatContext'
+import { useSystemConfig } from '@/config/system'
+import {
+  getChatEnableDataAnalysis,
+  getChatEnableKnowledgeBase,
+  getChatEnableNetwork,
+  setChatEnableDataAnalysis,
+  setChatEnableKnowledgeBase,
+  setChatEnableNetwork,
+} from '@/utils/storage'
+
+export interface ChatSendPayload {
+  enableNetwork: boolean
+  enableKnowledgeBase: boolean
+  enableDataAnalysis: boolean
+}
+
+interface ChatInputProps {
+  onSend: (message: string, payload: ChatSendPayload) => void | Promise<void>
+  onStop?: () => void
+  isLoading: boolean
+  disableSend?: boolean
+}
+
+const chipBase =
+  'inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors'
+
+type ChipIcon = typeof Globe
+
+function ToggleChip(props: {
+  active: boolean
+  disabled: boolean
+  onClick: () => void
+  icon: ChipIcon
+  label: string
+}) {
+  const { active, disabled, onClick, icon: Icon, label } = props
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className={clsx(
+        chipBase,
+        active
+          ? 'border-blue-600 bg-blue-50 text-blue-600 dark:border-blue-500 dark:bg-blue-950/50 dark:text-blue-400'
+          : 'border-gray-200 bg-white text-gray-900 dark:border-gray-600 dark:bg-[#131314] dark:text-gray-100',
+      )}
+    >
+      <Icon size={16} strokeWidth={2} />
+      {label}
+    </button>
+  )
+}
+
+const ChatInput: React.FC<ChatInputProps> = ({
+  onSend,
+  onStop,
+  isLoading,
+  disableSend,
+}) => {
+  const [input, setInput] = useState('')
+  const { systemName } = useSystemConfig()
+  const [enableNetwork, setEnableNetwork] = useState(() =>
+    getChatEnableNetwork(),
+  )
+  const [enableKnowledgeBase, setEnableKnowledgeBase] = useState(() =>
+    getChatEnableKnowledgeBase(),
+  )
+  const [enableDataAnalysis, setEnableDataAnalysis] = useState(() =>
+    getChatEnableDataAnalysis(),
+  )
+  // 深度思考：后续若对接推理/思考链等参数再打开
+  // const [deepThinking, setDeepThinking] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const { t } = useTranslation()
+  const { hasPermission } = useAuth()
+
+  const canUseNetwork = hasPermission(CHAT_PERM_ENABLE_NETWORK)
+  const canUseKnowledgeBase = hasPermission(CHAT_PERM_ENABLE_KNOWLEDGE)
+  const canUseDataAnalysis = hasPermission(CHAT_PERM_ENABLE_DATA_ANALYSIS)
+
+  const toggleNetwork = useCallback(() => {
+    setEnableNetwork((prev) => {
+      const next = !prev
+      setChatEnableNetwork(next)
+      return next
+    })
+  }, [])
+
+  const toggleKnowledgeBase = useCallback(() => {
+    setEnableKnowledgeBase((prev) => {
+      const next = !prev
+      setChatEnableKnowledgeBase(next)
+      return next
+    })
+  }, [])
+
+  const toggleDataAnalysis = useCallback(() => {
+    setEnableDataAnalysis((prev) => {
+      const next = !prev
+      setChatEnableDataAnalysis(next)
+      return next
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!canUseNetwork && enableNetwork) {
+      setEnableNetwork(false)
+      setChatEnableNetwork(false)
+    }
+    if (!canUseKnowledgeBase && enableKnowledgeBase) {
+      setEnableKnowledgeBase(false)
+      setChatEnableKnowledgeBase(false)
+    }
+    if (!canUseDataAnalysis && enableDataAnalysis) {
+      setEnableDataAnalysis(false)
+      setChatEnableDataAnalysis(false)
+    }
+  }, [
+    canUseNetwork,
+    canUseKnowledgeBase,
+    canUseDataAnalysis,
+    enableNetwork,
+    enableKnowledgeBase,
+    enableDataAnalysis,
+  ])
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto'
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`
+    }
+  }, [input])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (isLoading && onStop) {
+      onStop()
+      return
+    }
+    if (input.trim() && !isLoading) {
+      const payload = clampChatStreamFeatureFlags(
+        {
+          enableNetwork,
+          enableKnowledgeBase,
+          enableDataAnalysis,
+        },
+        hasPermission,
+      )
+      void onSend(input, payload)
+      setInput('')
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSubmit(e)
+    }
+  }
+
+  const chipsDisabled = isLoading || disableSend
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-transparent p-4">
+      <div className="relative mx-auto w-full max-w-7xl">
+        <div
+          className={clsx(
+            'rounded-[28px] border border-gray-200 bg-white p-4 shadow-sm transition-shadow',
+            'dark:border-gray-700 dark:bg-[#1e1f20]',
+            'focus-within:border-gray-300 dark:focus-within:border-gray-600',
+          )}
+        >
+          {isLoading ? (
+            <div className="flex min-h-[44px] items-center gap-3 py-1 text-gray-500 dark:text-gray-400">
+              <div className="h-5 w-5 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent" />
+              <span className="text-sm">{t('chat.processing')}</span>
+            </div>
+          ) : (
+            <textarea
+              ref={textareaRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={t('chat.placeholder_to_app', { appName: systemName })}
+              rows={1}
+              className="max-h-48 w-full resize-none border-0 bg-transparent py-1 text-base text-gray-900 outline-none ring-0 placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500"
+              disabled={isLoading}
+            />
+          )}
+
+          <div className="mt-2 flex flex-wrap items-center justify-between gap-3">
+            <div className="flex flex-wrap items-center gap-2">
+              {/*
+              深度思考（暂隐藏，勿删；恢复时取消注释并启用上方 Atom、deepThinking state）
+              <button
+                type="button"
+                disabled={chipsDisabled}
+                onClick={() => setDeepThinking((v) => !v)}
+                className={clsx(
+                  chipBase,
+                  deepThinking
+                    ? 'border-blue-600 bg-blue-50 text-blue-600 dark:border-blue-500 dark:bg-blue-950/50 dark:text-blue-400'
+                    : 'border-gray-200 bg-white text-gray-900 dark:border-gray-600 dark:bg-[#131314] dark:text-gray-100',
+                )}
+              >
+                <Atom size={16} strokeWidth={2} />
+                {t('chat.deep_thinking')}
+              </button>
+              */}
+              {canUseNetwork && (
+                <ToggleChip
+                  active={enableNetwork}
+                  disabled={chipsDisabled}
+                  onClick={toggleNetwork}
+                  icon={Globe}
+                  label={t('chat.web_search')}
+                />
+              )}
+              {canUseKnowledgeBase && (
+                <ToggleChip
+                  active={enableKnowledgeBase}
+                  disabled={chipsDisabled}
+                  onClick={toggleKnowledgeBase}
+                  icon={Library}
+                  label={t('chat.knowledge_base')}
+                />
+              )}
+              {canUseDataAnalysis && (
+                <ToggleChip
+                  active={enableDataAnalysis}
+                  disabled={chipsDisabled}
+                  onClick={toggleDataAnalysis}
+                  icon={BarChart2}
+                  label={t('chat.data_analysis')}
+                />
+              )}
+            </div>
+
+            <div className="ml-auto flex shrink-0 items-center gap-2">
+              {/*<button
+                type="button"
+                disabled={chipsDisabled}
+                className="rounded-lg p-2 text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800"
+                title={t('chat.attachment')}
+                aria-label={t('chat.attachment')}
+              >
+                <Paperclip size={20} strokeWidth={2} />
+              </button>*/}
+              <button
+                type="submit"
+                disabled={(!input.trim() && !isLoading) || disableSend}
+                className={clsx(
+                  'flex h-10 w-10 items-center justify-center rounded-full transition-all',
+                  isLoading
+                    ? 'bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600'
+                    : input.trim() && !disableSend
+                      ? 'bg-blue-600 text-white shadow-sm hover:bg-blue-700'
+                      : 'cursor-not-allowed bg-gray-100 text-gray-300 dark:bg-gray-800 dark:text-gray-600',
+                )}
+                title={
+                  isLoading
+                    ? t('common.stop') || 'Stop'
+                    : t('common.send') || 'Send'
+                }
+              >
+                {isLoading ? (
+                  <span className="block h-2.5 w-2.5 rounded-sm bg-current" />
+                ) : (
+                  <ArrowUp size={20} strokeWidth={2.5} />
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="mt-2 text-center">
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            {t('chat.disclaimer', { appName: systemName })}
+          </p>
+        </div>
+      </div>
+    </form>
+  )
+}
+
+export default ChatInput