89 |
173 | );
174 | };
175 |
--------------------------------------------------------------------------------
/src/components/CodeDisplay.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { Button } from '@/components/ui/button';
3 | import { Clipboard, Check } from 'lucide-react';
4 | import { highlightCode } from '@/utils/highlightUtils';
5 | // We still need the CSS though
6 | import 'highlight.js/styles/github-dark.css';
7 |
8 | interface CodeDisplayProps {
9 | code: string;
10 | maxHeight?: string;
11 | showLineNumbers?: boolean;
12 | language?: string;
13 | }
14 |
15 | export function CodeDisplay({
16 | code,
17 | maxHeight = '300px',
18 | showLineNumbers = true,
19 | language,
20 | }: CodeDisplayProps) {
21 | const [copied, setCopied] = useState(false);
22 | const [highlightedCode, setHighlightedCode] = useState('');
23 |
24 | useEffect(() => {
25 | if (!code) return;
26 |
27 | // Use our shared utility
28 | setHighlightedCode(highlightCode(code, language, true, 1000).code);
29 | }, [code, language]);
30 |
31 | if (!code) return null;
32 |
33 | const handleCopy = () => {
34 | navigator.clipboard.writeText(code);
35 | setCopied(true);
36 | setTimeout(() => setCopied(false), 2000);
37 | };
38 |
39 | const lines = code.split('\n');
40 |
41 | return (
42 |
90 |
124 |
91 |
104 |
107 |
115 |
123 |
125 |
138 | {showConsole && (
139 |
126 |
136 |
137 |
140 |
149 |
170 |
171 | )}
172 |
141 | Console
142 |
148 |
143 |
146 |
147 |
150 | {logs.map((log, i) => (
151 |
169 |
161 | {log.args.map((arg, j) => (
162 |
163 | {typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)}{' '}
164 |
165 | ))}
166 |
167 | ))}
168 |
43 |
79 | );
80 | }
81 |
--------------------------------------------------------------------------------
/src/components/DeleteConversationConfirmationDialog.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import {
3 | Dialog,
4 | DialogContent,
5 | DialogDescription,
6 | DialogFooter,
7 | DialogHeader,
8 | DialogTitle,
9 | } from '@/components/ui/dialog';
10 | import { Button } from '@/components/ui/button';
11 | import { Loader2 } from 'lucide-react';
12 | import { useApi } from '@/contexts/ApiContext';
13 | import { conversations$, selectedConversation$ } from '@/stores/conversations';
14 | import { useQueryClient } from '@tanstack/react-query';
15 | import { use$ } from '@legendapp/state/react';
16 | import { demoConversations } from '@/democonversations';
17 |
18 | interface Props {
19 | conversationName: string;
20 | open: boolean;
21 | onOpenChange: (open: boolean) => void;
22 | onDelete: () => void;
23 | }
24 |
25 | export function DeleteConversationConfirmationDialog({
26 | conversationName,
27 | open,
28 | onOpenChange,
29 | onDelete,
30 | }: Props) {
31 | const { deleteConversation, connectionConfig, isConnected$ } = useApi();
32 | const queryClient = useQueryClient();
33 | const isConnected = use$(isConnected$);
34 | const [isDeleting, setIsDeleting] = useState(false);
35 | const [isError, setIsError] = useState(false);
36 | const [errorMessage, setErrorMessage] = useState
44 |
52 |
53 |
54 | {/* Single scrollable container for both line numbers and code */}
55 |
56 |
78 |
57 | {showLineNumbers && lines.length > 1 && (
58 |
77 |
59 | {lines.map((_, i) => (
60 |
65 | )}
66 |
67 |
61 | {i + 1}
62 |
63 | ))}
64 |
68 | {highlightedCode ? (
69 |
76 |
70 |
72 | ) : (
73 | {code}
74 | )}
75 |
70 |
131 | );
132 | };
133 |
--------------------------------------------------------------------------------
/src/components/MenuBar.tsx:
--------------------------------------------------------------------------------
1 | import { ThemeToggle } from './ThemeToggle';
2 | import { ConnectionButton } from './ConnectionButton';
3 | import { Button } from './ui/button';
4 | import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-react';
5 | import {
6 | leftSidebarVisible$,
7 | rightSidebarVisible$,
8 | toggleLeftSidebar,
9 | toggleRightSidebar,
10 | } from '@/stores/sidebar';
11 | import { use$ } from '@legendapp/state/react';
12 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
13 |
14 | import type { FC } from 'react';
15 |
16 | export const MenuBar: FC = () => {
17 | const leftVisible = use$(leftSidebarVisible$);
18 | const rightVisible = use$(rightSidebarVisible$);
19 |
20 | return (
21 |
71 |
130 |
72 |
96 | Conversations
73 |
74 |
75 |
76 |
77 |
89 |
90 | {!isConnected ? 'Connect to create new conversations' : 'Create new conversation'}
91 |
92 |
93 |
94 |
95 |
78 |
87 |
88 |
97 |
129 |
107 |
128 |
108 |
114 |
127 |
22 |
63 | );
64 | };
65 |
--------------------------------------------------------------------------------
/src/components/MessageAvatar.tsx:
--------------------------------------------------------------------------------
1 | import { Bot, User, Terminal } from 'lucide-react';
2 | import type { MessageRole } from '@/types/conversation';
3 | import { type Observable } from '@legendapp/state';
4 | import { use$ } from '@legendapp/state/react';
5 |
6 | interface MessageAvatarProps {
7 | role$: Observable
23 |
24 |
25 |
26 |
33 |
34 |
35 | {leftVisible ? 'Hide conversations' : 'Show conversations'}
36 |
37 |
38 |
39 | 
40 | gptme
41 |
42 |
40 | gptme
41 |
43 |
46 |
47 |
48 |
55 |
56 |
57 | {rightVisible ? 'Hide sidebar' : 'Show sidebar'}
58 |
59 |
60 |
61 |
62 |
37 | {role === 'assistant' ? (
38 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/RightSidebar.tsx:
--------------------------------------------------------------------------------
1 | import { Monitor, Settings, Globe, FolderOpen } from 'lucide-react';
2 | import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
3 | import { useState } from 'react';
4 | import type { FC } from 'react';
5 |
6 | interface Props {
7 | conversationId: string;
8 | }
9 | import { ConversationSettings } from './ConversationSettings';
10 | import { BrowserPreview } from './BrowserPreview';
11 | import { WorkspaceExplorer } from './workspace/WorkspaceExplorer';
12 |
13 | const VNC_URL = 'http://localhost:6080/vnc.html';
14 |
15 | export const RightSidebar: FC
20 |
72 | );
73 | };
74 |
--------------------------------------------------------------------------------
/src/components/TabbedCodeBlock.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef, useEffect } from 'react';
2 | import { getCodeBlockEmoji } from '@/utils/markdownUtils';
3 | import * as smd from '@/utils/smd';
4 | import { customRenderer } from '@/utils/markdownRenderer';
5 |
6 | /**
7 | * Props for the TabbedCodeBlock component
8 | */
9 | interface TabbedCodeBlockProps {
10 | /** The language or file extension of the code */
11 | language?: string;
12 | /** The raw code content to display */
13 | codeText: string;
14 | /** The code element to display */
15 | code: HTMLElement;
16 | }
17 |
18 | /**
19 | * TabbedCodeBlock renders a code block with tabs for switching between
20 | * code view and preview. Preview is only available for markdown and HTML content.
21 | *
22 | * For markdown content, it uses the streaming markdown parser to render the preview.
23 | * For HTML content, it uses a sandboxed iframe to prevent XSS attacks.
24 | */
25 | export const TabbedCodeBlock: React.FC
21 |
26 |
70 |
71 |
27 |
28 |
29 |
32 |
33 |
36 |
37 |
40 |
41 |
44 |
45 |
46 |
47 |
48 |
49 |
51 |
52 |
53 |
55 |
56 |
57 |
63 |
64 |
65 |
66 |
68 |
69 |
60 |
111 | );
112 | };
113 |
--------------------------------------------------------------------------------
/src/components/ThemeToggle.tsx:
--------------------------------------------------------------------------------
1 | import { Moon, Sun } from 'lucide-react';
2 | import { Button } from '@/components/ui/button';
3 | import { useEffect, useState } from 'react';
4 | import type { FC } from 'react';
5 |
6 | export const ThemeToggle: FC = () => {
7 | const [theme, setTheme] = useState<'light' | 'dark'>('light');
8 |
9 | useEffect(() => {
10 | const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
11 | setTheme(isDark ? 'dark' : 'light');
12 | }, []);
13 |
14 | useEffect(() => {
15 | document.documentElement.classList.toggle('dark', theme === 'dark');
16 | }, [theme]);
17 |
18 | return (
19 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/__tests__/ChatMessage.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import { ChatMessage } from '../ChatMessage';
3 | import '@testing-library/jest-dom';
4 | import type { Message } from '@/types/conversation';
5 | import { observable } from '@legendapp/state';
6 |
7 | // Mock the ApiContext
8 | jest.mock('@/contexts/ApiContext', () => ({
9 | useApi: () => ({
10 | baseUrl: 'http://localhost:5700',
11 | }),
12 | }));
13 |
14 | describe('ChatMessage', () => {
15 | const testConversationId = 'test-conversation';
16 |
17 | it('renders user message', () => {
18 | const message$ = observable
61 |
71 | {hasPreview && (
72 |
82 | )}
83 |
84 |
85 |
86 |
90 | {renderError && activeTab === 'preview' && (
91 |
110 |
92 | {renderError}
93 |
94 | )}
95 |
101 | {language === 'html' && (
102 |
108 | )}
109 |
41 | {fields.map((field, index) => (
42 |
68 |
43 |
49 |
55 |
65 |
66 | ))}
67 |
69 | setNewEnvKey(e.target.value)}
73 | disabled={isSubmitting}
74 | className="w-1/3"
75 | />
76 | setNewEnvValue(e.target.value)}
80 | disabled={isSubmitting}
81 | className="flex-grow"
82 | onKeyDown={(e) => {
83 | if (e.key === 'Enter') {
84 | e.preventDefault();
85 | handleAddEnvVar();
86 | }
87 | }}
88 | />
89 |
99 |
100 | {description &&
46 | (
52 |
53 | Tool Format
54 |
72 |
74 | )}
75 | />
76 |
77 |
78 |
79 |
80 |
89 | List of tools that the agent can use.
90 |
91 |
92 |
93 |
133 |
134 |
135 |
136 | );
137 | };
138 |
--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as AccordionPrimitive from '@radix-ui/react-accordion';
3 | import { ChevronDown } from 'lucide-react';
4 |
5 | import { cn } from '@/lib/utils';
6 |
7 | const Accordion = AccordionPrimitive.Root;
8 |
9 | const AccordionItem = React.forwardRef<
10 | React.ElementRefTools
47 | 48 |
81 | Enabled Tools
82 | {toolsOpen ? (
83 |
88 |
94 | {fields.map((field, index) => (
95 |
110 |
96 | {field.name}
97 |
107 |
108 | ))}
109 |
111 | setNewToolName(e.target.value)}
115 | disabled={isSubmitting}
116 | onKeyDown={(e) => {
117 | if (e.key === 'Enter') {
118 | e.preventDefault();
119 | handleAddTool();
120 | }
121 | }}
122 | />
123 |
131 |
132 | {children}
47 |
43 |
53 | ));
54 |
55 | CommandInput.displayName = CommandPrimitive.Input.displayName;
56 |
57 | const CommandList = React.forwardRef<
58 | React.ElementRef152 | {body} 153 |
154 | ); 155 | }); 156 | FormMessage.displayName = 'FormMessage'; 157 | 158 | export { 159 | useFormField, 160 | Form, 161 | FormItem, 162 | FormLabel, 163 | FormControl, 164 | FormDescription, 165 | FormMessage, 166 | FormField, 167 | }; 168 | -------------------------------------------------------------------------------- /src/components/ui/hover-card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as HoverCardPrimitive from '@radix-ui/react-hover-card'; 3 | 4 | import { cn } from '@/lib/utils'; 5 | 6 | const HoverCard = HoverCardPrimitive.Root; 7 | 8 | const HoverCardTrigger = HoverCardPrimitive.Trigger; 9 | 10 | const HoverCardContent = React.forwardRef< 11 | React.ElementRef
48 | {char}
49 | {hasFakeCaret && (
50 |
55 | );
56 | });
57 | InputOTPSlot.displayName = 'InputOTPSlot';
58 |
59 | const InputOTPSeparator = React.forwardRef<
60 | React.ElementRef<'div'>,
61 | React.ComponentPropsWithoutRef<'div'>
62 | >(({ ...props }, ref) => (
63 |
51 |
52 |
53 | )}
54 |
64 |
66 | ));
67 | InputOTPSeparator.displayName = 'InputOTPSeparator';
68 |
69 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
70 |
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { cn } from '@/lib/utils';
4 |
5 | export type InputProps = React.InputHTMLAttributes
81 |
90 | ));
91 | NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
92 |
93 | const NavigationMenuIndicator = React.forwardRef<
94 | React.ElementRef
34 |
36 | )}
37 |
8 |
9 |
10 | )
11 | );
12 | Table.displayName = 'Table';
13 |
14 | const TableHeader = React.forwardRef<
15 | HTMLTableSectionElement,
16 | React.HTMLAttributes
20 | {title && {title} }
21 | {description && {description} }
22 |
23 | {action}
24 |
104 | {currentPath && (
105 |
114 | )}
115 | {files.map((file) => (
116 |
139 | ))}
140 |
141 |
40 |
42 | );
43 | }
44 |
45 | if (error) {
46 | return {error}
;
47 | }
48 |
49 | if (!preview) {
50 | return null;
51 | }
52 |
53 | switch (preview.type) {
54 | case 'text':
55 | return (
56 |
57 |
76 | );
77 | case 'image':
78 | return (
79 |
58 |
68 | {file.name}
59 |
60 |
67 |
61 | {(file.size / 1024).toFixed(1)} KB • {file.mime_type || 'Unknown type'}
62 |
63 |
64 | Modified {formatDistanceToNow(new Date(file.modified), { addSuffix: true })}
65 |
66 |
69 |
75 |
80 |
99 | );
100 | case 'binary':
101 | return (
102 |
81 |
91 | {file.name}
82 |
83 |
90 |
84 | {(file.size / 1024).toFixed(1)} KB • {file.mime_type || 'Unknown type'}
85 |
86 |
87 | Modified {formatDistanceToNow(new Date(file.modified), { addSuffix: true })}
88 |
89 |
92 | 
97 |
98 |
103 |
118 | );
119 | default:
120 | return null;
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/src/components/workspace/PathSegments.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@/components/ui/button';
2 | import { ChevronRight } from 'lucide-react';
3 |
4 | interface PathSegmentsProps {
5 | path: string;
6 | onNavigate: (path: string) => void;
7 | }
8 |
9 | export function PathSegments({ path, onNavigate }: PathSegmentsProps) {
10 | const segments = path ? path.split('/') : [];
11 |
12 | return (
13 |
104 |
114 | {file.name}
105 |
106 |
113 |
107 | {(file.size / 1024).toFixed(1)} KB • {file.mime_type || 'Unknown type'}
108 |
109 |
110 | Modified {formatDistanceToNow(new Date(file.modified), { addSuffix: true })}
111 |
112 |
115 |
117 | Binary file
116 |
14 |
17 | {segments.map((segment, index) => {
18 | if (!segment) return null;
19 | const segmentPath = segments.slice(0, index + 1).join('/');
20 | return (
21 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/workspace/WorkspaceExplorer.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useCallback } from 'react';
2 | import { Loader2 } from 'lucide-react';
3 | import { useWorkspaceApi } from '@/utils/workspaceApi';
4 | import { FileList } from './FileList';
5 | import { FilePreview } from './FilePreview';
6 | import { PathSegments } from './PathSegments';
7 | import { Switch } from '@/components/ui/switch';
8 | import { Label } from '@/components/ui/label';
9 | import type { FileType } from '@/types/workspace';
10 |
11 | interface WorkspaceExplorerProps {
12 | conversationId: string;
13 | }
14 |
15 | export function WorkspaceExplorer({ conversationId }: WorkspaceExplorerProps) {
16 | const [files, setFiles] = useState
22 |
32 | );
33 | })}
34 | {error}
;
53 | }
54 |
55 | return (
56 |
57 |
91 | );
92 | }
93 |
--------------------------------------------------------------------------------
/src/hooks/use-toast.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import * as React from 'react';
3 |
4 | import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
5 |
6 | const TOAST_LIMIT = 1;
7 | const TOAST_REMOVE_DELAY = 1000000;
8 |
9 | type ToasterToast = ToastProps & {
10 | id: string;
11 | title?: React.ReactNode;
12 | description?: React.ReactNode;
13 | action?: ToastActionElement;
14 | };
15 |
16 | type ToastActionType = {
17 | ADD_TOAST: 'ADD_TOAST';
18 | UPDATE_TOAST: 'UPDATE_TOAST';
19 | DISMISS_TOAST: 'DISMISS_TOAST';
20 | REMOVE_TOAST: 'REMOVE_TOAST';
21 | };
22 |
23 | let count = 0;
24 |
25 | function genId(): string {
26 | count = (count + 1) % Number.MAX_SAFE_INTEGER;
27 | return count.toString();
28 | }
29 |
30 | type Action =
31 | | {
32 | type: ToastActionType['ADD_TOAST'];
33 | toast: ToasterToast;
34 | }
35 | | {
36 | type: ToastActionType['UPDATE_TOAST'];
37 | toast: Partial
58 |
64 |
65 |
60 |
61 |
62 |
63 |
66 |
90 |
67 | {loading ? (
68 |
80 |
69 |
71 | ) : (
72 |
81 | {selectedFile ? (
82 |
89 |
85 | Select a file to preview
86 |
87 | )}
88 |
12 |
15 | );
16 | };
17 |
18 | export default Index;
19 |
--------------------------------------------------------------------------------
/src/schemas/conversationSettings.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod';
2 | import { ToolFormat } from '@/types/api';
3 |
4 | export const mcpServerSchema = z.object({
5 | name: z.string().min(1, 'Server name cannot be empty'),
6 | enabled: z.boolean(),
7 | command: z.string().min(1, 'Command cannot be empty'),
8 | args: z.string(),
9 | env: z
10 | .array(
11 | z.object({
12 | key: z.string().min(1, 'Variable name cannot be empty'),
13 | value: z.string(),
14 | })
15 | )
16 | .optional(),
17 | });
18 |
19 | export const formSchema = z.object({
20 | chat: z.object({
21 | model: z.string().optional(),
22 | tools: z.array(z.object({ name: z.string().min(1, 'Tool name cannot be empty') })).optional(),
23 | tool_format: z.nativeEnum(ToolFormat).nullable().optional(),
24 | stream: z.boolean(),
25 | interactive: z.boolean(),
26 | workspace: z.string().min(1, 'Workspace directory is required'),
27 | env: z
28 | .array(
29 | z.object({ key: z.string().min(1, 'Variable name cannot be empty'), value: z.string() })
30 | )
31 | .optional(),
32 | }),
33 | mcp: z.object({
34 | enabled: z.boolean(),
35 | auto_start: z.boolean(),
36 | servers: z.array(mcpServerSchema).optional(),
37 | }),
38 | });
39 |
40 | export type FormSchema = z.infer