diff options
Diffstat (limited to 'frontend/src/components/Sidebar.tsx')
| -rw-r--r-- | frontend/src/components/Sidebar.tsx | 25 |
1 files changed, 20 insertions, 5 deletions
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 5141081..78d2475 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -5,6 +5,7 @@ import { useAuthStore } from '../store/authStore'; import type { NodeData, Trace, Message, MergedTrace, MergeStrategy } from '../store/flowStore'; import type { Edge } from 'reactflow'; import ReactMarkdown from 'react-markdown'; +import remarkGfm from 'remark-gfm'; import { Play, Settings, Info, ChevronLeft, ChevronRight, Maximize2, Edit3, X, Check, FileText, MessageCircle, Send, GripVertical, GitMerge, Trash2, AlertCircle, Loader2, Navigation, Upload, Search, Link } from 'lucide-react'; interface SidebarProps { @@ -312,7 +313,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => { scopes, merge_strategy: selectedNode.data.mergeStrategy || 'smart', config: { - provider: selectedNode.data.model.includes('gpt') || selectedNode.data.model === 'o3' ? 'openai' : 'google', + provider: selectedNode.data.model.includes('claude') ? 'claude' : (selectedNode.data.model.includes('gpt') || selectedNode.data.model === 'o3') ? 'openai' : 'google', model_name: selectedNode.data.model, temperature: selectedNode.data.temperature, system_prompt: selectedNode.data.systemPrompt, @@ -1004,7 +1005,9 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => { try { // Determine provider + const isClaude = modelAtSend.includes('claude'); const isOpenAI = modelAtSend.includes('gpt') || modelAtSend === 'o3'; + const provider = isClaude ? 'claude' : isOpenAI ? 'openai' : 'google'; const reasoningModels = ['gpt-5', 'gpt-5-chat-latest', 'gpt-5-mini', 'gpt-5-nano', 'gpt-5-pro', 'gpt-5.1', 'gpt-5.1-chat-latest', 'gpt-5.2', 'gpt-5.2-chat-latest', 'gpt-5.2-pro', 'o3']; const isReasoning = reasoningModels.includes(modelAtSend); @@ -1024,7 +1027,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => { scopes, merge_strategy: 'smart', config: { - provider: isOpenAI ? 'openai' : 'google', + provider, model_name: modelAtSend, temperature: isReasoning ? 1 : tempAtSend, enable_google_search: webSearchAtSend, @@ -1424,6 +1427,12 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => { }} className="w-full border border-gray-300 rounded-md p-2 text-sm" > + <optgroup label="Claude"> + <option value="claude-sonnet-4-5">claude-sonnet-4.5</option> + <option value="claude-opus-4">claude-opus-4</option> + <option value="claude-opus-4-5">claude-opus-4.5</option> + <option value="claude-opus-4-6">claude-opus-4.6</option> + </optgroup> <optgroup label="Gemini"> <option value="gemini-2.5-flash">gemini-2.5-flash</option> <option value="gemini-2.5-flash-lite">gemini-2.5-flash-lite</option> @@ -1841,7 +1850,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => { ? 'bg-gray-900 border-gray-700 prose-invert text-gray-200' : 'bg-gray-50 border-gray-200 text-gray-900' }`}> - <ReactMarkdown>{selectedNode.data.response || (streamingNodeId === selectedNode.id ? streamBuffer : '')}</ReactMarkdown> + <ReactMarkdown remarkPlugins={[remarkGfm]}>{selectedNode.data.response || (streamingNodeId === selectedNode.id ? streamBuffer : '')}</ReactMarkdown> </div> )} </div> @@ -2135,7 +2144,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => { /> ) : ( <div className="prose prose-sm max-w-none"> - <ReactMarkdown>{selectedNode.data.response}</ReactMarkdown> + <ReactMarkdown remarkPlugins={[remarkGfm]}>{selectedNode.data.response}</ReactMarkdown> </div> )} </div> @@ -2419,6 +2428,12 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => { isDark ? 'bg-gray-700 border-gray-600 text-gray-200' : 'border-gray-300 text-gray-900' }`} > + <optgroup label="Claude"> + <option value="claude-sonnet-4-5">claude-sonnet-4.5</option> + <option value="claude-opus-4">claude-opus-4</option> + <option value="claude-opus-4-5">claude-opus-4.5</option> + <option value="claude-opus-4-6">claude-opus-4.6</option> + </optgroup> <optgroup label="Gemini"> <option value="gemini-2.5-flash">gemini-2.5-flash</option> <option value="gemini-2.5-flash-lite">gemini-2.5-flash-lite</option> @@ -2520,7 +2535,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => { <p className="whitespace-pre-wrap">{msg.content}</p> ) : ( <div className={`prose prose-sm max-w-none ${isDark ? 'prose-invert' : ''}`}> - <ReactMarkdown>{msg.content}</ReactMarkdown> + <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown> </div> )} </div> |