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.
This commit is contained in:
xiongxiao
123
src/pages/chat-dev/page.tsx
Normal file
123
src/pages/chat-dev/page.tsx
Normal file
@@ -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;
|
||||
64
src/pages/chat-dev/store/index.ts
Normal file
64
src/pages/chat-dev/store/index.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import { create } from 'zustand';
|
||||
import { BotKey } from '@/pages/code-graph/store/bot-helper';
|
||||
export type ChatDevData = {
|
||||
question: string;
|
||||
engine: BotKey;
|
||||
projectInfo: {
|
||||
filepath: string;
|
||||
projectPath: string;
|
||||
} | null;
|
||||
};
|
||||
|
||||
type ChatDevState = {
|
||||
question: string;
|
||||
engine: BotKey;
|
||||
projectInfo: {
|
||||
filepath: string;
|
||||
projectPath: string;
|
||||
} | null;
|
||||
setData: (data: Partial<ChatDevData>) => void;
|
||||
initFromTimestamp: (timestamp: string) => void;
|
||||
};
|
||||
|
||||
const SESSION_KEY_PREFIX = 'chat-dev-';
|
||||
const SESSION_KEY = 'chat-dev';
|
||||
|
||||
export const useChatDevStore = create<ChatDevState>()((set) => ({
|
||||
question: '',
|
||||
engine: 'opencode',
|
||||
projectInfo: null,
|
||||
|
||||
setData: (data) => set((s) => ({ ...s, ...data })),
|
||||
|
||||
initFromTimestamp: (timestamp: string) => {
|
||||
const key = SESSION_KEY_PREFIX + timestamp;
|
||||
|
||||
// 优先从 localStorage 读取（首次打开）
|
||||
const localRaw = localStorage.getItem(key);
|
||||
if (localRaw) {
|
||||
try {
|
||||
const data: ChatDevData = JSON.parse(localRaw);
|
||||
// 持久化到 sessionStorage，供刷新页面使用（不带 timestamp）
|
||||
sessionStorage.setItem(SESSION_KEY, localRaw);
|
||||
// 清除 localStorage
|
||||
localStorage.removeItem(key);
|
||||
set({ question: data.question, engine: data.engine, projectInfo: data.projectInfo });
|
||||
return;
|
||||
} catch {
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新页面时从 sessionStorage 读取（固定 key，不带 timestamp）
|
||||
const sessionRaw = sessionStorage.getItem(SESSION_KEY);
|
||||
if (sessionRaw) {
|
||||
try {
|
||||
const data: ChatDevData = JSON.parse(sessionRaw);
|
||||
set({ question: data.question, engine: data.engine, projectInfo: data.projectInfo });
|
||||
return;
|
||||
} catch {
|
||||
sessionStorage.removeItem(SESSION_KEY);
|
||||
}
|
||||
}
|
||||
},
|
||||
}));
|
||||
Reference in New Issue
Block a user