Skip to content

Commit

Permalink
Merge pull request #84 from Cloud-Code-AI/77-chrome-extension-fix-wor…
Browse files Browse the repository at this point in the history 
…kflow-list-details-views-update-favicon

Updated UI of workflow view to render persisted data node input, node output, and status updates nicely
  • Loading branch information
@sauravpanda
sauravpanda authored Feb 6, 2025
2 parents 17b4e0d + 3a8333b commit 1d30ae5
Show file tree
Hide file tree
Showing 4 changed files with 301 additions and 211 deletions.
135 changes: 69 additions & 66 deletions extensions/chrome/src/popup/chat-interface.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,71 +115,73 @@ export function ChatInterface() {
<div className="flex flex-col h-full bg-background">
{/* Header with model selection and stats */}
<div className="p-4 flex flex-col space-y-2 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="flex items-center justify-between space-x-2">
<div className="flex items-center space-x-2 flex-1">
<Select value={selectedModel} onValueChange={setSelectedModel}>
<SelectTrigger className="w-[180px] select-trigger">
<SelectValue placeholder="Select model" />
</SelectTrigger>
<SelectContent>
<SelectItem value="smollm2-1.7b-instruct" className="dropdown-button">SmolLM2 1.7B Instruct</SelectItem>
<SelectItem value="qwen2.5-1.5b-instruct" className="dropdown-button">Qwen 2.5 1.5B Instruct</SelectItem>
<SelectItem value="llama-3.2-1b-instruct" className="dropdown-button">Llama 3.2 1B Instruct</SelectItem>
<SelectItem value="qwen2.5-0.5b-instruct" className="dropdown-button">Qwen 2.5 0.5B Instruct</SelectItem>
<SelectItem
value="deepseek-r1-distill-qwen-7b"
disabled={availableMemory < 2000}
className="dropdown-button"
>
DeepSeek R1 Distill Qwen 7B (HIGH MEMORY)
{availableMemory < 2000 && " - Insufficient Memory"}
</SelectItem>
<SelectItem
value="deepseek-r1-distill-llama-8b"
disabled={availableMemory < 2000}
className="dropdown-button"
>
DeepSeek R1 Distill Llama 8B (HIGH MEMORY)
{availableMemory < 2000 && " - Insufficient Memory"}
</SelectItem>
<SelectItem
value="phi-3.5-mini-instruct"
disabled={availableMemory < 2000}
className="dropdown-button"
>
Phi 3.5 Mini Instruct (HIGH MEMORY)
{availableMemory < 2000 && " - Insufficient Memory"}
</SelectItem>
<SelectItem value="smollm2-135m-instruct" className="dropdown-button">SmolLM2 135M Instruct</SelectItem>
<SelectItem value="smollm2-360m-instruct" className="dropdown-button">SmolLM2 360M Instruct</SelectItem>
<SelectItem value="gemma-2b-it" className="dropdown-button">Gemma 2B IT</SelectItem>
<SelectItem value="tinyllama-1.1b-chat-v0.4" className="dropdown-button">TinyLlama 1.1B Chat</SelectItem>
</SelectContent>
</Select>
<Button
variant={modelLoaded ? "secondary" : "default"}
onClick={loadModel}
disabled={loading}
>
{loading ? "Loading..." : modelLoaded ? "Loaded" : "Load Model"}
</Button>
</div>
<span className="text-xs text-muted-foreground whitespace-nowrap">
{memoryUsage}
</span>
{/* Model selector and Load button */}
<div className="flex items-center justify-between gap-4">
<Select value={selectedModel} onValueChange={setSelectedModel}>
<SelectTrigger className="w-[220px] select-trigger bg-background hover:bg-background">
<SelectValue placeholder="Select model" />
</SelectTrigger>
<SelectContent className="bg-white dark:bg-gray-950 border-gray-200/50 dark:border-gray-800 border">
<SelectItem value="smollm2-1.7b-instruct" className="dropdown-button">SmolLM2 1.7B Instruct</SelectItem>
<SelectItem value="qwen2.5-1.5b-instruct" className="dropdown-button">Qwen 2.5 1.5B Instruct</SelectItem>
<SelectItem value="llama-3.2-1b-instruct" className="dropdown-button">Llama 3.2 1B Instruct</SelectItem>
<SelectItem value="qwen2.5-0.5b-instruct" className="dropdown-button">Qwen 2.5 0.5B Instruct</SelectItem>
<SelectItem
value="deepseek-r1-distill-qwen-7b"
disabled={availableMemory < 2000}
className="dropdown-button"
>
DeepSeek R1 Distill Qwen 7B (HIGH MEMORY)
{availableMemory < 2000 && " - Insufficient Memory"}
</SelectItem>
<SelectItem
value="deepseek-r1-distill-llama-8b"
disabled={availableMemory < 2000}
className="dropdown-button"
>
DeepSeek R1 Distill Llama 8B (HIGH MEMORY)
{availableMemory < 2000 && " - Insufficient Memory"}
</SelectItem>
<SelectItem
value="phi-3.5-mini-instruct"
disabled={availableMemory < 2000}
className="dropdown-button"
>
Phi 3.5 Mini Instruct (HIGH MEMORY)
{availableMemory < 2000 && " - Insufficient Memory"}
</SelectItem>
<SelectItem value="smollm2-135m-instruct" className="dropdown-button">SmolLM2 135M Instruct</SelectItem>
<SelectItem value="smollm2-360m-instruct" className="dropdown-button">SmolLM2 360M Instruct</SelectItem>
<SelectItem value="gemma-2b-it" className="dropdown-button">Gemma 2B IT</SelectItem>
<SelectItem value="tinyllama-1.1b-chat-v0.4" className="dropdown-button">TinyLlama 1.1B Chat</SelectItem>
</SelectContent>
</Select>
<Button
variant={modelLoaded ? "secondary" : "default"}
onClick={loadModel}
disabled={loading}
className="ml-auto"
>
{loading ? "Loading..." : modelLoaded ? "Loaded" : "Load Model"}
</Button>
</div>

{/* Memory usage stats */}
<div className="text-xs text-muted-foreground text-left pl-1">
{memoryUsage}
</div>

{/* Add progress bar */}
{loading && (
<div className="w-full bg-secondary rounded-full h-2">
<div
className="bg-primary h-2 rounded-full transition-all duration-300"
style={{ width: `${loadingProgress}%` }}
/>
</div>
)}
</div>

{/* Add progress bar */}
{loading && (
<div className="w-full bg-secondary rounded-full h-2">
<div
className="bg-primary h-2 rounded-full transition-all duration-300"
style={{ width: `${loadingProgress}%` }}
/>
</div>
)}

{/* Messages area */}
<div className="flex-1 overflow-auto p-4 space-y-4 bg-background">
{messages.map((message, index) => (
Expand All @@ -188,10 +190,11 @@ export function ChatInterface() {
className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}
>
<div
className={`max-w-[80%] rounded-2xl p-4 shadow-sm text-left ${message.sender === 'user'
? 'bg-primary text-primary-foreground ml-auto'
: 'bg-secondary/50 text-secondary-foreground mr-auto'
}`}
className={`max-w-[80%] rounded-2xl py-2 px-4 text-left ${
message.sender === 'user'
? 'border border-gray-200 dark:border-gray-800 text-foreground'
: 'bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 text-foreground'
}`}
style={{
borderBottomRightRadius: message.sender === 'user' ? '4px' : '16px',
borderBottomLeftRadius: message.sender === 'bot' ? '4px' : '16px',
Expand Down
2 changes: 1 addition & 1 deletion extensions/chrome/src/popup/popup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function Popup() {
}

return (
<div className="w-[400px] h-screen bg-background text-foreground flex flex-col">
<div className="w-[350px] h-screen bg-background text-foreground flex flex-col">
{/* <Header /> */}
<main className="flex-1 overflow-y-auto bg-background">
{renderView()}
Expand Down
71 changes: 47 additions & 24 deletions extensions/chrome/src/popup/workflow-list.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Loader2, RefreshCw } from "lucide-react"
import { Loader2, RefreshCw, Info } from "lucide-react"
import { Button } from "../components/ui/button"
import { Card, CardContent } from "../components/ui/card"
import { useState, useEffect } from "react"
Expand Down Expand Up @@ -47,16 +47,16 @@ export function WorkflowList({ workflows, isLoading }: WorkflowListProps) {
chrome.runtime.sendMessage(
{ action: 'getWorkflowData', workflowId: workflow.id },
(response) => {
console.log('Frontend: Got response:', response);
console.log('Frontend: Got workflow data response:', response);
if (response && response.workflowData) {
setSelectedWorkflowData(response.workflowData)
setSelectedWorkflow(workflow)
console.log('Frontend: Set workflow data and selected workflow');
console.log('Workflow data before setting:', JSON.stringify(response.workflowData, null, 2));
setSelectedWorkflowData(response.workflowData);
setSelectedWorkflow(workflow);
} else {
console.error('Frontend: No workflow data in response');
}
}
)
);
}

const handleSyncWorkflows = () => {
Expand All @@ -65,8 +65,16 @@ export function WorkflowList({ workflows, isLoading }: WorkflowListProps) {

if (isLoading) {
return (
<div className="flex items-center justify-center h-48">
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
<div className="space-y-4 p-4">
<div className="flex items-start gap-3 p-4 rounded-lg bg-gradient-to-r from-blue-50/50 to-blue-100/50 dark:from-blue-950/10 dark:to-blue-900/10 border border-blue-100 dark:border-blue-900">
<Info className="h-5 w-5 text-blue-500 dark:text-blue-400 flex-shrink-0 mt-0.5" />
<p className="text-sm text-muted-foreground">
Create new workflows from scratch or from a template in the Browseragent app and click 'Sync Workflows' to access them here.
</p>
</div>
<div className="flex items-center justify-center h-48">
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
</div>
</div>
)
}
Expand All @@ -85,8 +93,9 @@ export function WorkflowList({ workflows, isLoading }: WorkflowListProps) {

return (
<div className="space-y-4 p-4">
<div className="flex justify-between items-center mb-10">
<h2 className="text-lg font-semibold">All workflows</h2>
<div className="flex justify-between items-center mb-6">
<h2 className="text-base font-semibold">Your Workflows</h2>

<Button
variant="default"
size="sm"
Expand All @@ -97,20 +106,34 @@ export function WorkflowList({ workflows, isLoading }: WorkflowListProps) {
Sync Workflows
</Button>
</div>
{workflowList.map((workflow) => (
<Card
key={workflow.id}
className="workflow-container relative hover:bg-accent/50 active:bg-accent/70 transition-colors cursor-pointer"
onClick={() => handleWorkflowClick(workflow)}
>
<CardContent className="p-2">
<div className="flex flex-col items-start w-full">
<h2 className="workflow-title">{workflow.name}</h2>
<p className="text-sm text-muted-foreground">{workflow.description}</p>
</div>
</CardContent>
</Card>
))}

<div className="flex items-start gap-3 p-4 rounded-lg bg-gradient-to-r from-blue-50/50 to-blue-100/50 dark:from-blue-950/10 dark:to-blue-900/10 border border-blue-100 dark:border-blue-900">
<Info className="h-5 w-5 text-blue-500 dark:text-blue-400 flex-shrink-0 mt-0.5" />
<p className="text-sm text-muted-foreground text-left">
Create workflows from scratch or from a template in the Browseragent app and click 'Sync Workflows' to fetch them here.
</p>
</div>

{workflowList.length === 0 ? (
<div className="text-center text-muted-foreground text-sm py-8">
No workflows found
</div>
) : (
workflowList.map((workflow) => (
<Card
key={workflow.id}
className="workflow-container relative hover:bg-accent/50 active:bg-accent/70 transition-colors cursor-pointer"
onClick={() => handleWorkflowClick(workflow)}
>
<CardContent className="p-2">
<div className="flex flex-col items-start w-full">
<h2 className="workflow-title">{workflow.name}</h2>
<p className="text-sm text-muted-foreground">{workflow.description}</p>
</div>
</CardContent>
</Card>
))
)}
</div>
)
}
Expand Down
Loading

0 comments on commit 1d30ae5

Please sign in to comment.