127 lines
4.6 KiB
TypeScript
127 lines
4.6 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
import { FileIcon, FolderIcon, RefreshCwIcon, TrashIcon } from 'lucide-react';
|
|
import { useChatDevStore } from '../store';
|
|
import { useCodeGraphStore } from '@/pages/code-graph/store';
|
|
|
|
export const OpencodeChat = () => {
|
|
const {
|
|
question, projectInfo,
|
|
sessionId, isLoading,
|
|
saveSessionInfo, loadSessionInfo, fetchSession, fetchMessages, clearSession,
|
|
setData,
|
|
} = useChatDevStore(
|
|
useShallow((s) => ({
|
|
question: s.question,
|
|
projectInfo: s.projectInfo,
|
|
setData: s.setData,
|
|
sessionId: s.sessionId,
|
|
isLoading: s.isLoading,
|
|
saveSessionInfo: s.saveSessionInfo,
|
|
loadSessionInfo: s.loadSessionInfo,
|
|
fetchSession: s.fetchSession,
|
|
fetchMessages: s.fetchMessages,
|
|
clearSession: s.clearSession,
|
|
})),
|
|
);
|
|
const codeGraphStore = useCodeGraphStore(useShallow((s) => ({
|
|
createQuestion: s.createQuestion,
|
|
url: s.url,
|
|
})));
|
|
|
|
// 初始化后尝试从 sessionStorage 恢复 opencode session 并加载历史消息
|
|
useEffect(() => {
|
|
if (!codeGraphStore.url) return;
|
|
const info = loadSessionInfo();
|
|
if (info) {
|
|
fetchSession(info.sessionId);
|
|
fetchMessages(info.sessionId);
|
|
}
|
|
}, [codeGraphStore.url]);
|
|
|
|
const relativePath = projectInfo
|
|
? (projectInfo.filepath || '').replace((projectInfo.projectPath || '') + '/', '') || '/'
|
|
: null;
|
|
|
|
const onSend = async () => {
|
|
const res = await codeGraphStore.createQuestion({
|
|
question,
|
|
projectPath: projectInfo?.projectPath,
|
|
engine: 'opencode',
|
|
sessionId: sessionId || undefined,
|
|
});
|
|
console.log(res);
|
|
if (res?.code === 200 && res?.data) {
|
|
const { sessionId: newSessionId, messageId: newMessageId } = res.data as any;
|
|
if (newSessionId) {
|
|
saveSessionInfo(newSessionId, newMessageId || '');
|
|
fetchMessages(newSessionId);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className='w-full max-w-2xl rounded-xl border border-white/10 bg-slate-900 shadow-2xl flex flex-col'>
|
|
{/* Session 信息栏 */}
|
|
{sessionId && (
|
|
<div className='flex items-center gap-2 px-4 py-2 border-b border-white/10'>
|
|
<span className='flex items-center gap-1 text-xs text-slate-400 ml-auto'>
|
|
<span className='truncate max-w-[160px]' title={sessionId}>
|
|
Session: {sessionId.slice(0, 8)}...
|
|
</span>
|
|
<button
|
|
title='刷新消息'
|
|
onClick={() => fetchMessages(sessionId)}
|
|
className='p-1 rounded hover:text-emerald-400 transition-colors'>
|
|
<RefreshCwIcon className='size-3' />
|
|
</button>
|
|
<button
|
|
title='清除 Session'
|
|
onClick={clearSession}
|
|
className='p-1 rounded hover:text-red-400 transition-colors'>
|
|
<TrashIcon className='size-3' />
|
|
</button>
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* 内容区 */}
|
|
<div className='px-4 py-4 flex flex-col gap-4'>
|
|
{/* 节点信息 */}
|
|
{relativePath && (
|
|
<div className='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 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>
|
|
)}
|
|
|
|
{/* 问题输入区 */}
|
|
<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
|
|
disabled={isLoading}
|
|
className='w-full rounded-lg bg-emerald-600 hover:bg-emerald-500 active:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-medium py-2 transition-colors'
|
|
onClick={onSend}>
|
|
{isLoading ? '处理中...' : '发送'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|