d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-03-26 08:17:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: unified message architecture with provider adapters and session store (#558)

Browse Source 
- Add provider adapter layer (server/providers/) with registry pattern
    - Claude, Cursor, Codex, Gemini adapters normalize native formats to NormalizedMessage
    - Shared types.js defines ProviderAdapter interface and message kinds
    - Registry enables polymorphic provider lookup

  - Add unified REST endpoint: GET /api/sessions/:id/messages?provider=...
    - Replaces four provider-specific message endpoints with one
    - Delegates to provider adapters via registry

  - Add frontend session-keyed store (useSessionStore)
    - Per-session Map with serverMessages/realtimeMessages/merged
    - Dedup by ID, stale threshold for re-fetch, background session accumulation
    - No localStorage for messages — backend JSONL is source of truth

  - Add normalizedToChatMessages converter (useChatMessages)
    - Converts NormalizedMessage[] to existing ChatMessage[] UI format

  - Wire unified store into ChatInterface, useChatSessionState, useChatRealtimeHandlers
    - Session switch uses store cache for instant render
    - Background WebSocket messages routed to correct session slot
This commit is contained in:
Simos Mikelatos
2026-03-19 14:45:06 +01:00
committed by GitHub
parent 612390db53
commit a4632dc4ce
26 changed files with 2664 additions and 2549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/components/chat/hooks/useChatComposerState.ts
View File

@@ -52,8 +52,9 @@ interface UseChatComposerStateArgs {
onShowSettings?: () => void;
pendingViewSessionRef: { current: PendingViewSession | null };
scrollToBottom: () => void;
setChatMessages: Dispatch<SetStateAction<ChatMessage[]>>;
setSessionMessages?: Dispatch<SetStateAction<any[]>>;
addMessage: (msg: ChatMessage) => void;
clearMessages: () => void;
rewindMessages: (count: number) => void;
setIsLoading: (loading: boolean) => void;
setCanAbortSession: (canAbort: boolean) => void;
setClaudeStatus: (status: { text: string; tokens: number; can_interrupt: boolean } | null) => void;
@@ -123,8 +124,9 @@ export function useChatComposerState({
onShowSettings,
pendingViewSessionRef,
scrollToBottom,
setChatMessages,
setSessionMessages,
addMessage,
clearMessages,
rewindMessages,
setIsLoading,
setCanAbortSession,
setClaudeStatus,
@@ -155,69 +157,50 @@ export function useChatComposerState({
const { action, data } = result;
switch (action) {
case 'clear':
setChatMessages([]);
setSessionMessages?.([]);
clearMessages();
break;
case 'help':
setChatMessages((previous) => [
...previous,
{
type: 'assistant',
content: data.content,
timestamp: Date.now(),
},
]);
addMessage({
type: 'assistant',
content: data.content,
timestamp: Date.now(),
});
break;
case 'model':
setChatMessages((previous) => [
...previous,
{
type: 'assistant',
content: `**Current Model**: ${data.current.model}\n\n**Available Models**:\n\nClaude: ${data.available.claude.join(', ')}\n\nCursor: ${data.available.cursor.join(', ')}`,
timestamp: Date.now(),
},
]);
addMessage({
type: 'assistant',
content: `**Current Model**: ${data.current.model}\n\n**Available Models**:\n\nClaude: ${data.available.claude.join(', ')}\n\nCursor: ${data.available.cursor.join(', ')}`,
timestamp: Date.now(),
});
break;
case 'cost': {
const costMessage = `**Token Usage**: ${data.tokenUsage.used.toLocaleString()} / ${data.tokenUsage.total.toLocaleString()} (${data.tokenUsage.percentage}%)\n\n**Estimated Cost**:\n- Input: $${data.cost.input}\n- Output: $${data.cost.output}\n- **Total**: $${data.cost.total}\n\n**Model**: ${data.model}`;
setChatMessages((previous) => [
...previous,
{ type: 'assistant', content: costMessage, timestamp: Date.now() },
]);
addMessage({ type: 'assistant', content: costMessage, timestamp: Date.now() });
break;
}
case 'status': {
const statusMessage = `**System Status**\n\n- Version: ${data.version}\n- Uptime: ${data.uptime}\n- Model: ${data.model}\n- Provider: ${data.provider}\n- Node.js: ${data.nodeVersion}\n- Platform: ${data.platform}`;
setChatMessages((previous) => [
...previous,
{ type: 'assistant', content: statusMessage, timestamp: Date.now() },
]);
addMessage({ type: 'assistant', content: statusMessage, timestamp: Date.now() });
break;
}
case 'memory':
if (data.error) {
setChatMessages((previous) => [
...previous,
{
type: 'assistant',
content: `⚠️ ${data.message}`,
timestamp: Date.now(),
},
]);
addMessage({
type: 'assistant',
content: `Warning: ${data.message}`,
timestamp: Date.now(),
});
} else {
setChatMessages((previous) => [
...previous,
{
type: 'assistant',
content: `📝 ${data.message}\n\nPath: \`${data.path}\``,
timestamp: Date.now(),
},
]);
addMessage({
type: 'assistant',
content: `${data.message}\n\nPath: \`${data.path}\``,
timestamp: Date.now(),
});
if (data.exists && onFileOpen) {
onFileOpen(data.path);
}
@@ -230,24 +213,18 @@ export function useChatComposerState({
case 'rewind':
if (data.error) {
setChatMessages((previous) => [
...previous,
{
type: 'assistant',
content: `⚠️ ${data.message}`,
timestamp: Date.now(),
},
]);
addMessage({
type: 'assistant',
content: `Warning: ${data.message}`,
timestamp: Date.now(),
});
} else {
setChatMessages((previous) => previous.slice(0, -data.steps * 2));
setChatMessages((previous) => [
...previous,
{
type: 'assistant',
content: `⏪ ${data.message}`,
timestamp: Date.now(),
},
]);
rewindMessages(data.steps * 2);
addMessage({
type: 'assistant',
content: `Rewound ${data.steps} step(s). ${data.message}`,
timestamp: Date.now(),
});
}
break;
@@ -255,7 +232,7 @@ export function useChatComposerState({
console.warn('Unknown built-in command action:', action);
}
},
[onFileOpen, onShowSettings, setChatMessages, setSessionMessages],
[onFileOpen, onShowSettings, addMessage, clearMessages, rewindMessages],
);
const handleCustomCommand = useCallback(async (result: CommandExecutionResult) => {
@@ -266,14 +243,11 @@ export function useChatComposerState({
'This command contains bash commands that will be executed. Do you want to proceed?',
);
if (!confirmed) {
setChatMessages((previous) => [
...previous,
{
type: 'assistant',
content: '❌ Command execution cancelled',
timestamp: Date.now(),
},
]);
addMessage({
type: 'assistant',
content: 'Command execution cancelled',
timestamp: Date.now(),
});
return;
}
}
@@ -288,7 +262,7 @@ export function useChatComposerState({
handleSubmitRef.current(createFakeSubmitEvent());
}
}, 0);
}, [setChatMessages]);
}, [addMessage]);
const executeCommand = useCallback(
async (command: SlashCommand, rawInput?: string) => {
@@ -346,14 +320,11 @@ export function useChatComposerState({
} catch (error) {
const message = error instanceof Error ? error.message : 'Unknown error';
console.error('Error executing command:', error);
setChatMessages((previous) => [
...previous,
{
type: 'assistant',
content: `Error executing command: ${message}`,
timestamp: Date.now(),
},
]);
addMessage({
type: 'assistant',
content: `Error executing command: ${message}`,
timestamp: Date.now(),
});
}
},
[
@@ -367,7 +338,7 @@ export function useChatComposerState({
input,
provider,
selectedProject,
setChatMessages,
addMessage,
tokenBudget,
],
);
@@ -547,18 +518,19 @@ export function useChatComposerState({
} catch (error) {
const message = error instanceof Error ? error.message : 'Unknown error';
console.error('Image upload failed:', error);
setChatMessages((previous) => [
...previous,
{
type: 'error',
content: `Failed to upload images: ${message}`,
timestamp: new Date(),
},
]);
addMessage({
type: 'error',
content: `Failed to upload images: ${message}`,
timestamp: new Date(),
});
return;
}
}
const effectiveSessionId =
currentSessionId || selectedSession?.id || sessionStorage.getItem('cursorSessionId');
const sessionToActivate = effectiveSessionId || `new-session-${Date.now()}`;
const userMessage: ChatMessage = {
type: 'user',
content: currentInput,
@@ -566,7 +538,7 @@ export function useChatComposerState({
timestamp: new Date(),
};
setChatMessages((previous) => [...previous, userMessage]);
addMessage(userMessage);
setIsLoading(true); // Processing banner starts
setCanAbortSession(true);
setClaudeStatus({
@@ -578,10 +550,6 @@ export function useChatComposerState({
setIsUserScrolledUp(false);
setTimeout(() => scrollToBottom(), 100);
const effectiveSessionId =
currentSessionId || selectedSession?.id || sessionStorage.getItem('cursorSessionId');
const sessionToActivate = effectiveSessionId || `new-session-${Date.now()}`;
if (!effectiveSessionId && !selectedSession?.id) {
if (typeof window !== 'undefined') {
// Reset stale pending IDs from previous interrupted runs before creating a new one.
@@ -723,7 +691,7 @@ export function useChatComposerState({
selectedProject,
sendMessage,
setCanAbortSession,
setChatMessages,
addMessage,
setClaudeStatus,
setIsLoading,
setIsUserScrolledUp,

183
src/components/chat/hooks/useChatMessages.ts Normal file
View File

@@ -0,0 +1,183 @@
/**
* Message normalization utilities.
* Converts NormalizedMessage[] from the session store into ChatMessage[] for the UI.
*/
import type { NormalizedMessage } from '../../../stores/useSessionStore';
import type { ChatMessage, SubagentChildTool } from '../types/types';
import { decodeHtmlEntities, unescapeWithMathProtection, formatUsageLimitText } from '../utils/chatFormatting';
/**
* Convert NormalizedMessage[] from the session store into ChatMessage[]
* that the existing UI components expect.
*
* Internal/system content (e.g. <system-reminder>, <command-name>) is already
* filtered server-side by the Claude adapter (server/providers/utils.js).
*/
export function normalizedToChatMessages(messages: NormalizedMessage[]): ChatMessage[] {
const converted: ChatMessage[] = [];
// First pass: collect tool results for attachment
const toolResultMap = new Map<string, NormalizedMessage>();
for (const msg of messages) {
if (msg.kind === 'tool_result' && msg.toolId) {
toolResultMap.set(msg.toolId, msg);
}
}
for (const msg of messages) {
switch (msg.kind) {
case 'text': {
const content = msg.content || '';
if (!content.trim()) continue;
if (msg.role === 'user') {
// Parse task notifications
const taskNotifRegex = /<task-notification>\s*<task-id>[^<]*<\/task-id>\s*<output-file>[^<]*<\/output-file>\s*<status>([^<]*)<\/status>\s*<summary>([^<]*)<\/summary>\s*<\/task-notification>/g;
const taskNotifMatch = taskNotifRegex.exec(content);
if (taskNotifMatch) {
converted.push({
type: 'assistant',
content: taskNotifMatch[2]?.trim() || 'Background task finished',
timestamp: msg.timestamp,
isTaskNotification: true,
taskStatus: taskNotifMatch[1]?.trim() || 'completed',
});
} else {
converted.push({
type: 'user',
content: unescapeWithMathProtection(decodeHtmlEntities(content)),
timestamp: msg.timestamp,
});
}
} else {
let text = decodeHtmlEntities(content);
text = unescapeWithMathProtection(text);
text = formatUsageLimitText(text);
converted.push({
type: 'assistant',
content: text,
timestamp: msg.timestamp,
});
}
break;
}
case 'tool_use': {
const tr = msg.toolResult || (msg.toolId ? toolResultMap.get(msg.toolId) : null);
const isSubagentContainer = msg.toolName === 'Task';
// Build child tools from subagentTools
const childTools: SubagentChildTool[] = [];
if (isSubagentContainer && msg.subagentTools && Array.isArray(msg.subagentTools)) {
for (const tool of msg.subagentTools as any[]) {
childTools.push({
toolId: tool.toolId,
toolName: tool.toolName,
toolInput: tool.toolInput,
toolResult: tool.toolResult || null,
timestamp: new Date(tool.timestamp || Date.now()),
});
}
}
const toolResult = tr
? {
content: typeof tr.content === 'string' ? tr.content : JSON.stringify(tr.content),
isError: Boolean(tr.isError),
toolUseResult: (tr as any).toolUseResult,
}
: null;
converted.push({
type: 'assistant',
content: '',
timestamp: msg.timestamp,
isToolUse: true,
toolName: msg.toolName,
toolInput: typeof msg.toolInput === 'string' ? msg.toolInput : JSON.stringify(msg.toolInput ?? '', null, 2),
toolId: msg.toolId,
toolResult,
isSubagentContainer,
subagentState: isSubagentContainer
? {
childTools,
currentToolIndex: childTools.length > 0 ? childTools.length - 1 : -1,
isComplete: Boolean(toolResult),
}
: undefined,
});
break;
}
case 'thinking':
if (msg.content?.trim()) {
converted.push({
type: 'assistant',
content: unescapeWithMathProtection(msg.content),
timestamp: msg.timestamp,
isThinking: true,
});
}
break;
case 'error':
converted.push({
type: 'error',
content: msg.content || 'Unknown error',
timestamp: msg.timestamp,
});
break;
case 'interactive_prompt':
converted.push({
type: 'assistant',
content: msg.content || '',
timestamp: msg.timestamp,
isInteractivePrompt: true,
});
break;
case 'task_notification':
converted.push({
type: 'assistant',
content: msg.summary || 'Background task update',
timestamp: msg.timestamp,
isTaskNotification: true,
taskStatus: msg.status || 'completed',
});
break;
case 'stream_delta':
if (msg.content) {
converted.push({
type: 'assistant',
content: msg.content,
timestamp: msg.timestamp,
isStreaming: true,
});
}
break;
// stream_end, complete, status, permission_*, session_created
// are control events — not rendered as messages
case 'stream_end':
case 'complete':
case 'status':
case 'permission_request':
case 'permission_cancelled':
case 'session_created':
// Skip — these are handled by useChatRealtimeHandlers
break;
// tool_result is handled via attachment to tool_use above
case 'tool_result':
break;
default:
break;
}
}
return converted;
}

1259
src/components/chat/hooks/useChatRealtimeHandlers.ts
View File

File diff suppressed because it is too large Load Diff

746
src/components/chat/hooks/useChatSessionState.ts
View File

File diff suppressed because it is too large Load Diff

31
src/components/chat/utils/chatStorage.ts
View File

@@ -5,32 +5,12 @@ export const CLAUDE_SETTINGS_KEY = 'claude-settings';
export const safeLocalStorage = {
setItem: (key: string, value: string) => {
try {
if (key.startsWith('chat_messages_') && typeof value === 'string') {
try {
const parsed = JSON.parse(value);
if (Array.isArray(parsed) && parsed.length > 50) {
const truncated = parsed.slice(-50);
value = JSON.stringify(truncated);
}
} catch (parseError) {
console.warn('Could not parse chat messages for truncation:', parseError);
}
}
localStorage.setItem(key, value);
} catch (error: any) {
if (error?.name === 'QuotaExceededError') {
console.warn('localStorage quota exceeded, clearing old data');
const keys = Object.keys(localStorage);
const chatKeys = keys.filter((k) => k.startsWith('chat_messages_')).sort();
if (chatKeys.length > 3) {
chatKeys.slice(0, chatKeys.length - 3).forEach((k) => {
localStorage.removeItem(k);
});
}
const draftKeys = keys.filter((k) => k.startsWith('draft_input_'));
draftKeys.forEach((k) => {
localStorage.removeItem(k);
@@ -40,17 +20,6 @@ export const safeLocalStorage = {
localStorage.setItem(key, value);
} catch (retryError) {
console.error('Failed to save to localStorage even after cleanup:', retryError);
if (key.startsWith('chat_messages_') && typeof value === 'string') {
try {
const parsed = JSON.parse(value);
if (Array.isArray(parsed) && parsed.length > 10) {
const minimal = parsed.slice(-10);
localStorage.setItem(key, JSON.stringify(minimal));
}
} catch (finalError) {
console.error('Final save attempt failed:', finalError);
}
}
}
} else {
console.error('localStorage error:', error);

508
src/components/chat/utils/messageTransforms.ts
View File

@@ -1,6 +1,3 @@
import type { ChatMessage } from '../types/types';
import { decodeHtmlEntities, unescapeWithMathProtection } from './chatFormatting';
export interface DiffLine {
type: 'added' | 'removed';
content: string;
@@ -9,80 +6,6 @@ export interface DiffLine {
export type DiffCalculator = (oldStr: string, newStr: string) => DiffLine[];
type CursorBlob = {
id?: string;
sequence?: number;
rowid?: number;
content?: any;
};
const asArray = <T>(value: unknown): T[] => (Array.isArray(value) ? (value as T[]) : []);
const normalizeToolInput = (value: unknown): string => {
if (value === null || value === undefined || value === '') {
return '';
}
if (typeof value === 'string') {
return value;
}
try {
return JSON.stringify(value, null, 2);
} catch {
return String(value);
}
};
const CURSOR_INTERNAL_USER_BLOCK_PATTERNS = [
/<user_info>[\s\S]*?<\/user_info>/gi,
/<agent_skills>[\s\S]*?<\/agent_skills>/gi,
/<available_skills>[\s\S]*?<\/available_skills>/gi,
/<environment_context>[\s\S]*?<\/environment_context>/gi,
/<environment_info>[\s\S]*?<\/environment_info>/gi,
];
const extractCursorUserQuery = (rawText: string): string => {
const userQueryMatches = [...rawText.matchAll(/<user_query>([\s\S]*?)<\/user_query>/gi)];
if (userQueryMatches.length === 0) {
return '';
}
return userQueryMatches
.map((match) => (match[1] || '').trim())
.filter(Boolean)
.join('\n')
.trim();
};
const sanitizeCursorUserMessageText = (rawText: string): string => {
const decodedText = decodeHtmlEntities(rawText || '').trim();
if (!decodedText) {
return '';
}
// Cursor stores user-visible text inside <user_query> and prepends hidden context blocks
// (<user_info>, <agent_skills>, etc). We only render the actual query in chat history.
const extractedUserQuery = extractCursorUserQuery(decodedText);
if (extractedUserQuery) {
return extractedUserQuery;
}
let sanitizedText = decodedText;
CURSOR_INTERNAL_USER_BLOCK_PATTERNS.forEach((pattern) => {
sanitizedText = sanitizedText.replace(pattern, '');
});
return sanitizedText.trim();
};
const toAbsolutePath = (projectPath: string, filePath?: string) => {
if (!filePath) {
return filePath;
}
return filePath.startsWith('/') ? filePath : `${projectPath}/${filePath}`;
};
export const calculateDiff = (oldStr: string, newStr: string): DiffLine[] => {
const oldLines = oldStr.split('\n');
const newLines = newStr.split('\n');
@@ -162,434 +85,3 @@ export const createCachedDiffCalculator = (): DiffCalculator => {
return calculated;
};
};
export const convertCursorSessionMessages = (blobs: CursorBlob[], projectPath: string): ChatMessage[] => {
const converted: ChatMessage[] = [];
const toolUseMap: Record<string, ChatMessage> = {};
for (let blobIdx = 0; blobIdx < blobs.length; blobIdx += 1) {
const blob = blobs[blobIdx];
const content = blob.content;
let text = '';
let role: ChatMessage['type'] = 'assistant';
let reasoningText: string | null = null;
try {
if (content?.role && content?.content) {
if (content.role === 'system') {
continue;
}
if (content.role === 'tool') {
const toolItems = asArray<any>(content.content);
for (const item of toolItems) {
if (item?.type !== 'tool-result') {
continue;
}
const toolName = item.toolName === 'ApplyPatch' ? 'Edit' : item.toolName || 'Unknown Tool';
const toolCallId = item.toolCallId || content.id;
const result = item.result || '';
if (toolCallId && toolUseMap[toolCallId]) {
toolUseMap[toolCallId].toolResult = {
content: result,
isError: false,
};
} else {
converted.push({
type: 'assistant',
content: '',
timestamp: new Date(Date.now() + blobIdx * 1000),
blobId: blob.id,
sequence: blob.sequence,
rowid: blob.rowid,
isToolUse: true,
toolName,
toolId: toolCallId,
toolInput: normalizeToolInput(null),
toolResult: {
content: result,
isError: false,
},
});
}
}
continue;
}
role = content.role === 'user' ? 'user' : 'assistant';
if (Array.isArray(content.content)) {
const textParts: string[] = [];
for (const part of content.content) {
if (part?.type === 'text' && part?.text) {
textParts.push(decodeHtmlEntities(part.text));
continue;
}
if (part?.type === 'reasoning' && part?.text) {
reasoningText = decodeHtmlEntities(part.text);
continue;
}
if (part?.type === 'tool-call' || part?.type === 'tool_use') {
if (textParts.length > 0 || reasoningText) {
converted.push({
type: role,
content: textParts.join('\n'),
reasoning: reasoningText ?? undefined,
timestamp: new Date(Date.now() + blobIdx * 1000),
blobId: blob.id,
sequence: blob.sequence,
rowid: blob.rowid,
});
textParts.length = 0;
reasoningText = null;
}
const toolNameRaw = part.toolName || part.name || 'Unknown Tool';
const toolName = toolNameRaw === 'ApplyPatch' ? 'Edit' : toolNameRaw;
const toolId = part.toolCallId || part.id || `tool_${blobIdx}`;
let toolInput = part.args || part.input;
if (toolName === 'Edit' && part.args) {
if (part.args.patch) {
const patchLines = String(part.args.patch).split('\n');
const oldLines: string[] = [];
const newLines: string[] = [];
let inPatch = false;
patchLines.forEach((line) => {
if (line.startsWith('@@')) {
inPatch = true;
return;
}
if (!inPatch) {
return;
}
if (line.startsWith('-')) {
oldLines.push(line.slice(1));
} else if (line.startsWith('+')) {
newLines.push(line.slice(1));
} else if (line.startsWith(' ')) {
oldLines.push(line.slice(1));
newLines.push(line.slice(1));
}
});
toolInput = {
file_path: toAbsolutePath(projectPath, part.args.file_path),
old_string: oldLines.join('\n') || part.args.patch,
new_string: newLines.join('\n') || part.args.patch,
};
} else {
toolInput = part.args;
}
} else if (toolName === 'Read' && part.args) {
const filePath = part.args.path || part.args.file_path;
toolInput = {
file_path: toAbsolutePath(projectPath, filePath),
};
} else if (toolName === 'Write' && part.args) {
const filePath = part.args.path || part.args.file_path;
toolInput = {
file_path: toAbsolutePath(projectPath, filePath),
content: part.args.contents || part.args.content,
};
}
const toolMessage: ChatMessage = {
type: 'assistant',
content: '',
timestamp: new Date(Date.now() + blobIdx * 1000),
blobId: blob.id,
sequence: blob.sequence,
rowid: blob.rowid,
isToolUse: true,
toolName,
toolId,
toolInput: normalizeToolInput(toolInput),
toolResult: null,
};
converted.push(toolMessage);
toolUseMap[toolId] = toolMessage;
continue;
}
if (typeof part === 'string') {
textParts.push(part);
}
}
if (textParts.length > 0) {
text = textParts.join('\n');
if (reasoningText && !text) {
converted.push({
type: role,
content: '',
reasoning: reasoningText,
timestamp: new Date(Date.now() + blobIdx * 1000),
blobId: blob.id,
sequence: blob.sequence,
rowid: blob.rowid,
});
text = '';
}
} else {
text = '';
}
} else if (typeof content.content === 'string') {
text = content.content;
}
} else if (content?.message?.role && content?.message?.content) {
if (content.message.role === 'system') {
continue;
}
role = content.message.role === 'user' ? 'user' : 'assistant';
if (Array.isArray(content.message.content)) {
text = content.message.content
.map((part: any) => (typeof part === 'string' ? part : part?.text || ''))
.filter(Boolean)
.join('\n');
} else if (typeof content.message.content === 'string') {
text = content.message.content;
}
}
} catch (error) {
console.log('Error parsing blob content:', error);
}
if (role === 'user') {
text = sanitizeCursorUserMessageText(text);
}
if (text && text.trim()) {
const message: ChatMessage = {
type: role,
content: text,
timestamp: new Date(Date.now() + blobIdx * 1000),
blobId: blob.id,
sequence: blob.sequence,
rowid: blob.rowid,
};
if (reasoningText) {
message.reasoning = reasoningText;
}
converted.push(message);
}
}
converted.sort((messageA, messageB) => {
if (messageA.sequence !== undefined && messageB.sequence !== undefined) {
return Number(messageA.sequence) - Number(messageB.sequence);
}
if (messageA.rowid !== undefined && messageB.rowid !== undefined) {
return Number(messageA.rowid) - Number(messageB.rowid);
}
return new Date(messageA.timestamp).getTime() - new Date(messageB.timestamp).getTime();
});
return converted;
};
export const convertSessionMessages = (rawMessages: any[]): ChatMessage[] => {
const converted: ChatMessage[] = [];
const toolResults = new Map<
string,
{ content: unknown; isError: boolean; timestamp: Date; toolUseResult: unknown; subagentTools?: unknown[] }
>();
rawMessages.forEach((message) => {
if (message.message?.role === 'user' && Array.isArray(message.message?.content)) {
message.message.content.forEach((part: any) => {
if (part.type !== 'tool_result') {
return;
}
toolResults.set(part.tool_use_id, {
content: part.content,
isError: Boolean(part.is_error),
timestamp: new Date(message.timestamp || Date.now()),
toolUseResult: message.toolUseResult || null,
subagentTools: message.subagentTools,
});
});
}
});
rawMessages.forEach((message) => {
if (message.message?.role === 'user' && message.message?.content) {
let content = '';
if (Array.isArray(message.message.content)) {
const textParts: string[] = [];
message.message.content.forEach((part: any) => {
if (part.type === 'text') {
textParts.push(decodeHtmlEntities(part.text));
}
});
content = textParts.join('\n');
} else if (typeof message.message.content === 'string') {
content = decodeHtmlEntities(message.message.content);
} else {
content = decodeHtmlEntities(String(message.message.content));
}
const shouldSkip =
!content ||
content.startsWith('<command-name>') ||
content.startsWith('<command-message>') ||
content.startsWith('<command-args>') ||
content.startsWith('<local-command-stdout>') ||
content.startsWith('<system-reminder>') ||
content.startsWith('Caveat:') ||
content.startsWith('This session is being continued from a previous') ||
content.startsWith('[Request interrupted');
if (!shouldSkip) {
// Parse <task-notification> blocks into compact system messages
const taskNotifRegex = /<task-notification>\s*<task-id>[^<]*<\/task-id>\s*<output-file>[^<]*<\/output-file>\s*<status>([^<]*)<\/status>\s*<summary>([^<]*)<\/summary>\s*<\/task-notification>/g;
const taskNotifMatch = taskNotifRegex.exec(content);
if (taskNotifMatch) {
const status = taskNotifMatch[1]?.trim() || 'completed';
const summary = taskNotifMatch[2]?.trim() || 'Background task finished';
converted.push({
type: 'assistant',
content: summary,
timestamp: message.timestamp || new Date().toISOString(),
isTaskNotification: true,
taskStatus: status,
});
} else {
converted.push({
type: 'user',
content: unescapeWithMathProtection(content),
timestamp: message.timestamp || new Date().toISOString(),
});
}
}
return;
}
if (message.type === 'thinking' && message.message?.content) {
converted.push({
type: 'assistant',
content: unescapeWithMathProtection(message.message.content),
timestamp: message.timestamp || new Date().toISOString(),
isThinking: true,
});
return;
}
if (message.type === 'tool_use' && message.toolName) {
converted.push({
type: 'assistant',
content: '',
timestamp: message.timestamp || new Date().toISOString(),
isToolUse: true,
toolName: message.toolName,
toolInput: normalizeToolInput(message.toolInput),
toolCallId: message.toolCallId,
});
return;
}
if (message.type === 'tool_result') {
for (let index = converted.length - 1; index >= 0; index -= 1) {
const convertedMessage = converted[index];
if (!convertedMessage.isToolUse || convertedMessage.toolResult) {
continue;
}
if (!message.toolCallId || convertedMessage.toolCallId === message.toolCallId) {
convertedMessage.toolResult = {
content: message.output || '',
isError: false,
};
break;
}
}
return;
}
if (message.message?.role === 'assistant' && message.message?.content) {
if (Array.isArray(message.message.content)) {
message.message.content.forEach((part: any) => {
if (part.type === 'text') {
let text = part.text;
if (typeof text === 'string') {
text = unescapeWithMathProtection(text);
}
converted.push({
type: 'assistant',
content: text,
timestamp: message.timestamp || new Date().toISOString(),
});
return;
}
if (part.type === 'tool_use') {
const toolResult = toolResults.get(part.id);
const isSubagentContainer = part.name === 'Task';
// Build child tools from server-provided subagentTools data
const childTools: import('../types/types').SubagentChildTool[] = [];
if (isSubagentContainer && toolResult?.subagentTools && Array.isArray(toolResult.subagentTools)) {
for (const tool of toolResult.subagentTools as any[]) {
childTools.push({
toolId: tool.toolId,
toolName: tool.toolName,
toolInput: tool.toolInput,
toolResult: tool.toolResult || null,
timestamp: new Date(tool.timestamp || Date.now()),
});
}
}
converted.push({
type: 'assistant',
content: '',
timestamp: message.timestamp || new Date().toISOString(),
isToolUse: true,
toolName: part.name,
toolInput: normalizeToolInput(part.input),
toolId: part.id,
toolResult: toolResult
? {
content:
typeof toolResult.content === 'string'
? toolResult.content
: JSON.stringify(toolResult.content),
isError: toolResult.isError,
toolUseResult: toolResult.toolUseResult,
}
: null,
toolError: toolResult?.isError || false,
toolResultTimestamp: toolResult?.timestamp || new Date(),
isSubagentContainer,
subagentState: isSubagentContainer
? {
childTools,
currentToolIndex: childTools.length > 0 ? childTools.length - 1 : -1,
isComplete: Boolean(toolResult),
}
: undefined,
});
}
});
return;
}
if (typeof message.message.content === 'string') {
converted.push({
type: 'assistant',
content: unescapeWithMathProtection(message.message.content),
timestamp: message.timestamp || new Date().toISOString(),
});
}
}
});
return converted;
};

46
src/components/chat/view/ChatInterface.tsx
View File

@@ -3,10 +3,12 @@ import { useTranslation } from 'react-i18next';
import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
import { QuickSettingsPanel } from '../../quick-settings-panel';
import type { ChatInterfaceProps, Provider } from '../types/types';
import type { SessionProvider } from '../../../types/app';
import { useChatProviderState } from '../hooks/useChatProviderState';
import { useChatSessionState } from '../hooks/useChatSessionState';
import { useChatRealtimeHandlers } from '../hooks/useChatRealtimeHandlers';
import { useChatComposerState } from '../hooks/useChatComposerState';
import { useSessionStore } from '../../../stores/useSessionStore';
import ChatMessagesPane from './subcomponents/ChatMessagesPane';
import ChatComposer from './subcomponents/ChatComposer';
@@ -43,8 +45,10 @@ function ChatInterface({
const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
const { t } = useTranslation('chat');
const sessionStore = useSessionStore();
const streamBufferRef = useRef('');
const streamTimerRef = useRef<number | null>(null);
const accumulatedStreamRef = useRef('');
const pendingViewSessionRef = useRef<PendingViewSession | null>(null);
const resetStreamingState = useCallback(() => {
@@ -53,6 +57,7 @@ function ChatInterface({
streamTimerRef.current = null;
}
streamBufferRef.current = '';
accumulatedStreamRef.current = '';
}, []);
const {
@@ -76,18 +81,17 @@ function ChatInterface({
const {
chatMessages,
setChatMessages,
addMessage,
clearMessages,
rewindMessages,
isLoading,
setIsLoading,
currentSessionId,
setCurrentSessionId,
sessionMessages,
setSessionMessages,
isLoadingSessionMessages,
isLoadingMoreMessages,
hasMoreMessages,
totalMessages,
setIsSystemSessionChange,
canAbortSession,
setCanAbortSession,
isUserScrolledUp,
@@ -109,7 +113,6 @@ function ChatInterface({
scrollToBottom,
scrollToBottomAndReset,
handleScroll,
loadSessionMessages,
} = useChatSessionState({
selectedProject,
selectedSession,
@@ -120,6 +123,7 @@ function ChatInterface({
processingSessions,
resetStreamingState,
pendingViewSessionRef,
sessionStore,
});
const {
@@ -189,8 +193,9 @@ function ChatInterface({
onShowSettings,
pendingViewSessionRef,
scrollToBottom,
setChatMessages,
setSessionMessages,
addMessage,
clearMessages,
rewindMessages,
setIsLoading,
setCanAbortSession,
setClaudeStatus,
@@ -198,22 +203,19 @@ function ChatInterface({
setPendingPermissionRequests,
});
// On WebSocket reconnect, re-fetch the current session's messages from JSONL so missed
// streaming events (e.g. from long tool calls while iOS had the tab backgrounded) are shown.
// Also reset isLoading — if the server restarted or the session died mid-stream, the client
// would be stuck in "Processing..." forever without this reset.
// On WebSocket reconnect, re-fetch the current session's messages from the server
// so missed streaming events are shown. Also reset isLoading.
const handleWebSocketReconnect = useCallback(async () => {
if (!selectedProject || !selectedSession) return;
const provider = (localStorage.getItem('selected-provider') as any) || 'claude';
const messages = await loadSessionMessages(selectedProject.name, selectedSession.id, false, provider);
if (messages && messages.length > 0) {
setChatMessages(messages);
}
// Reset loading state — if the session is still active, new WebSocket messages will
// set it back to true. If it died, this clears the permanent frozen state.
const providerVal = (localStorage.getItem('selected-provider') as SessionProvider) || 'claude';
await sessionStore.refreshFromServer(selectedSession.id, {
provider: (selectedSession.__provider || providerVal) as SessionProvider,
projectName: selectedProject.name,
projectPath: selectedProject.fullPath || selectedProject.path || '',
});
setIsLoading(false);
setCanAbortSession(false);
}, [selectedProject, selectedSession, loadSessionMessages, setChatMessages, setIsLoading, setCanAbortSession]);
}, [selectedProject, selectedSession, sessionStore, setIsLoading, setCanAbortSession]);
useChatRealtimeHandlers({
latestMessage,
@@ -222,22 +224,22 @@ function ChatInterface({
selectedSession,
currentSessionId,
setCurrentSessionId,
setChatMessages,
setIsLoading,
setCanAbortSession,
setClaudeStatus,
setTokenBudget,
setIsSystemSessionChange,
setPendingPermissionRequests,
pendingViewSessionRef,
streamBufferRef,
streamTimerRef,
accumulatedStreamRef,
onSessionInactive,
onSessionProcessing,
onSessionNotProcessing,
onReplaceTemporarySession,
onNavigateToSession,
onWebSocketReconnect: handleWebSocketReconnect,
sessionStore,
});
useEffect(() => {
@@ -319,7 +321,7 @@ function ChatInterface({
isLoadingMoreMessages={isLoadingMoreMessages}
hasMoreMessages={hasMoreMessages}
totalMessages={totalMessages}
sessionMessagesCount={sessionMessages.length}
sessionMessagesCount={chatMessages.length}
visibleMessageCount={visibleMessageCount}
visibleMessages={visibleMessages}
loadEarlierMessages={loadEarlierMessages}