diff --git a/prisma/App.tsx b/prisma/App.tsx index ca65415..90e9e06 100644 --- a/prisma/App.tsx +++ b/prisma/App.tsx @@ -38,7 +38,7 @@ const App = () => { } = useAppLogic(); return ( -
+
{ config={config} /> -
+
setIsSidebarOpen(false)} @@ -68,7 +68,7 @@ const App = () => { onDeleteSession={handleDeleteSession} /> -
+
{ processEndTime={processEndTime} /> -
+
{ setElapsed(Date.now() - start); @@ -33,14 +33,24 @@ const TimeDisplay = ({ start, end, status }: { start?: number, end?: number, sta const seconds = (elapsed / 1000).toFixed(1); return ( -
+
{seconds}s
); }; +// Helper to extract the last meaningful line of thought +const getLastThought = (text?: string) => { + if (!text) return ""; + // Clean up markdown markers broadly + const cleanText = text.replace(/[*_#`]/g, ''); + const lines = cleanText.split('\n').map(l => l.trim()).filter(l => l.length > 0); + return lines.length ? lines[lines.length - 1] : ""; +}; + const ExpertCard = ({ expert }: { expert: ExpertResult }) => { + const [isExpanded, setIsExpanded] = useState(false); const [view, setView] = useState<'thoughts' | 'output'>('output'); const isWorking = expert.status === 'thinking'; @@ -50,7 +60,7 @@ const ExpertCard = ({ expert }: { expert: ExpertResult }) => { const round = expert.round || 1; // Auto-switch to thoughts if that's all we have so far - React.useEffect(() => { + useEffect(() => { if (isWorking && expert.thoughts && !expert.content) { setView('thoughts'); } else if (expert.content && view === 'thoughts' && !expert.thoughts) { @@ -58,115 +68,187 @@ const ExpertCard = ({ expert }: { expert: ExpertResult }) => { } }, [expert.thoughts, expert.content, isWorking]); - return ( -
- {/* Header */} -
-
- -
-
-
-
-

{expert.role}

- {round > 1 && ( -
- - Round {round} -
- )} -
- - {/* Timer for Expert */} - + // Determine border/bg styles based on status + const getStatusStyles = () => { + if (isWorking) return 'border-indigo-300 bg-white shadow-md shadow-indigo-100 ring-1 ring-indigo-50'; + if (isDone) return 'border-teal-200 bg-white hover:border-teal-300 hover:shadow-md'; + if (isError) return 'border-red-200 bg-red-50/30'; + return 'border-slate-200 bg-slate-50 opacity-60 hover:opacity-100'; + }; + + const currentThought = getLastThought(expert.thoughts); + + const ExpandedModal = ( +
+ {/* Backdrop */} +
setIsExpanded(false)} /> + + {/* Modal Content */} +
+ + {/* Modal Header */} +
+
+
+ +
+
+

+ {expert.role} + {round > 1 && R{round}} +

+
+ + • + + {isWorking ? 'Thinking...' : expert.status} + +
+
-
-

{expert.description}

- {expert.temperature !== undefined && ( -
- - {expert.temperature} -
- )} -
-
-
- {isWorking && } - {isDone && } - {isError && } +
-
- {/* Tabs */} - {!isPending && ( -
+ {/* Tabs */} +
- )} - - {/* Content Area */} -
- {isPending ? ( -
- - Waiting for assignment... -
- ) : ( - <> + + {/* Scrollable Content */} +
{view === 'thoughts' && ( -
+
{expert.thoughts ? ( ) : ( - Initializing thought process... +
No reasoning thoughts recorded.
)} - {isWorking && } + {isWorking && expert.thoughts &&
}
)} {view === 'output' && ( -
+
{expert.content ? ( ) : ( - - {isWorking ? "Formulating output..." : "No output generated."} - +
No output generated yet.
)} - {isWorking && !expert.content && } + {isWorking && !expert.content &&
}
)} - +
+ + {/* Footer */} + {expert.description && ( +
+ Goal: {expert.description} +
)}
); + + return ( + <> + {/* Collapsed Widget View */} +
!isPending && setIsExpanded(true)} + className={` + group relative flex flex-col p-3 rounded-xl border transition-all duration-300 cursor-pointer + ${getStatusStyles()} + ${!isPending ? 'active:scale-[0.98]' : 'cursor-default'} + `} + > + {/* Top Row: Icon, Role, Timer */} +
+
+ {isWorking ? : + (isDone ? : + (isError ? : )) + } +
+ +
+
+

+ {expert.role} +

+ {round > 1 && R{round}} +
+ + {/* Subtext: Status or Description */} +
+ {isPending ? 'Waiting for assignment...' : expert.description} +
+
+ + +
+ + {/* Bottom Row: Rolling Thought / Activity Indicator */} + {!isPending && ( +
+ {/* Rolling animation container */} +
+ {isWorking && } + + {isWorking && !currentThought ? "Initializing..." : (currentThought || "View details...")} + +
+ + {/* Hover hint */} +
+ +
+
+ )} +
+ + {/* Render Portal for Expanded View */} + {isExpanded && createPortal(ExpandedModal, document.body)} + + ); }; -export default ExpertCard; \ No newline at end of file +export default ExpertCard; diff --git a/prisma/ProcessNode.tsx b/prisma/ProcessNode.tsx index 2257b8f..50c429e 100644 --- a/prisma/ProcessNode.tsx +++ b/prisma/ProcessNode.tsx @@ -22,24 +22,24 @@ const ProcessNode = ({ const isCompleted = status === 'completed'; return ( -
+
{isActive ? : (isCompleted ? : )}
-

+

{title}

- {isActive &&

Processing...

} + {isActive &&

Processing...

}
{children && ( @@ -50,7 +50,7 @@ const ProcessNode = ({
{isExpanded && children && ( -
+
{children}
)} diff --git a/prisma/SettingsModal.tsx b/prisma/SettingsModal.tsx index bf5d4c1..a1fb650 100644 --- a/prisma/SettingsModal.tsx +++ b/prisma/SettingsModal.tsx @@ -26,30 +26,33 @@ const SettingsModal = ({ if (!isOpen) return null; return ( -
-
+
+
{/* Header */} -
-
- -

Configuration

+
+
+
+ +
+

Configuration

-
{/* Body */} -
+
- - +
+
+ @@ -57,10 +60,10 @@ const SettingsModal = ({
{/* Footer */} -
+
diff --git a/prisma/components/ChatArea.tsx b/prisma/components/ChatArea.tsx index a13178d..9d5fe5d 100644 --- a/prisma/components/ChatArea.tsx +++ b/prisma/components/ChatArea.tsx @@ -29,15 +29,22 @@ const ChatArea = ({ return (
{isIdle ? ( -
- -

Prisma

-

- Deep multi-agent reasoning. +

+
+
+ +
+

+ Prisma + .ai +

+

+ Deep multi-agent reasoning engine.
+ Visualize the thought process in real-time.

) : ( -
+
{/* History */} {messages.map((msg, idx) => ( -
-
-
+
+
+
+
-
Prisma
+
+ Prisma + Thinking +
{/* Active Thinking Process */} -
+
+
{ }; return ( -
-
+
+
{/* Avatar */}
-
{isUser ? ( - + ) : ( - + )}
{/* Content */} -
-
-
+
+
+
{isUser ? 'You' : 'Prisma'} + {!isUser && ( + + AI + + )}
{message.content && ( {showThinking && ( -
+
{ {/* Attachments */} {message.attachments && message.attachments.length > 0 && ( -
+
{message.attachments.map(att => ( attachment window.open(att.url || `data:${att.mimeType};base64,${att.data}`, '_blank')} /> ))} @@ -118,23 +131,23 @@ const ChatMessageItem = ({ message, isLast }: ChatMessageProps) => { )} {/* Text Content */} -
+
{message.content ? ( ) : ( - message.isThinking && + message.isThinking && )}
{/* Internal Monologue (Synthesis Thoughts) - Optional Footer */} {!isUser && message.synthesisThoughts && ( -
+
- - + + Show Internal Monologue -
+
{message.synthesisThoughts}
diff --git a/prisma/components/Header.tsx b/prisma/components/Header.tsx index 7d8f197..3536e0a 100644 --- a/prisma/components/Header.tsx +++ b/prisma/components/Header.tsx @@ -18,49 +18,53 @@ const Header = ({ selectedModel, setSelectedModel, onOpenSettings, onToggleSideb const availableModels = getAllModels(config); return ( -
-
-
+
+
+
- -

- Prisma +
+
+ +
+

+ Prisma + .ai

-
-
+
+
- +
diff --git a/prisma/components/InputSection.tsx b/prisma/components/InputSection.tsx index ad94666..1ae834e 100644 --- a/prisma/components/InputSection.tsx +++ b/prisma/components/InputSection.tsx @@ -138,7 +138,7 @@ const InputSection = ({ query, setQuery, onRun, onStop, appState, focusTrigger } )} {/* Input Container */} -
+
fileInputRef.current?.click()} - className="flex-shrink-0 p-2.5 mb-0.5 ml-1 rounded-full text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors" + className="flex-shrink-0 p-3 mb-1 ml-1 rounded-full text-slate-400 hover:text-indigo-600 hover:bg-indigo-50/50 transition-all duration-200 group" title="Attach Image" disabled={isRunning} > - +