cx-chat 0.0.1 → 0.0.3

package/src/views/chat/chat.less

@@ -1,323 +0,0 @@
-/**
- * 会话 / 聊天相关样式（`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

@@ -1,298 +0,0 @@
-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