Skip to content

Feat/frontend polish #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chm3778 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feat/frontend polish #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e591948
Merge pull request #1 from chm3778/add-websearch
chm3778 Jan 21, 2026
f372725
feat(ui): polish frontend with collapsible ExpertCard and refined sty…
Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions prisma/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const App = () => {
} = useAppLogic();

return (
<div className="flex flex-col h-screen bg-white text-slate-800 font-sans selection:bg-blue-100 selection:text-blue-900">
<div className="flex flex-col h-screen bg-slate-50 text-slate-900 font-sans selection:bg-indigo-100 selection:text-indigo-900 overflow-hidden">

<SettingsModal
isOpen={isSettingsOpen}
Expand All @@ -57,7 +57,7 @@ const App = () => {
config={config}
/>

<div className="flex flex-1 overflow-hidden relative">
<div className="flex flex-1 overflow-hidden relative isolate">
<Sidebar
isOpen={isSidebarOpen}
onClose={() => setIsSidebarOpen(false)}
Expand All @@ -68,7 +68,7 @@ const App = () => {
onDeleteSession={handleDeleteSession}
/>

<main className="flex-1 flex flex-col min-w-0 bg-white relative">
<main className="flex-1 flex flex-col min-w-0 relative z-0">
<ChatArea
messages={messages}
appState={appState}
Expand All @@ -79,10 +79,10 @@ const App = () => {
processEndTime={processEndTime}
/>

<div className="absolute bottom-0 left-0 right-0 z-20 pointer-events-none p-4 pb-6 flex justify-center bg-gradient-to-t from-white via-white/80 to-transparent">
<div className="absolute bottom-0 left-0 right-0 z-20 pointer-events-none p-6 pb-8 flex justify-center bg-gradient-to-t from-slate-50 via-slate-50/95 to-transparent">
<div className="pointer-events-auto w-full max-w-4xl">
<ChatInput
query={query}
query={query}
setQuery={setQuery}
onRun={handleRun}
onStop={stopDeepThink}
Expand Down
234 changes: 158 additions & 76 deletions prisma/ExpertCard.tsx
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions prisma/ProcessNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,24 @@ const ProcessNode = ({
const isCompleted = status === 'completed';

return (
<div className={`relative z-10 rounded-xl border ${isActive ? 'border-blue-400 bg-blue-50/50' : 'border-slate-200 bg-white'} transition-all duration-500 overflow-hidden shadow-sm`}>
<div className={`relative z-10 rounded-xl border ${isActive ? 'border-indigo-400 bg-indigo-50/50 ring-1 ring-indigo-200' : 'border-slate-200 bg-white'} transition-all duration-500 overflow-hidden shadow-sm`}>
<div
className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50 transition-colors"
onClick={onToggle}
>
<div className="flex items-center gap-3">
<div className={`
w-8 h-8 rounded-full flex items-center justify-center transition-colors duration-300
${isActive ? 'bg-blue-600 text-white animate-pulse' : ''}
${isCompleted ? 'bg-green-600 text-white' : 'bg-slate-100 text-slate-400'}
${isActive ? 'bg-indigo-600 text-white animate-pulse' : ''}
${isCompleted ? 'bg-teal-600 text-white' : 'bg-slate-100 text-slate-400'}
`}>
{isActive ? <Loader2 size={16} className="animate-spin" /> : (isCompleted ? <CheckCircle2 size={16} /> : <Icon size={16} />)}
</div>
<div>
<h3 className={`text-sm font-semibold ${isActive ? 'text-blue-900' : (isCompleted ? 'text-slate-800' : 'text-slate-500')}`}>
<h3 className={`text-sm font-semibold ${isActive ? 'text-indigo-900' : (isCompleted ? 'text-slate-900' : 'text-slate-500')}`}>
{title}
</h3>
{isActive && <p className="text-xs text-blue-600">Processing...</p>}
{isActive && <p className="text-xs text-indigo-600 font-medium">Processing...</p>}
</div>
</div>
{children && (
Expand All @@ -50,7 +50,7 @@ const ProcessNode = ({
</div>

{isExpanded && children && (
<div className="border-t border-slate-100 bg-slate-50/50 p-4 animate-in slide-in-from-top-2 duration-300">
<div className="border-t border-slate-100 bg-slate-50/30 p-4 animate-in slide-in-from-top-2 duration-300">
{children}
</div>
)}
Expand Down
29 changes: 16 additions & 13 deletions prisma/SettingsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,41 +26,44 @@ const SettingsModal = ({
if (!isOpen) return null;

return (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm animate-in fade-in duration-200">
<div className="bg-white border border-slate-200 rounded-xl w-full max-w-md shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200 flex flex-col max-h-[90vh]">
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/30 backdrop-blur-sm animate-in fade-in duration-300">
<div className="bg-white backdrop-blur-2xl border border-white/50 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300 flex flex-col max-h-[85vh] ring-1 ring-black/5">

{/* Header */}
<div className="flex items-center justify-between p-4 border-b border-slate-100 bg-slate-50/50">
<div className="flex items-center gap-2">
<Settings size={18} className="text-blue-600" />
<h2 className="font-semibold text-slate-800">Configuration</h2>
<div className="flex items-center justify-between px-6 py-5 border-b border-slate-100 bg-white/80">
<div className="flex items-center gap-3">
<div className="p-2 bg-indigo-50 rounded-lg text-indigo-600">
<Settings size={18} strokeWidth={2.5} />
</div>
<h2 className="font-bold text-slate-800 text-lg tracking-tight">Configuration</h2>
</div>
<button onClick={onClose} className="text-slate-400 hover:text-slate-700 transition-colors rounded-full p-1 hover:bg-slate-200/50">
<X size={20} />
<button onClick={onClose} className="text-slate-400 hover:text-slate-700 transition-colors rounded-full p-2 hover:bg-slate-100">
<X size={20} strokeWidth={2.5} />
</button>
</div>

{/* Body */}
<div className="p-6 space-y-6 overflow-y-auto custom-scrollbar">
<div className="p-6 space-y-8 overflow-y-auto custom-scrollbar bg-slate-50/30">
<ModelSection config={config} setConfig={setConfig} />
<ApiSection config={config} setConfig={setConfig} />

<div className="h-px bg-slate-200/50" />
<ThinkingSection
config={config}
setConfig={setConfig}
model={model}
/>
<div className="h-px bg-slate-200/50" />
<ApiSection config={config} setConfig={setConfig} />

<LogSection />

<GithubSection isOpen={isOpen} />
</div>

{/* Footer */}
<div className="p-4 bg-slate-50 border-t border-slate-100 flex justify-end shrink-0">
<div className="p-5 bg-white border-t border-slate-100 flex justify-end shrink-0">
<button
onClick={onClose}
className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-all shadow-md active:scale-95"
className="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-xl transition-all shadow-lg shadow-indigo-500/20 hover:shadow-indigo-500/30 hover:-translate-y-0.5 active:translate-y-0 active:scale-95"
>
Done
</button>
Expand Down
36 changes: 23 additions & 13 deletions prisma/components/ChatArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,22 @@ const ChatArea = ({
return (
<div className="flex-1 overflow-y-auto custom-scrollbar scroll-smooth">
{isIdle ? (
<div className="h-full flex flex-col items-center justify-center opacity-70 px-4 text-center">
<Logo className="w-24 h-24 mb-6 drop-shadow-xl animate-pulse-slow" />
<p className="text-xl font-bold text-slate-900">Prisma</p>
<p className="text-sm text-slate-500 max-w-xs mt-2">
Deep multi-agent reasoning.
<div className="h-full flex flex-col items-center justify-center opacity-100 px-4 text-center animate-in fade-in duration-700">
<div className="relative mb-8 group">
<div className="absolute inset-0 bg-indigo-400 blur-3xl opacity-20 group-hover:opacity-30 transition-opacity duration-1000 rounded-full animate-pulse-slow"></div>
<Logo className="relative w-24 h-24 drop-shadow-2xl transition-transform duration-700 hover:scale-105" />
</div>
<h2 className="text-4xl font-extrabold text-slate-900 tracking-tight mb-4 font-display">
Prisma
<span className="text-indigo-500">.ai</span>
</h2>
<p className="text-lg text-slate-500 max-w-md leading-relaxed font-medium">
Deep multi-agent reasoning engine. <br/>
<span className="text-slate-400 font-normal text-base">Visualize the thought process in real-time.</span>
</p>
</div>
) : (
<div className="pb-40">
<div className="pb-48">
{/* History */}
{messages.map((msg, idx) => (
<ChatMessageItem
Expand All @@ -49,16 +56,19 @@ const ChatArea = ({

{/* Active Generation (Ghost Message) */}
{appState !== 'idle' && appState !== 'completed' && (
<div className="group w-full bg-transparent text-slate-800">
<div className="max-w-6xl mx-auto px-4 py-8 flex gap-6">
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-white border border-blue-200 shadow-sm flex items-center justify-center">
<div className="animate-spin w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full"></div>
<div className="group w-full bg-transparent text-slate-800 animate-in fade-in slide-in-from-bottom-4 duration-500">
<div className="max-w-5xl mx-auto px-6 lg:px-12 py-8 flex gap-6">
<div className="flex-shrink-0 w-10 h-10 rounded-xl bg-white border border-indigo-100 shadow-sm flex items-center justify-center backdrop-blur-sm ring-1 ring-indigo-50">
<div className="animate-spin w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full"></div>
</div>
<div className="flex-1 min-w-0">
<div className="font-semibold text-sm text-slate-900 mb-2">Prisma</div>
<div className="font-bold text-sm text-slate-900 mb-3 flex items-center gap-2">
Prisma
<span className="px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-700 text-[10px] font-bold uppercase tracking-wider border border-indigo-100 animate-pulse">Thinking</span>
</div>

{/* Active Thinking Process */}
<div className="mb-4 bg-white border border-blue-100 rounded-xl p-4 shadow-sm">
<div className="mb-6 bg-white/70 border border-indigo-100/60 rounded-2xl p-6 shadow-[0_8px_30px_rgba(0,0,0,0.03)] backdrop-blur-xl ring-1 ring-white/60">
<ProcessFlow
appState={appState}
managerAnalysis={managerAnalysis}
Expand All @@ -70,7 +80,7 @@ const ChatArea = ({

{/* Streaming Output */}
{finalOutput && (
<div className="prose prose-slate max-w-none">
<div className="prose prose-slate max-w-none prose-p:leading-relaxed prose-headings:font-bold prose-a:text-indigo-600">
<ChatMessageItem
message={{
id: 'streaming',
Expand Down
Loading