buzzert/Sybil-2
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Appearance tweaks, fix new message bug

Browse Source
This commit is contained in:
James Magahern
2026-02-14 20:51:52 -08:00
parent ec7b33e6ec
commit 9bfd0ec1e7
6 changed files with 87 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sybil Chat</title> <title>Sybil</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

71
web/src/App.tsx
View File

@@ -21,6 +21,7 @@ import {
type ChatDetail, type ChatDetail,
type ChatSummary, type ChatSummary,
type CompletionRequestMessage, type CompletionRequestMessage,
type Message,
type SearchDetail, type SearchDetail,
type SearchSummary, type SearchSummary,
} from "@/lib/api"; } from "@/lib/api";
@@ -113,6 +114,7 @@ export default function App() {
const [isLoadingCollections, setIsLoadingCollections] = useState(false); const [isLoadingCollections, setIsLoadingCollections] = useState(false);
const [isLoadingSelection, setIsLoadingSelection] = useState(false); const [isLoadingSelection, setIsLoadingSelection] = useState(false);
const [isSending, setIsSending] = useState(false); const [isSending, setIsSending] = useState(false);
const [pendingChatState, setPendingChatState] = useState<{ chatId: string | null; messages: Message[] } | null>(null);
const [composer, setComposer] = useState(""); const [composer, setComposer] = useState("");
const [provider, setProvider] = useState<Provider>("openai"); const [provider, setProvider] = useState<Provider>("openai");
const [model, setModel] = useState(PROVIDER_DEFAULT_MODELS.openai); const [model, setModel] = useState(PROVIDER_DEFAULT_MODELS.openai);
@@ -132,6 +134,7 @@ export default function App() {
setSelectedChat(null); setSelectedChat(null);
setSelectedSearch(null); setSelectedSearch(null);
setDraftKind(null); setDraftKind(null);
setPendingChatState(null);
setComposer(""); setComposer("");
setError(null); setError(null);
}; };
@@ -251,6 +254,18 @@ export default function App() {
}, []); }, []);
const messages = selectedChat?.messages ?? []; const messages = selectedChat?.messages ?? [];
const isSearchMode = draftKind ? draftKind === "search" : selectedItem?.kind === "search";
const isSearchRunning = isSending && isSearchMode;
const displayMessages = useMemo(() => {
if (!pendingChatState) return messages;
if (pendingChatState.chatId) {
if (selectedItem?.kind === "chat" && selectedItem.id === pendingChatState.chatId) {
return pendingChatState.messages;
}
return messages;
}
return isSearchMode ? messages : pendingChatState.messages;
}, [isSearchMode, messages, pendingChatState, selectedItem]);
const selectedChatSummary = useMemo(() => { const selectedChatSummary = useMemo(() => {
if (!selectedItem || selectedItem.kind !== "chat") return null; if (!selectedItem || selectedItem.kind !== "chat") return null;
@@ -276,9 +291,6 @@ export default function App() {
return "New search"; return "New search";
}, [draftKind, selectedChat, selectedChatSummary, selectedItem, selectedSearch, selectedSearchSummary]); }, [draftKind, selectedChat, selectedChatSummary, selectedItem, selectedSearch, selectedSearchSummary]);
const isSearchMode = draftKind ? draftKind === "search" : selectedItem?.kind === "search";
const isSearchRunning = isSending && isSearchMode;
const handleCreateChat = () => { const handleCreateChat = () => {
setError(null); setError(null);
setContextMenu(null); setContextMenu(null);
@@ -347,6 +359,27 @@ export default function App() {
}, [contextMenu]); }, [contextMenu]);
const handleSendChat = async (content: string) => { const handleSendChat = async (content: string) => {
const optimisticUserMessage: Message = {
id: `temp-user-${Date.now()}`,
createdAt: new Date().toISOString(),
role: "user",
content,
name: null,
};
const optimisticAssistantMessage: Message = {
id: `temp-assistant-${Date.now()}`,
createdAt: new Date().toISOString(),
role: "assistant",
content: "",
name: null,
};
setPendingChatState({
chatId: selectedItem?.kind === "chat" ? selectedItem.id : null,
messages: (selectedChat?.messages ?? []).concat(optimisticUserMessage, optimisticAssistantMessage),
});
let chatId = draftKind === "chat" ? null : selectedItem?.kind === "chat" ? selectedItem.id : null; let chatId = draftKind === "chat" ? null : selectedItem?.kind === "chat" ? selectedItem.id : null;
if (!chatId) { if (!chatId) {
@@ -354,6 +387,7 @@ export default function App() {
chatId = chat.id; chatId = chat.id;
setDraftKind(null); setDraftKind(null);
setSelectedItem({ kind: "chat", id: chatId }); setSelectedItem({ kind: "chat", id: chatId });
setPendingChatState((current) => (current ? { ...current, chatId } : current));
setSelectedChat({ setSelectedChat({
id: chat.id, id: chat.id,
title: chat.title, title: chat.title,
@@ -373,30 +407,6 @@ export default function App() {
baseChat = await getChat(chatId); baseChat = await getChat(chatId);
} }
const optimisticUserMessage = {
id: `temp-user-${Date.now()}`,
createdAt: new Date().toISOString(),
role: "user" as const,
content,
name: null,
};
const optimisticAssistantMessage = {
id: `temp-assistant-${Date.now()}`,
createdAt: new Date().toISOString(),
role: "assistant" as const,
content: "",
name: null,
};
setSelectedChat((current) => {
if (!current || current.id !== chatId) return current;
return {
...current,
messages: [...current.messages, optimisticUserMessage, optimisticAssistantMessage],
};
});
const requestMessages: CompletionRequestMessage[] = [ const requestMessages: CompletionRequestMessage[] = [
...baseChat.messages.map((message) => ({ ...baseChat.messages.map((message) => ({
role: message.role, role: message.role,
@@ -417,6 +427,7 @@ export default function App() {
}); });
await Promise.all([refreshCollections({ kind: "chat", id: chatId }), refreshChat(chatId)]); await Promise.all([refreshCollections({ kind: "chat", id: chatId }), refreshChat(chatId)]);
setPendingChatState(null);
}; };
const handleSendSearch = async (query: string) => { const handleSendSearch = async (query: string) => {
@@ -569,6 +580,10 @@ export default function App() {
setError(message); setError(message);
} }
if (!isSearchMode) {
setPendingChatState(null);
}
if (selectedItem?.kind === "chat") { if (selectedItem?.kind === "chat") {
await refreshChat(selectedItem.id); await refreshChat(selectedItem.id);
} }
@@ -700,7 +715,7 @@ export default function App() {
<div className="flex-1 overflow-y-auto px-3 py-6 md:px-10"> <div className="flex-1 overflow-y-auto px-3 py-6 md:px-10">
{!isSearchMode ? ( {!isSearchMode ? (
<ChatMessagesPanel messages={messages} isLoading={isLoadingSelection} isSending={isSending} /> <ChatMessagesPanel messages={displayMessages} isLoading={isLoadingSelection} isSending={isSending} />
) : ( ) : (
<SearchResultsPanel search={selectedSearch} isLoading={isLoadingSelection} isRunning={isSearchRunning} /> <SearchResultsPanel search={selectedSearch} isLoading={isLoadingSelection} isRunning={isSearchRunning} />
)} )}

24
web/src/components/chat/chat-messages-panel.tsx
View File

@@ -1,5 +1,6 @@
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import type { Message } from "@/lib/api"; import type { Message } from "@/lib/api";
import { MarkdownContent } from "@/components/markdown/markdown-content";
type Props = { type Props = {
messages: Message[]; messages: Message[];
@@ -11,12 +12,6 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
return ( return (
<> <>
{isLoading && messages.length === 0 ? <p className="text-sm text-muted-foreground">Loading messages...</p> : null} {isLoading && messages.length === 0 ? <p className="text-sm text-muted-foreground">Loading messages...</p> : null}
{!isLoading && messages.length === 0 ? (
<div className="mx-auto flex max-w-3xl flex-col items-center gap-3 rounded-xl border border-dashed p-8 text-center">
<h2 className="text-lg font-semibold">How can I help today?</h2>
<p className="text-sm text-muted-foreground">Ask a question to begin this conversation.</p>
</div>
) : null}
<div className="mx-auto max-w-3xl space-y-6"> <div className="mx-auto max-w-3xl space-y-6">
{messages.map((message) => { {messages.map((message) => {
const isUser = message.role === "user"; const isUser = message.role === "user";
@@ -25,11 +20,22 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
<div key={message.id} className={cn("flex", isUser ? "justify-end" : "justify-start")}> <div key={message.id} className={cn("flex", isUser ? "justify-end" : "justify-start")}>
<div <div
className={cn( className={cn(
"max-w-[85%] whitespace-pre-wrap rounded-2xl px-4 py-3 text-sm leading-6", "max-w-[85%]",
isUser ? "bg-fuchsia-200 text-fuchsia-950" : "bg-violet-900/80 text-fuchsia-50" isUser ? "rounded-2xl bg-violet-900/80 px-4 py-3 text-sm leading-6 text-fuchsia-50" : "text-base leading-7 text-fuchsia-100"
)} )}
> >
{isPendingAssistant ? "Thinking..." : message.content} {isPendingAssistant ? (
<span className="inline-flex items-center gap-1" aria-label="Assistant is typing" role="status">
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-white [animation-delay:0ms]" />
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-white [animation-delay:140ms]" />
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-white [animation-delay:280ms]" />
</span>
) : (
<MarkdownContent
markdown={message.content}
className={cn("[&_a]:text-inherit [&_a]:underline", isUser ? "leading-[1.78] text-fuchsia-50" : "leading-[1.82] text-fuchsia-100")}
/>
)}
</div> </div>
</div> </div>
); );

12
web/src/components/search/search-results-panel.tsx
View File

@@ -1,5 +1,4 @@
import { useEffect, useRef, useState } from "preact/hooks"; import { useEffect, useRef, useState } from "preact/hooks";
import { Search } from "lucide-preact";
import type { SearchDetail } from "@/lib/api"; import type { SearchDetail } from "@/lib/api";
import { MarkdownContent } from "@/components/markdown/markdown-content"; import { MarkdownContent } from "@/components/markdown/markdown-content";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -27,11 +26,10 @@ type Props = {
search: SearchDetail | null; search: SearchDetail | null;
isLoading: boolean; isLoading: boolean;
isRunning: boolean; isRunning: boolean;
showPrompt?: boolean;
className?: string; className?: string;
}; };
export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt = true, className }: Props) { export function SearchResultsPanel({ search, isLoading, isRunning, className }: Props) {
const ANSWER_COLLAPSED_HEIGHT_CLASS = "h-[3rem]"; const ANSWER_COLLAPSED_HEIGHT_CLASS = "h-[3rem]";
const [isAnswerExpanded, setIsAnswerExpanded] = useState(false); const [isAnswerExpanded, setIsAnswerExpanded] = useState(false);
const [canExpandAnswer, setCanExpandAnswer] = useState(false); const [canExpandAnswer, setCanExpandAnswer] = useState(false);
@@ -159,14 +157,6 @@ export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt =
<p className="text-sm text-muted-foreground">{isRunning ? "Searching Exa..." : "Loading search..."}</p> <p className="text-sm text-muted-foreground">{isRunning ? "Searching Exa..." : "Loading search..."}</p>
) : null} ) : null}
{showPrompt && !isLoading && !search?.query ? (
<div className="flex flex-col items-center justify-center gap-2 rounded-xl border border-dashed p-8 text-center">
<Search className="h-6 w-6 text-muted-foreground" />
<h2 className="text-lg font-semibold">Search the web</h2>
<p className="text-sm text-muted-foreground">Use the composer below to run a new Exa search.</p>
</div>
) : null}
{!isLoading && !isRunning && !!search?.query && search.results.length === 0 ? ( {!isLoading && !isRunning && !!search?.query && search.results.length === 0 ? (
<p className="text-sm text-muted-foreground">No results found.</p> <p className="text-sm text-muted-foreground">No results found.</p>
) : null} ) : null}

29
web/src/index.css
View File

@@ -3,7 +3,7 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
--background: 282 33% 10%; --background: 282 33% 8%;
--foreground: 300 35% 95%; --foreground: 300 35% 95%;
--muted: 287 24% 16%; --muted: 287 24% 16%;
--muted-foreground: 297 16% 72%; --muted-foreground: 297 16% 72%;
@@ -31,7 +31,7 @@ body,
body { body {
@apply bg-background text-foreground antialiased; @apply bg-background text-foreground antialiased;
background-image: radial-gradient(circle at top, hsl(274 42% 20%) 0%, hsl(271 34% 14%) 42%, hsl(266 32% 9%) 100%); background-image: radial-gradient(circle at top, hsl(274 42% 18%) 0%, hsl(271 34% 12%) 42%, hsl(266 32% 7%) 100%);
font-family: "Soehne", "Avenir Next", "Segoe UI", sans-serif; font-family: "Soehne", "Avenir Next", "Segoe UI", sans-serif;
} }
@@ -43,10 +43,33 @@ body {
margin-top: 0.85rem; margin-top: 0.85rem;
} }
.md-content h1,
.md-content h2,
.md-content h3 {
line-height: 1.25;
margin-top: 1.2rem;
margin-bottom: 0.45rem;
font-weight: 700;
}
.md-content h1 {
font-size: 1.45rem;
}
.md-content h2 {
font-size: 1.25rem;
}
.md-content h3 {
font-size: 1.1rem;
}
.md-content ul, .md-content ul,
.md-content ol { .md-content ol {
margin-top: 0.65rem; margin-top: 0.65rem;
margin-left: 1.25rem; margin-left: 0;
padding-left: 0;
list-style-position: inside;
} }
.md-content li + li { .md-content li + li {

2
web/src/pages/search-route-page.tsx
View File

@@ -228,7 +228,7 @@ export default function SearchRoutePage() {
{error ? <p className="text-sm text-red-600">{error}</p> : null} {error ? <p className="text-sm text-red-600">{error}</p> : null}
<SearchResultsPanel search={search} isLoading={false} isRunning={isRunning} showPrompt={false} className="w-full" /> <SearchResultsPanel search={search} isLoading={false} isRunning={isRunning} className="w-full" />
</div> </div>
</div> </div>
); );