60 |
69 | )
70 | }
71 |
72 | if (error) {
73 | return (
74 |
61 |
62 |
68 |
63 |
64 |
65 |
66 |
67 |
75 |
86 | )
87 | }
88 |
89 | return (
90 |
76 |
85 | Error
77 |{error}
78 | 84 |
91 |
168 | )
169 | }
170 |
--------------------------------------------------------------------------------
/src/components/ChatInterface.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React from 'react'
4 | import { useChat } from 'ai/react'
5 | import ChatMessage from './ChatMessage'
6 | import MessageInput from './MessageInput'
7 | import { Message } from 'ai'
8 |
9 | interface ChatInterfaceProps {
10 | onNewSession?: (sessionId: string) => void
11 | sessionId?: string
12 | }
13 |
14 | export default function ChatInterface({ onNewSession, sessionId }: ChatInterfaceProps) {
15 | const { messages, input, handleInputChange, handleSubmit, isLoading, setMessages, error } = useChat({
16 | id: sessionId,
17 | api: '/api/chat',
18 | maxSteps: 35, // Allow multiple tool calls
19 | streamProtocol: 'text', // Add for debugging
20 | onError: async (error) => {
21 | console.error(' Full error object:', error);
22 |
23 | // Add check for stream error type that matches the pattern
24 | if (error.message?.includes('Stream error:') ||
25 | (error as any).type === 'error') {
26 | console.error(' Stream contained error detected:', error);
27 | }
28 |
29 | // Keep existing error handling logic
30 | if ((error as any).fullStream) {
31 | try {
32 | const fullStreamText = await (error as any).fullStream.text();
33 | console.error(' Full stream error details:', fullStreamText);
34 |
35 | try {
36 | const errorData = JSON.parse(fullStreamText);
37 | if (errorData.error) {
38 | console.error(' Parsed error:', errorData.error);
39 | }
40 | } catch (parseError) {
41 | // Stream might not be JSON, that's okay
42 | }
43 | } catch (streamError) {
44 | console.error(' Error parsing full stream:', streamError);
45 | }
46 | }
47 |
48 | if ((error as any).cause && typeof (error as any).cause === 'object') {
49 | console.error(' Error cause details:', (error as any).cause);
50 | }
51 | }, onFinish: async (message) => {
52 | // Message storage is now handled by the chat API
53 | // No need to store separately here
54 | }
55 | })
56 |
57 | // Enhanced input change handler to support textarea
58 | const handleInputChangeEnhanced = (e: React.ChangeEvent
92 |
102 |
103 | {stats && (
104 | 93 | 📎 Attachment Overview 94 |
95 | 101 |
105 | {/* Summary Stats */}
106 |
166 | )}
167 |
107 |
120 |
121 | {/* File Types Breakdown */}
122 | {Object.keys(stats.types).length > 0 ? (
123 |
108 |
113 |
109 | {stats.totalAttachments}
110 |
111 | Total Files
112 |
114 |
119 |
115 | {formatBytes(stats.totalSize)}
116 |
117 | Storage Used
118 |
124 |
145 | ) : (
146 | 125 | File Types 126 |
127 |
128 | {Object.entries(stats.types)
129 | .sort(([,a], [,b]) => b - a)
130 | .map(([type, count]) => (
131 |
144 |
132 |
142 | ))}
143 |
133 | {getFileTypeIcon(type)}
134 |
135 | {type.split('/')[1]?.toUpperCase() || type}
136 |
137 |
138 |
139 | {count} file{count > 1 ? 's' : ''}
140 |
141 |
147 |
151 | )}
152 |
153 | {/* Usage Tips */}
154 | 📎
148 | No attachments yet
149 |Start uploading files to see statistics
150 |
155 |
165 | 156 | 💡 Attachment Tips 157 |
158 |-
159 |
- • Drag and drop files directly into the chat input 160 |
- • Maximum file size: 10MB per file 161 |
- • Supports images, documents, code files, and more 162 |
- • Click attachment previews to download 163 |
107 | {/* Header */}
108 |
176 | )
177 | }
--------------------------------------------------------------------------------
/src/components/ChatMessage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Message } from 'ai'
3 | import ToolCallDisplay from './ToolCallDisplay'
4 |
5 | interface ChatMessageProps {
6 | message: Message
7 | }
8 |
9 | const AttachmentPreview: React.FC<{ attachment: any }> = ({ attachment }) => {
10 | // AI SDK FilePart can have 'data' (base64) or 'url'
11 | const isImage = attachment.type.startsWith('image/')
12 | const displaySrc = attachment.data ? `data:${attachment.type};base64,${attachment.data}` : attachment.url
13 |
14 | const handleDownload = () => {
15 | if (attachment.data) {
16 | const blob = new Blob([Uint8Array.from(atob(attachment.data), c => c.charCodeAt(0))], {
17 | type: attachment.type
18 | })
19 | const url = URL.createObjectURL(blob)
20 | const a = document.createElement('a')
21 | a.href = url
22 | a.download = attachment.name || 'download'
23 | document.body.appendChild(a)
24 | a.click()
25 | document.body.removeChild(a)
26 | URL.revokeObjectURL(url)
27 | } else if (attachment.url) {
28 | // For URLs, simply open in new tab or trigger download
29 | window.open(attachment.url, '_blank')
30 | }
31 | }
32 |
33 | if (isImage && displaySrc) {
34 | return (
35 |
109 |
116 |
117 | {/* Messages */}
118 | 110 | MCP Chat Client 111 |
112 |113 | AI Assistant with Dual-Layer Memory & File Support 114 |
115 |
119 | {messages.length === 0 ? (
120 |
167 |
168 | {/* Enhanced Input with Attachment Support */}
169 |
121 |
122 |
131 | ) : (
132 | messages.map((message: Message) => (
133 | Welcome to MCP Chat
123 |Your AI assistant with conscious memory
124 |
125 |
130 | Dual-layer memory system
126 |MCP tool integration
127 |File attachment support
128 |Persistent conversation history
129 |
141 |
146 | )}
147 | {error && (
148 |
142 |
143 | AI is thinking...
144 |
145 |
149 |
165 | )}
166 |
150 |
151 |
164 |
152 |
163 | Chat Error
153 |{error.message}
154 |
155 |
162 | 156 | Show technical details 157 |
158 |
159 | {error.stack || JSON.stringify(error, null, 2)}
160 |
161 |
36 | 
43 |
48 | )
49 | }
50 |
51 | // Generic file preview for non-images or if image source is missing
52 | return (
53 |
44 | {attachment.name || 'Image'}
45 | {attachment.size && {(attachment.size / 1024).toFixed(1)}KB}
46 |
47 |
54 |
85 | )
86 | }
87 |
88 | export default function ChatMessage({ message }: ChatMessageProps) {
89 | const isUser = message.role === 'user'
90 |
91 | return (
92 |
55 |
84 |
56 | {attachment.type?.includes('pdf') ? '📄' :
57 | attachment.type?.includes('text') ? '📝' :
58 | attachment.type?.includes('json') ? '🔧' :
59 | attachment.type?.includes('word') ? '📘' :
60 | attachment.type?.includes('excel') || attachment.type?.includes('sheet') ? '📊' :
61 | attachment.type?.includes('powerpoint') || attachment.type?.includes('presentation') ? '📽️' :
62 | attachment.type?.includes('javascript') || attachment.type?.includes('typescript') ? '💻' :
63 | attachment.type?.includes('html') ? '🌐' :
64 | attachment.type?.includes('css') ? '🎨' : '📎'}
65 |
66 |
67 |
68 |
75 |
76 |
83 |
69 | {attachment.name || 'Unknown File'}
70 |
71 |
72 | {attachment.type || 'application/octet-stream'} • {attachment.size ? `${(attachment.size / 1024).toFixed(1)}KB` : 'N/A'}
73 |
74 |
93 |
128 | )
129 | }
--------------------------------------------------------------------------------
/src/components/MessageInput.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef } from 'react'
2 |
3 | interface MessageInputProps {
4 | input: string
5 | handleInputChange: (e: React.ChangeEvent
98 | {/* Message Content and Parts */}
99 | {message.parts && message.parts.length > 0 && (
100 |
127 |
101 | {message.parts.map((part: any, index: number) => {
102 | switch (part.type) {
103 | case 'text':
104 | return
113 | )}
114 |
115 | {/* Tool Invocations */}
116 | {message.toolInvocations && message.toolInvocations.length > 0 && (
117 | {part.text}
105 | case 'file':
106 | return
118 | {message.toolInvocations.map((toolInvocation, index) => (
119 |
125 | )}
126 |
73 | {/* Files Preview */}
74 | {files && files.length > 0 && (
75 |
207 | )
208 | }
--------------------------------------------------------------------------------
/src/components/MotiveForceSettings.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { MotiveForceConfig } from '../types/motive-force';
3 |
4 | interface MotiveForceSettingsProps {
5 | isOpen: boolean;
6 | onClose: () => void;
7 | onSave: (config: MotiveForceConfig) => void;
8 | initialConfig: MotiveForceConfig;
9 | }
10 |
11 | export default function MotiveForceSettings({
12 | isOpen,
13 | onClose,
14 | onSave,
15 | initialConfig
16 | }: MotiveForceSettingsProps) {
17 | const [config, setConfig] = useState(initialConfig);
18 |
19 | if (!isOpen) return null;
20 |
21 | const handleSave = () => {
22 | onSave(config);
23 | onClose();
24 | };
25 |
26 | return (
27 |
76 | {Array.from(files).map((file, index) => (
77 |
109 | )}
110 |
111 |
206 |
81 | {/* File icon based on type */}
82 |
107 | ))}
108 |
83 | {file.type.startsWith('image/') ? '🖼️' :
84 | file.type.includes('pdf') ? '📄' :
85 | file.type.includes('text') ? '📝' :
86 | file.type.includes('code') ? '💻' : '📎'}
87 |
88 |
89 |
90 |
97 |
98 |
106 |
91 | {file.name}
92 |
93 |
94 | {(file.size / 1024).toFixed(1)}KB
95 |
96 |
28 |
148 | );
149 | }
150 |
--------------------------------------------------------------------------------
/src/components/MotiveForceStatus.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { MotiveForceState } from '../types/motive-force';
3 |
4 | interface MotiveForceStatusProps {
5 | state: MotiveForceState;
6 | onStop?: () => void;
7 | onReset?: () => void;
8 | }
9 |
10 | export default function MotiveForceStatus({
11 | state,
12 | onStop,
13 | onReset
14 | }: MotiveForceStatusProps) {
15 | if (!state.enabled && !state.isGenerating) return null;
16 |
17 | return (
18 |
29 |
147 | Autopilot Settings
30 | 31 |
32 | {/* Mode Selection */}
33 |
131 |
132 |
34 |
35 |
44 |
45 |
46 | {/* Temperature */}
47 |
48 |
51 | setConfig({ ...config, temperature: parseFloat(e.target.value) })}
58 | className="w-full"
59 | />
60 |
61 |
62 | {/* Delay Between Turns */}
63 |
64 |
67 | setConfig({ ...config, delayBetweenTurns: parseInt(e.target.value) })}
74 | className="w-full"
75 | />
76 |
77 |
78 | {/* Max Consecutive Turns */}
79 |
80 |
83 | setConfig({ ...config, maxConsecutiveTurns: parseInt(e.target.value) })}
89 | className="w-full px-3 py-2 border rounded-md"
90 | />
91 |
92 |
93 | {/* History Depth */}
94 |
95 |
98 | setConfig({ ...config, historyDepth: parseInt(e.target.value) })}
104 | className="w-full"
105 | />
106 |
107 |
108 | {/* Memory Options */}
109 |
110 |
119 |
120 |
129 |
130 |
133 |
139 |
145 |
146 |
23 |
77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/MotiveForceToggle.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface MotiveForceToggleProps {
4 | enabled: boolean;
5 | onToggle: (enabled: boolean) => void;
6 | size?: 'sm' | 'md' | 'lg';
7 | showLabel?: boolean;
8 | }
9 |
10 | export default function MotiveForceToggle({
11 | enabled,
12 | onToggle,
13 | size = 'md',
14 | showLabel = true
15 | }: MotiveForceToggleProps) {
16 | const sizeClasses = {
17 | sm: 'px-2 py-1 text-xs',
18 | md: 'px-3 py-1.5 text-sm',
19 | lg: 'px-4 py-2 text-base'
20 | };
21 |
22 | return (
23 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/ToolCallDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { ToolInvocation } from 'ai'
3 |
4 | interface ToolCallDisplayProps {
5 | toolInvocation: ToolInvocation
6 | }
7 |
8 | export default function ToolCallDisplay({ toolInvocation }: ToolCallDisplayProps) {
9 | // Check if the result explicitly indicates an error
10 | const isErrorResult = toolInvocation.state === 'result' &&
11 | toolInvocation.result &&
12 | typeof toolInvocation.result === 'object' &&
13 | ((toolInvocation.result as any).isError === true || (toolInvocation.result as any).error === true);
14 |
15 | // Determine which content to display for the result
16 | let resultDisplayContent: React.ReactNode =
24 |
33 |
34 |
76 |
35 |
55 |
56 |
36 | {state.isGenerating
37 | ? 'Generating next query...'
38 | : state.enabled
39 | ? `Autopilot active (Turn ${state.currentTurn})`
40 | : 'Autopilot ready'
41 | }
42 |
43 |
44 | {state.enabled && (
45 |
46 | {state.isGenerating
47 | ? 'Analyzing conversation context'
48 | : state.errorCount > 0
49 | ? `${state.errorCount} errors encountered`
50 | : 'Waiting for response completion'
51 | }
52 |
53 | )}
54 |
57 | {state.enabled && onStop && (
58 |
64 | )}
65 |
66 | {onReset && (
67 |
73 | )}
74 |
75 | No data available.
;
17 | if (isErrorResult) {
18 | const errorMessage = (toolInvocation.result as any).message || 'Unknown tool error.';
19 | const errorDetails = (toolInvocation.result as any).details || (toolInvocation.result as any).errorDetails || (toolInvocation.result as any).error; // Catch various detail fields
20 | resultDisplayContent = (
21 |
22 | Error: {errorMessage}
23 | {errorDetails && (
24 |
29 | );
30 | } else if ('result' in toolInvocation && toolInvocation.result) {
31 | resultDisplayContent = (
32 |
25 | {typeof errorDetails === 'string' ? errorDetails : JSON.stringify(errorDetails, null, 2)}
26 |
27 | )}
28 |
33 | Result:
34 |
41 | );
42 | } else if (toolInvocation.state === 'call') {
43 | resultDisplayContent = (
44 |
35 | {typeof toolInvocation.result === 'string'
36 | ? toolInvocation.result
37 | : JSON.stringify(toolInvocation.result, null, 2)
38 | }
39 |
40 |
45 |
46 | Executing...
47 |
48 | );
49 | }
50 |
51 | return (
52 |
56 |
72 | )
73 | }
74 |
--------------------------------------------------------------------------------
/src/config/default-mcp-servers.ts:
--------------------------------------------------------------------------------
1 | import { MCPServerConfig } from '../types/mcp';
2 | import { readFileSync } from 'fs';
3 | import { join } from 'path';
4 |
5 | export interface MCPConfig {
6 | mcp: {
7 | servers: {
8 | [serverName: string]: {
9 | command: string;
10 | args: string[];
11 | env?: { [key: string]: string };
12 | };
13 | };
14 | };
15 | }
16 |
17 | // Load configuration from config.json
18 | function loadMCPConfig(): MCPConfig {
19 | try {
20 | const configPath = join(process.cwd(), 'config.json');
21 | const configFile = readFileSync(configPath, 'utf8');
22 | const config = JSON.parse(configFile);
23 | return config as MCPConfig;
24 | } catch (error) {
25 | console.error('Failed to load config.json, using fallback configuration:', error);
26 | // Fallback configuration if config.json is not available
27 | return {
28 | mcp: {
29 | servers: {
30 | 'conscious-memory': {
31 | command: 'npx',
32 | args: ['tsx', './src/lib/mcp-servers/conscious-memory-server.ts']
33 | },
34 | 'knowledge-graph': {
35 | command: 'npx',
36 | args: ['tsx', './src/lib/mcp-servers/knowledge-graph-server.ts']
37 | }
38 | }
39 | }
40 | };
41 | }
42 | }
43 |
44 | export const mcpConfig: MCPConfig = loadMCPConfig();
45 |
46 | export function getMCPServerConfig(serverName: string): MCPServerConfig | undefined {
47 | const serverConfig = mcpConfig.mcp.servers[serverName];
48 | if (!serverConfig) return undefined;
49 |
50 | return {
51 | name: serverName,
52 | type: 'stdio',
53 | command: serverConfig.command,
54 | args: serverConfig.args
55 | };
56 | }
57 |
58 | export function getAllMCPServers(): MCPServerConfig[] {
59 | return Object.keys(mcpConfig.mcp.servers).map(serverName => ({
60 | name: serverName,
61 | type: 'stdio',
62 | command: mcpConfig.mcp.servers[serverName].command,
63 | args: mcpConfig.mcp.servers[serverName].args,
64 | env: mcpConfig.mcp.servers[serverName].env || {}
65 | }));
66 | }
--------------------------------------------------------------------------------
/src/lib/api-config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * API configuration with timeout support
3 | */
4 |
5 | interface ApiConfig {
6 | timeout?: number;
7 | retryOptions?: {
8 | maxAttempts?: number;
9 | initialDelay?: number;
10 | };
11 | }
12 |
13 | const DEFAULT_TIMEOUT = 30000; // 30 seconds
14 | const DEFAULT_RETRY_ATTEMPTS = 3;
15 |
16 | export function getApiConfig(): ApiConfig {
17 | return {
18 | timeout: parseInt(process.env.API_TIMEOUT || String(DEFAULT_TIMEOUT)),
19 | retryOptions: {
20 | maxAttempts: parseInt(process.env.API_RETRY_ATTEMPTS || String(DEFAULT_RETRY_ATTEMPTS)),
21 | initialDelay: parseInt(process.env.API_RETRY_DELAY || '1000'),
22 | },
23 | };
24 | }
25 |
26 | /**
27 | * Create an AbortController with timeout
28 | */
29 | export function createTimeoutController(timeoutMs: number = DEFAULT_TIMEOUT): AbortController {
30 | const controller = new AbortController();
31 |
32 | const timeoutId = setTimeout(() => {
33 | controller.abort(new Error(`Request timeout after ${timeoutMs}ms`));
34 | }, timeoutMs);
35 |
36 | // Clean up the timeout when the request completes
37 | const originalAbort = controller.abort.bind(controller);
38 | controller.abort = (reason?: any) => {
39 | clearTimeout(timeoutId);
40 | originalAbort(reason);
41 | };
42 |
43 | return controller;
44 | }
45 |
46 | /**
47 | * Fetch with timeout support
48 | */
49 | export async function fetchWithTimeout(
50 | url: string,
51 | options: RequestInit & { timeout?: number } = {}
52 | ): Promise
57 | 🔧 Tool: {toolInvocation.toolName}
58 |
59 |
60 | {toolInvocation.args && (
61 |
62 | Arguments:
63 |
67 | )}
68 |
69 | {resultDisplayContent}
70 |
71 |
64 | {JSON.stringify(toolInvocation.args, null, 2)}
65 |
66 |