updated the UI in chat adding voice and image. In cockpit redesigned it.
This commit is contained in:
anthrodjear
parent
b8b231964c
commit
f270a87894
2 changed files with 229 additions and 598 deletions
|
|
@ -1,84 +1,15 @@
|
|||
import {
|
||||
IconArrowRight,
|
||||
IconBrain,
|
||||
IconMicrophone,
|
||||
IconMicrophoneOff,
|
||||
IconPhoto,
|
||||
IconSearch,
|
||||
IconSettings,
|
||||
IconUpload,
|
||||
} from "@tabler/icons-react"
|
||||
import { Link } from "@tanstack/react-router"
|
||||
import dayjs from "dayjs"
|
||||
import { type ChangeEvent, useEffect, useMemo, useRef, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
import { useMemo } from "react"
|
||||
import { IconArrowRight } from "@tabler/icons-react"
|
||||
|
||||
import type { ChatAttachment } from "@/store/chat"
|
||||
import { usePicoChat } from "@/hooks/use-pico-chat"
|
||||
import { PageHeader } from "@/components/page-header"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
import { MemoryGraph } from "./memory-graph"
|
||||
import { useAgentCockpit } from "./use-agent-cockpit"
|
||||
|
||||
const MAX_IMAGE_SIZE_BYTES = 7 * 1024 * 1024
|
||||
const ALLOWED_IMAGE_TYPES = new Set([
|
||||
"image/jpeg",
|
||||
"image/png",
|
||||
"image/gif",
|
||||
"image/webp",
|
||||
"image/bmp",
|
||||
])
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
SpeechRecognition?: new () => SpeechRecognitionLike
|
||||
webkitSpeechRecognition?: new () => SpeechRecognitionLike
|
||||
}
|
||||
}
|
||||
|
||||
interface SpeechRecognitionLike {
|
||||
continuous: boolean
|
||||
interimResults: boolean
|
||||
lang: string
|
||||
onresult: ((event: SpeechRecognitionEventLike) => void) | null
|
||||
onend: (() => void) | null
|
||||
onerror: ((event: { error: string }) => void) | null
|
||||
start(): void
|
||||
stop(): void
|
||||
}
|
||||
|
||||
interface SpeechRecognitionEventLike {
|
||||
results: ArrayLike<ArrayLike<{ transcript: string }>>
|
||||
}
|
||||
|
||||
function statusBadgeVariant(status: string) {
|
||||
switch (status) {
|
||||
case "enabled":
|
||||
case "completed":
|
||||
return "default" as const
|
||||
case "blocked":
|
||||
case "failed":
|
||||
return "destructive" as const
|
||||
case "running":
|
||||
return "secondary" as const
|
||||
default:
|
||||
return "outline" as const
|
||||
}
|
||||
}
|
||||
|
||||
function reasonLabel(reasonCode?: string) {
|
||||
switch (reasonCode) {
|
||||
case "requires_subagent":
|
||||
|
|
@ -96,556 +27,182 @@ function reasonLabel(reasonCode?: string) {
|
|||
}
|
||||
}
|
||||
|
||||
function readFileAsDataUrl(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
if (typeof reader.result === "string") {
|
||||
resolve(reader.result)
|
||||
return
|
||||
}
|
||||
reject(new Error("Failed to read file"))
|
||||
}
|
||||
reader.onerror = () =>
|
||||
reject(reader.error || new Error("Failed to read file"))
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
export function CockpitPage() {
|
||||
const { activeSessionId, connectionState, sendMessage } = usePicoChat()
|
||||
const { activeSessionId } = usePicoChat()
|
||||
const {
|
||||
categoryCounts,
|
||||
groupedTools,
|
||||
pendingToolName,
|
||||
searchQuery,
|
||||
sessionSubagents,
|
||||
sessionMemoryGraph,
|
||||
statusCounts,
|
||||
statusFilter,
|
||||
webSearchConfig,
|
||||
hasMemoryGraphError,
|
||||
hasSubagentsError,
|
||||
hasToolsError,
|
||||
isMemoryGraphLoading,
|
||||
isSubagentsLoading,
|
||||
isToolsLoading,
|
||||
isWebSearchLoading,
|
||||
setSearchQuery,
|
||||
setStatusFilter,
|
||||
toggleTool,
|
||||
} = useAgentCockpit(activeSessionId)
|
||||
|
||||
const [prompt, setPrompt] = useState("")
|
||||
const [attachments, setAttachments] = useState<ChatAttachment[]>([])
|
||||
const [isListening, setIsListening] = useState(false)
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null)
|
||||
const recognitionRef = useRef<SpeechRecognitionLike | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const Recognition =
|
||||
window.SpeechRecognition ?? window.webkitSpeechRecognition
|
||||
if (!Recognition) {
|
||||
return
|
||||
}
|
||||
const recognition = new Recognition()
|
||||
recognition.continuous = false
|
||||
recognition.interimResults = false
|
||||
recognition.lang = "en-US"
|
||||
recognition.onresult = (event) => {
|
||||
const transcript = event.results[0]?.[0]?.transcript?.trim() ?? ""
|
||||
setPrompt(transcript)
|
||||
if (!transcript) {
|
||||
return
|
||||
}
|
||||
const sent = sendMessage({ content: transcript })
|
||||
if (!sent) {
|
||||
toast.error("Voice capture worked, but chat is not ready to send.")
|
||||
}
|
||||
}
|
||||
recognition.onend = () => setIsListening(false)
|
||||
recognition.onerror = (event) => {
|
||||
setIsListening(false)
|
||||
toast.error(`Voice capture error: ${event.error}`)
|
||||
}
|
||||
recognitionRef.current = recognition
|
||||
}, [sendMessage])
|
||||
|
||||
const filteredToolCount = useMemo(
|
||||
() => groupedTools.reduce((total, [, items]) => total + items.length, 0),
|
||||
[groupedTools],
|
||||
)
|
||||
|
||||
const currentProviderLabel = useMemo(() => {
|
||||
const current = webSearchConfig?.providers.find((provider) => provider.current)
|
||||
return current?.label ?? webSearchConfig?.provider ?? "Auto"
|
||||
}, [webSearchConfig])
|
||||
|
||||
const handleImageSelection = async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(event.target.files ?? [])
|
||||
event.target.value = ""
|
||||
if (files.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const nextAttachments: ChatAttachment[] = []
|
||||
for (const file of files) {
|
||||
if (!ALLOWED_IMAGE_TYPES.has(file.type)) {
|
||||
toast.error(`Unsupported image type: ${file.name}`)
|
||||
continue
|
||||
}
|
||||
if (file.size > MAX_IMAGE_SIZE_BYTES) {
|
||||
toast.error(`${file.name} exceeds 7 MB.`)
|
||||
continue
|
||||
}
|
||||
try {
|
||||
const url = await readFileAsDataUrl(file)
|
||||
nextAttachments.push({
|
||||
type: "image",
|
||||
url,
|
||||
filename: file.name,
|
||||
contentType: file.type,
|
||||
})
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : `Failed to read ${file.name}`,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
setAttachments((current) => [...current, ...nextAttachments])
|
||||
}
|
||||
|
||||
const handleSendBridgeMessage = () => {
|
||||
const sent = sendMessage({ content: prompt, attachments })
|
||||
if (!sent) {
|
||||
toast.error("Chat connection is not ready yet.")
|
||||
return
|
||||
}
|
||||
setPrompt("")
|
||||
setAttachments([])
|
||||
}
|
||||
|
||||
const toggleVoice = () => {
|
||||
if (!recognitionRef.current) {
|
||||
toast.error("Voice capture is not supported in this browser.")
|
||||
return
|
||||
}
|
||||
if (isListening) {
|
||||
recognitionRef.current.stop()
|
||||
setIsListening(false)
|
||||
return
|
||||
}
|
||||
try {
|
||||
recognitionRef.current.start()
|
||||
setIsListening(true)
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : "Unable to start voice capture.",
|
||||
)
|
||||
setIsListening(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col overflow-hidden bg-[#07110a] text-[#d7f9df]">
|
||||
<PageHeader title="Agent Cockpit" />
|
||||
<div className="flex h-full flex-col overflow-hidden bg-[#050505] text-[#F2F2F2] selection:bg-[#F27D26] selection:text-black font-sans relative">
|
||||
{/* Ghost Background Typography */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none select-none opacity-[0.05]">
|
||||
<span className="absolute -left-20 -top-10 text-[35vw] font-black leading-none uppercase">COCKPIT</span>
|
||||
<span className="absolute -right-20 -bottom-20 text-[25vw] font-black leading-none uppercase">SYSTEM</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto px-4 py-4 sm:px-6 sm:py-6">
|
||||
<div className="mx-auto grid w-full max-w-[1500px] gap-4 xl:grid-cols-[260px_minmax(0,1fr)_360px]">
|
||||
<aside className="space-y-4">
|
||||
<Card className="border-[#1f4f31] bg-[#09150c] text-[#d7f9df] shadow-none">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-mono text-sm uppercase tracking-[0.22em]">
|
||||
Systems
|
||||
</CardTitle>
|
||||
<CardDescription className="text-[#8bb39a]">
|
||||
Filter the active tool surface.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="relative">
|
||||
<IconSearch className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-[#6aa37b]" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
placeholder="Search tools"
|
||||
className="border-[#1f4f31] bg-[#050d08] pl-9 text-[#d7f9df] placeholder:text-[#5c8168]"
|
||||
/>
|
||||
{/* Header */}
|
||||
<header className="flex justify-between items-start border-b border-white/10 p-6 md:px-12 md:py-8 z-10">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[10px] uppercase tracking-[0.3em] font-bold text-[#F27D26]">Terminal Status</span>
|
||||
<span className="text-xs opacity-60 font-mono tracking-tighter">CONNECTED / {dayjs().format('DD.MM.YYYY')}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 text-right">
|
||||
<span className="text-[10px] uppercase tracking-[0.3em] font-bold text-[#F27D26]">Runtime Epoch</span>
|
||||
<span className="text-xs opacity-60 font-mono tracking-tighter">{dayjs().format('HH:mm')} GMT+1</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-auto px-6 py-6 md:px-12 md:py-10 z-10">
|
||||
<div className="mx-auto grid w-full max-w-[1600px] gap-12 xl:grid-cols-[1fr_380px]">
|
||||
|
||||
{/* Main Workspace */}
|
||||
<div className="space-y-16">
|
||||
{/* Hero Section */}
|
||||
<div className="relative">
|
||||
<h1 className="text-[12vw] leading-[0.85] font-black tracking-[-0.07em] uppercase m-0 p-0 text-[#F2F2F2]">
|
||||
AGENT<br/>INTERFACE
|
||||
</h1>
|
||||
<p className="mt-8 text-xl font-light max-w-xl opacity-60 leading-relaxed border-l-2 border-[#F27D26] pl-6">
|
||||
Active control node for autonomous agents. Managing tool surfaces, memory networks.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section className="grid gap-12">
|
||||
{/* Tool Grid */}
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-end justify-between border-b border-white/10 pb-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[10px] uppercase tracking-[0.22em] font-bold text-[#F27D26]">Active Modules</span>
|
||||
<h2 className="text-4xl font-black uppercase tracking-tight">Tool Grid</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<span className="text-[10px] uppercase tracking-[0.2em] opacity-40 font-bold">{filteredToolCount} Visible</span>
|
||||
<a href="/agent/tools" className="text-xs font-bold uppercase tracking-widest hover:text-[#F27D26] transition-colors border-b border-white/20 pb-1">
|
||||
Configuration
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{(["all", "enabled", "disabled", "blocked"] as const).map(
|
||||
(status) => (
|
||||
<button
|
||||
key={status}
|
||||
type="button"
|
||||
onClick={() => setStatusFilter(status)}
|
||||
className={cn(
|
||||
"flex w-full items-center justify-between rounded-lg border px-3 py-2 text-left text-sm transition-colors",
|
||||
statusFilter === status
|
||||
? "border-[#4fc267] bg-[#10351b] text-[#effff3]"
|
||||
: "border-[#173621] bg-[#08100b] text-[#8bb39a] hover:border-[#2c6a3e] hover:text-[#d7f9df]",
|
||||
)}
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{groupedTools.flatMap(([, items]) =>
|
||||
items.map((tool) => (
|
||||
<div
|
||||
key={tool.name}
|
||||
className="group relative border border-white/10 bg-[#0A0A0A] p-4 hover:border-[#F27D26]/50 transition-all duration-300"
|
||||
>
|
||||
<span className="capitalize">{status}</span>
|
||||
<span className="font-mono text-xs">
|
||||
{statusCounts[status]}
|
||||
</span>
|
||||
</button>
|
||||
),
|
||||
<div className="flex items-start justify-between gap-3 mb-3">
|
||||
<div className="space-y-1 flex-1 min-w-0">
|
||||
<h4 className="font-bold text-sm tracking-tight uppercase truncate group-hover:text-[#F27D26] transition-colors">
|
||||
{tool.name}
|
||||
</h4>
|
||||
<Badge
|
||||
className={cn(
|
||||
"rounded-none text-[8px] uppercase tracking-widest font-black px-1.5 py-0.5",
|
||||
tool.status === "enabled" ? "bg-[#F27D26] text-black" : "bg-white/10 text-white/40"
|
||||
)}
|
||||
>
|
||||
{tool.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<Switch
|
||||
checked={tool.status !== "disabled"}
|
||||
disabled={pendingToolName === tool.name}
|
||||
onCheckedChange={(checked) => toggleTool(tool.name, checked)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-[#F2F2F2]/60 leading-relaxed font-light mb-4 line-clamp-2">
|
||||
{tool.description}
|
||||
</p>
|
||||
<div className="flex items-center justify-between text-[8px] font-mono uppercase tracking-widest text-white/30 pt-3 border-t border-white/5">
|
||||
<span className="truncate">{tool.config_key}</span>
|
||||
{(tool as any).reason_code && (
|
||||
<span className="text-[#F27D26]/60">{reasonLabel((tool as any).reason_code)}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-t border-[#173621] pt-4">
|
||||
<p className="font-mono text-[11px] uppercase tracking-[0.22em] text-[#7ca88a]">
|
||||
Categories
|
||||
</p>
|
||||
{categoryCounts.map(([category, count]) => (
|
||||
<div
|
||||
key={category}
|
||||
className="flex items-center justify-between text-sm text-[#9cc8a8]"
|
||||
>
|
||||
<span className="capitalize">{category}</span>
|
||||
<span className="font-mono text-xs">{count}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
|
||||
<section className="space-y-4">
|
||||
<Card className="border-[#215d36] bg-[linear-gradient(180deg,#0a150c_0%,#0a1c10_100%)] text-[#effff3] shadow-none">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<CardTitle className="font-mono text-sm uppercase tracking-[0.24em]">
|
||||
Tool Grid
|
||||
</CardTitle>
|
||||
<CardDescription className="text-[#98c7a5]">
|
||||
Real launcher tools, live from PicoClaw.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="border-[#2a6b3d] text-[#9fd8ae]">
|
||||
{filteredToolCount} visible
|
||||
</Badge>
|
||||
<Button asChild variant="outline" className="border-[#2a6b3d] bg-transparent text-[#c8f5d2] hover:bg-[#12301a]">
|
||||
<Link to="/agent/tools">
|
||||
<IconSettings className="size-4" />
|
||||
Full Tools
|
||||
</Link>
|
||||
</Button>
|
||||
{/* Memory Network */}
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-end justify-between border-b border-white/10 pb-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[10px] uppercase tracking-[0.22em] font-bold text-[#F27D26]">Relational Map</span>
|
||||
<h2 className="text-4xl font-black uppercase tracking-tight">Memory Network</h2>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{hasToolsError ? (
|
||||
<div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200">
|
||||
Failed to load tools.
|
||||
</div>
|
||||
) : isToolsLoading ? (
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<Skeleton key={index} className="h-36 rounded-xl bg-[#112117]" />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-5">
|
||||
{groupedTools.map(([category, items]) => (
|
||||
<div key={category} className="space-y-3">
|
||||
<div className="flex items-center justify-between border-b border-[#173621] pb-2">
|
||||
<h2 className="font-mono text-xs uppercase tracking-[0.24em] text-[#8ec49c]">
|
||||
{category}
|
||||
</h2>
|
||||
<span className="font-mono text-xs text-[#5f8f6f]">
|
||||
{items.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{items.map((tool) => (
|
||||
<Card
|
||||
key={tool.name}
|
||||
size="sm"
|
||||
className="border-[#173621] bg-[#08100b] text-[#d7f9df] shadow-none"
|
||||
>
|
||||
<CardHeader className="gap-2">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="space-y-2">
|
||||
<CardTitle className="font-mono text-sm">
|
||||
{tool.name}
|
||||
</CardTitle>
|
||||
<Badge
|
||||
variant={statusBadgeVariant(tool.status)}
|
||||
className="capitalize"
|
||||
>
|
||||
{tool.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<Switch
|
||||
checked={tool.status !== "disabled"}
|
||||
disabled={pendingToolName === tool.name}
|
||||
onCheckedChange={(checked) =>
|
||||
toggleTool(tool.name, checked)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<CardDescription className="text-[#8fb59b]">
|
||||
{tool.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center justify-between text-xs text-[#739981]">
|
||||
<span className="capitalize">{tool.category}</span>
|
||||
<span className="font-mono">{tool.config_key}</span>
|
||||
</div>
|
||||
{tool.reason_code ? (
|
||||
<div className="rounded-lg border border-amber-400/20 bg-amber-400/10 px-3 py-2 text-xs text-amber-100">
|
||||
{reasonLabel(tool.reason_code)}
|
||||
</div>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-[#215d36] bg-[linear-gradient(180deg,#09130b_0%,#071109_100%)] text-[#effff3] shadow-none">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-mono text-sm uppercase tracking-[0.24em]">
|
||||
Memory Network
|
||||
</CardTitle>
|
||||
<CardDescription className="text-[#98c7a5]">
|
||||
Obsidian-style graph built from PicoClaw workspace memory and the active session trail.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{hasMemoryGraphError ? (
|
||||
<div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200">
|
||||
Failed to load memory graph.
|
||||
</div>
|
||||
) : isMemoryGraphLoading ? (
|
||||
<Skeleton className="h-[420px] rounded-xl bg-[#112117]" />
|
||||
) : sessionMemoryGraph && sessionMemoryGraph.nodes.length > 0 ? (
|
||||
<div className="p-8 border border-white/10 bg-[#0A0A0A] relative overflow-hidden">
|
||||
<MemoryGraph
|
||||
nodes={sessionMemoryGraph.nodes}
|
||||
edges={sessionMemoryGraph.edges}
|
||||
nodes={sessionMemoryGraph?.nodes ?? []}
|
||||
edges={sessionMemoryGraph?.edges ?? []}
|
||||
/>
|
||||
) : (
|
||||
<div className="rounded-lg border border-[#173621] bg-[#050d08] px-4 py-3 text-sm text-[#8bb39a]">
|
||||
Memory graph will appear when the session and workspace memory have visible context.
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
<aside className="space-y-4">
|
||||
<Card className="border-[#1f4f31] bg-[#09150c] text-[#d7f9df] shadow-none">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-mono text-sm uppercase tracking-[0.22em]">
|
||||
Session Bridge
|
||||
</CardTitle>
|
||||
<CardDescription className="text-[#8bb39a]">
|
||||
Voice and images route into the active Pico session.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="rounded-lg border border-[#173621] bg-[#050d08] px-3 py-2 text-xs text-[#9fc6aa]">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="font-mono uppercase tracking-[0.18em]">
|
||||
Session
|
||||
</span>
|
||||
<Badge variant="outline" className="border-[#2a6b3d] text-[#9fd8ae]">
|
||||
{connectionState}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="mt-2 break-all font-mono text-[11px] text-[#d7f9df]">
|
||||
{activeSessionId}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
value={prompt}
|
||||
onChange={(event) => setPrompt(event.target.value)}
|
||||
placeholder="Send a message to the active agent session"
|
||||
className="border-[#1f4f31] bg-[#050d08] text-[#d7f9df] placeholder:text-[#5c8168]"
|
||||
/>
|
||||
|
||||
{attachments.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{attachments.map((attachment, index) => (
|
||||
<div
|
||||
key={`${attachment.filename ?? "attachment"}-${index}`}
|
||||
className="flex items-center justify-between rounded-lg border border-[#173621] bg-[#050d08] px-3 py-2 text-xs text-[#bfe7c8]"
|
||||
>
|
||||
<span className="truncate">{attachment.filename ?? "Image"}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#7ca88a] hover:text-[#effff3]"
|
||||
onClick={() =>
|
||||
setAttachments((current) =>
|
||||
current.filter((_, itemIndex) => itemIndex !== index),
|
||||
)
|
||||
}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="border-[#2a6b3d] bg-transparent text-[#d7f9df] hover:bg-[#12301a]"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<IconPhoto className="size-4" />
|
||||
Add Image
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={isListening ? "destructive" : "outline"}
|
||||
className={cn(
|
||||
"border-[#2a6b3d] text-[#d7f9df] hover:bg-[#12301a]",
|
||||
isListening && "border-red-400/40 bg-red-500/10 text-red-100",
|
||||
)}
|
||||
onClick={toggleVoice}
|
||||
>
|
||||
{isListening ? (
|
||||
<IconMicrophoneOff className="size-4" />
|
||||
) : (
|
||||
<IconMicrophone className="size-4" />
|
||||
)}
|
||||
Voice
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full bg-[#4fc267] text-[#08120b] hover:bg-[#77e58e]"
|
||||
onClick={handleSendBridgeMessage}
|
||||
>
|
||||
<IconUpload className="size-4" />
|
||||
Send To Active Session
|
||||
</Button>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button asChild variant="outline" className="border-[#2a6b3d] bg-transparent text-[#d7f9df] hover:bg-[#12301a]">
|
||||
<Link to="/">
|
||||
Open Chat
|
||||
<IconArrowRight className="size-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="border-[#2a6b3d] bg-transparent text-[#d7f9df] hover:bg-[#12301a]">
|
||||
<Link to="/agent/hub">
|
||||
Skills Hub
|
||||
<IconArrowRight className="size-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/gif,image/webp,image/bmp"
|
||||
className="hidden"
|
||||
multiple
|
||||
onChange={handleImageSelection}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-[#1f4f31] bg-[#09150c] text-[#d7f9df] shadow-none">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-mono text-sm uppercase tracking-[0.22em]">
|
||||
Main Agent Subagents
|
||||
</CardTitle>
|
||||
<CardDescription className="text-[#8bb39a]">
|
||||
Live status for the current Pico session only.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{hasSubagentsError ? (
|
||||
<div className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-200">
|
||||
Failed to load subagent status.
|
||||
</div>
|
||||
) : isSubagentsLoading ? (
|
||||
Array.from({ length: 3 }).map((_, index) => (
|
||||
<Skeleton key={index} className="h-20 rounded-xl bg-[#112117]" />
|
||||
))
|
||||
) : sessionSubagents.length === 0 ? (
|
||||
<div className="rounded-lg border border-[#173621] bg-[#050d08] px-3 py-3 text-sm text-[#8bb39a]">
|
||||
{/* Right Sidebar */}
|
||||
<aside className="space-y-12">
|
||||
{/* Subagents */}
|
||||
<div className="space-y-8">
|
||||
<div className="border-b border-white/10 pb-2">
|
||||
<span className="text-[10px] uppercase tracking-[0.3em] font-bold text-[#F27D26]">Subagent Manifest</span>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{sessionSubagents.length === 0 ? (
|
||||
<div className="border border-white/10 p-5 bg-[#0A0A0A] text-sm text-white/40">
|
||||
No subagents have been created in this session yet.
|
||||
</div>
|
||||
) : (
|
||||
sessionSubagents.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="rounded-xl border border-[#173621] bg-[#050d08] px-3 py-3"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="font-mono text-sm text-[#effff3]">
|
||||
{task.label || task.id}
|
||||
</p>
|
||||
<p className="text-[11px] text-[#7ca88a]">
|
||||
{dayjs(task.created).format("MMM D, HH:mm")}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant={statusBadgeVariant(task.status)} className="capitalize">
|
||||
<div key={task.id} className="group border border-white/10 p-5 bg-[#0A0A0A] hover:border-white/30 transition-all">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<span className="font-bold text-sm uppercase tracking-tight">{task.label || task.id}</span>
|
||||
<span className={cn(
|
||||
"text-[9px] uppercase font-mono px-1.5 py-0.5",
|
||||
task.status === "completed" ? "bg-green-500/20 text-green-400" : "bg-[#F27D26]/20 text-[#F27D26]"
|
||||
)}>
|
||||
{task.status}
|
||||
</Badge>
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[9px] font-mono text-white/30 truncate">
|
||||
{dayjs(task.created).format("HH:mm:ss [UTC]")}
|
||||
</div>
|
||||
{task.result ? (
|
||||
<p className="mt-3 text-xs leading-relaxed text-[#9dc2a7]">
|
||||
{task.result}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-[#1f4f31] bg-[#09150c] text-[#d7f9df] shadow-none">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-mono text-sm uppercase tracking-[0.22em]">
|
||||
Tool Runtime
|
||||
</CardTitle>
|
||||
<CardDescription className="text-[#8bb39a]">
|
||||
Quick view of the current search/tool setup.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-[#a8cfb3]">
|
||||
<div className="flex items-center justify-between rounded-lg border border-[#173621] bg-[#050d08] px-3 py-3">
|
||||
<span className="flex items-center gap-2">
|
||||
<IconBrain className="size-4 text-[#71d888]" />
|
||||
Web search provider
|
||||
</span>
|
||||
<span className="font-mono text-xs uppercase text-[#effff3]">
|
||||
{isWebSearchLoading ? "Loading" : currentProviderLabel}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-[#7ca88a]">
|
||||
The cockpit reuses PicoClaw’s existing Pico session, tool
|
||||
toggles, and media pipeline instead of the source app’s
|
||||
Firebase and Gemini-specific wiring.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="h-20 border-t border-white/10 flex items-center justify-between px-6 md:px-12 z-10 bg-[#050505]">
|
||||
<nav className="flex gap-10 text-[10px] font-bold uppercase tracking-[0.3em]">
|
||||
<a href="#" className="hover:text-[#F27D26] transition-colors">Portfolio</a>
|
||||
<a href="#" className="hover:text-[#F27D26] transition-colors">Documentation</a>
|
||||
<a href="#" className="hover:text-[#F27D26] transition-colors">Gateway</a>
|
||||
</nav>
|
||||
<div className="flex items-center gap-6">
|
||||
<span className="text-[10px] uppercase tracking-[0.2em] opacity-40 font-bold">System Ref: BOLD-UX-01</span>
|
||||
<div className="h-10 w-10 rounded-full border border-white/10 flex items-center justify-center hover:bg-white hover:text-black cursor-pointer transition-all">
|
||||
<IconArrowRight size={16} />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { IconArrowUp, IconPhotoPlus, IconX } from "@tabler/icons-react"
|
||||
import type { KeyboardEvent } from "react"
|
||||
import { IconArrowUp, IconMicrophone, IconMicrophoneOff, IconPhotoPlus, IconX } from "@tabler/icons-react"
|
||||
import { type KeyboardEvent } from "react"
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import TextareaAutosize from "react-textarea-autosize"
|
||||
|
||||
|
|
@ -13,6 +14,28 @@ import {
|
|||
import { cn } from "@/lib/utils"
|
||||
import type { ChatAttachment, ContextUsage } from "@/store/chat"
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
SpeechRecognition?: new () => SpeechRecognitionLike
|
||||
webkitSpeechRecognition?: new () => SpeechRecognitionLike
|
||||
}
|
||||
}
|
||||
|
||||
interface SpeechRecognitionLike {
|
||||
continuous: boolean
|
||||
interimResults: boolean
|
||||
lang: string
|
||||
onresult: ((event: SpeechRecognitionEventLike) => void) | null
|
||||
onend: (() => void) | null
|
||||
onerror: ((event: { error: string }) => void) | null
|
||||
start(): void
|
||||
stop(): void
|
||||
}
|
||||
|
||||
interface SpeechRecognitionEventLike {
|
||||
results: ArrayLike<ArrayLike<{ transcript: string }>>
|
||||
}
|
||||
|
||||
export type ChatInputDisabledReason =
|
||||
| "gatewayUnknown"
|
||||
| "gatewayStarting"
|
||||
|
|
@ -51,6 +74,41 @@ export function ChatComposer({
|
|||
contextUsage,
|
||||
}: ChatComposerProps) {
|
||||
const { t } = useTranslation()
|
||||
const [isListening, setIsListening] = useState(false)
|
||||
const recognitionRef = useRef<SpeechRecognitionLike | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const Recognition =
|
||||
window.SpeechRecognition ?? window.webkitSpeechRecognition
|
||||
if (!Recognition) return
|
||||
const recognition = new Recognition()
|
||||
recognition.continuous = false
|
||||
recognition.interimResults = false
|
||||
recognition.lang = "en-US"
|
||||
recognition.onresult = (event) => {
|
||||
const transcript = event.results[0]?.[0]?.transcript?.trim() ?? ""
|
||||
if (transcript) onInputChange(transcript)
|
||||
}
|
||||
recognition.onend = () => setIsListening(false)
|
||||
recognition.onerror = () => setIsListening(false)
|
||||
recognitionRef.current = recognition
|
||||
}, [onInputChange])
|
||||
|
||||
const toggleVoice = () => {
|
||||
if (!recognitionRef.current) return
|
||||
if (isListening) {
|
||||
recognitionRef.current.stop()
|
||||
setIsListening(false)
|
||||
} else {
|
||||
try {
|
||||
recognitionRef.current.start()
|
||||
setIsListening(true)
|
||||
} catch {
|
||||
setIsListening(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const canInput = inputDisabledReason === null
|
||||
const disabledMessage =
|
||||
inputDisabledReason === null
|
||||
|
|
@ -110,21 +168,37 @@ export function ChatComposer({
|
|||
maxRows={8}
|
||||
/>
|
||||
|
||||
<div className="mt-2 flex items-center justify-between px-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-muted-foreground hover:text-foreground h-8 w-8 rounded-full"
|
||||
onClick={onAddImages}
|
||||
disabled={!canInput}
|
||||
aria-label={t("chat.attachImage")}
|
||||
title={t("chat.attachImage")}
|
||||
>
|
||||
<IconPhotoPlus className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center justify-between px-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-muted-foreground hover:text-foreground h-8 w-8 rounded-full"
|
||||
onClick={onAddImages}
|
||||
disabled={!canInput}
|
||||
aria-label={t("chat.attachImage")}
|
||||
title={t("chat.attachImage")}
|
||||
>
|
||||
<IconPhotoPlus className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn(
|
||||
"h-8 w-8 rounded-full",
|
||||
isListening
|
||||
? "text-red-500 bg-red-500/10 hover:bg-red-500/20"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
onClick={toggleVoice}
|
||||
aria-label={isListening ? t("chat.stopListening") : t("chat.startListening")}
|
||||
title={isListening ? t("chat.stopListening") : t("chat.startListening")}
|
||||
>
|
||||
{isListening ? <IconMicrophoneOff className="size-4" /> : <IconMicrophone className="size-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
{contextUsage && (
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue