updated files related to chat-dev page, added onSend function to handle sending questions, and updated the button's onClick handler to call this function. Also added new types in code-graph store for handling results from opencode AI SDK.

2026-03-16 00:04:35 +08:00
parent 1afd39b970
commit b4980ab4f9
7 changed files with 241 additions and 10 deletions
--- a/src/pages/chat-dev/page.tsx
+++ b/src/pages/chat-dev/page.tsx
@@ -0,0 +1,123 @@
+import { useEffect } from 'react';
+import { useSearch } from '@tanstack/react-router';
+import { useShallow } from 'zustand/react/shallow';
+import { BotIcon, FileIcon, FolderIcon } from 'lucide-react';
+import { useChatDevStore } from './store';
+import { BOT_KEYS, BotKey } from '@/pages/code-graph/store/bot-helper';
+import openclawSvg from '@/pages/code-graph/assets/openclaw.svg';
+import opencodePng from '@/pages/code-graph/assets/opencode.png';
+import { useCodeGraphStore } from '../code-graph/store';
+import { useLayoutStore } from '../auth/store';
+
+const BOT_ICONS: Record<BotKey, string> = {
+  openclaw: openclawSvg,
+  opencode: opencodePng,
+};
+
+export const App = () => {
+  const { timestamp } = useSearch({ from: '/chat-dev' });
+  const { question, engine, projectInfo, initFromTimestamp, setData } = useChatDevStore(
+    useShallow((s) => ({
+      question: s.question,
+      engine: s.engine,
+      projectInfo: s.projectInfo,
+      initFromTimestamp: s.initFromTimestamp,
+      setData: s.setData,
+    })),
+  );
+  const layoutStore = useLayoutStore(useShallow((s) => ({
+    me: s.me,
+  })));
+  const codeGraphStore = useCodeGraphStore(useShallow((s) => ({
+    createQuestion: s.createQuestion,
+    init: s.init,
+  })));
+
+  useEffect(() => {
+    if (!layoutStore.me?.username) return;
+    codeGraphStore.init(layoutStore.me, { load: false });
+  }, [layoutStore.me]);
+  useEffect(() => {
+    if (timestamp) {
+      initFromTimestamp(timestamp);
+    }
+  }, [timestamp]);
+
+  const relativePath = projectInfo
+    ? (projectInfo.filepath || '').replace((projectInfo.projectPath || '') + '/', '') || '/'
+    : null;
+  const onSend = async () => {
+    if (projectInfo) {
+      const res = await codeGraphStore.createQuestion({
+        question,
+        projectPath: projectInfo.projectPath,
+        engine,
+      });
+      console.log(res);
+    }
+  }
+  return (
+    <div className='h-full bg-slate-950 text-slate-100 flex flex-col items-center py-10 px-4'>
+      <div className='w-full max-w-2xl rounded-xl border border-white/10 bg-slate-900 shadow-2xl flex flex-col'>
+        {/* 标题栏 */}
+        <div className='flex items-center gap-2 px-4 py-3 border-b border-white/10'>
+          <BotIcon className='size-4 text-emerald-400' />
+          <span className='text-sm font-medium text-slate-100'>AI 助手</span>
+        </div>
+
+        {/* 内容区 */}
+        <div className='px-4 py-4 flex flex-col gap-4'>
+          {/* 节点信息 + Bot 切换 */}
+          <div className='flex items-center gap-2'>
+            {relativePath && (
+              <div className='flex-1 flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800/60 border border-white/5 min-w-0'>
+                <FileIcon className='size-4 shrink-0 text-slate-400' />
+                <span className='text-xs text-slate-300 font-mono truncate' title={relativePath}>
+                  {relativePath}
+                </span>
+              </div>
+            )}
+            {projectInfo?.projectPath && !relativePath && (
+              <div className='flex-1 flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800/60 border border-white/5 min-w-0'>
+                <FolderIcon className='size-4 shrink-0 text-slate-400' />
+                <span className='text-xs text-slate-300 font-mono truncate'>
+                  {projectInfo.projectPath}
+                </span>
+              </div>
+            )}
+            {/* Bot 切换按钮组 */}
+            <div className='flex items-center gap-1 shrink-0 ml-auto'>
+              {BOT_KEYS.map((key) => (
+                <button
+                  key={key}
+                  title={key}
+                  onClick={() => setData({ engine: key })}
+                  className={`p-1.5 rounded-lg border transition-colors ${engine === key
+                    ? 'border-emerald-500/60 bg-emerald-500/10'
+                    : 'border-white/5 bg-slate-800/60 opacity-40 hover:opacity-70'
+                    }`}>
+                  <img src={BOT_ICONS[key]} alt={key} className='size-5 object-contain' />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* 问题输入区 */}
+          <textarea
+            className='w-full rounded-lg border border-white/10 bg-slate-800 px-3 py-2 text-sm text-slate-200 placeholder:text-slate-500 focus:outline-none focus:ring-1 focus:ring-emerald-500 resize-none'
+            rows={6}
+            placeholder='请输入内容...'
+            value={question}
+            onChange={(e) => setData({ question: e.target.value })}
+          />
+
+          <button className='w-full rounded-lg bg-emerald-600 hover:bg-emerald-500 active:bg-emerald-700 text-white text-sm font-medium py-2 transition-colors' onClick={onSend}>
+            发送
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;