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

71
web/src/App.tsx
View File

@@ -21,6 +21,7 @@ import {
type ChatDetail,
type ChatSummary,
type CompletionRequestMessage,
type Message,
type SearchDetail,
type SearchSummary,
} from "@/lib/api";
@@ -113,6 +114,7 @@ export default function App() {
const [isLoadingCollections, setIsLoadingCollections] = useState(false);
const [isLoadingSelection, setIsLoadingSelection] = useState(false);
const [isSending, setIsSending] = useState(false);
const [pendingChatState, setPendingChatState] = useState<{ chatId: string | null; messages: Message[] } | null>(null);
const [composer, setComposer] = useState("");
const [provider, setProvider] = useState<Provider>("openai");
const [model, setModel] = useState(PROVIDER_DEFAULT_MODELS.openai);
@@ -132,6 +134,7 @@ export default function App() {
setSelectedChat(null);
setSelectedSearch(null);
setDraftKind(null);
setPendingChatState(null);
setComposer("");
setError(null);
};
@@ -251,6 +254,18 @@ export default function App() {
}, []);
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(() => {
if (!selectedItem || selectedItem.kind !== "chat") return null;
@@ -276,9 +291,6 @@ export default function App() {
return "New search";
}, [draftKind, selectedChat, selectedChatSummary, selectedItem, selectedSearch, selectedSearchSummary]);
const isSearchMode = draftKind ? draftKind === "search" : selectedItem?.kind === "search";
const isSearchRunning = isSending && isSearchMode;
const handleCreateChat = () => {
setError(null);
setContextMenu(null);
@@ -347,6 +359,27 @@ export default function App() {
}, [contextMenu]);
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;
if (!chatId) {
@@ -354,6 +387,7 @@ export default function App() {
chatId = chat.id;
setDraftKind(null);
setSelectedItem({ kind: "chat", id: chatId });
setPendingChatState((current) => (current ? { ...current, chatId } : current));
setSelectedChat({
id: chat.id,
title: chat.title,
@@ -373,30 +407,6 @@ export default function App() {
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[] = [
...baseChat.messages.map((message) => ({
role: message.role,
@@ -417,6 +427,7 @@ export default function App() {
});
await Promise.all([refreshCollections({ kind: "chat", id: chatId }), refreshChat(chatId)]);
setPendingChatState(null);
};
const handleSendSearch = async (query: string) => {
@@ -569,6 +580,10 @@ export default function App() {
setError(message);
}
if (!isSearchMode) {
setPendingChatState(null);
}
if (selectedItem?.kind === "chat") {
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">
{!isSearchMode ? (
<ChatMessagesPanel messages={messages} isLoading={isLoadingSelection} isSending={isSending} />
<ChatMessagesPanel messages={displayMessages} isLoading={isLoadingSelection} isSending={isSending} />
) : (
<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 type { Message } from "@/lib/api";
import { MarkdownContent } from "@/components/markdown/markdown-content";
type Props = {
messages: Message[];
@@ -11,12 +12,6 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
return (
<>
{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">
{messages.map((message) => {
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
className={cn(
"max-w-[85%] whitespace-pre-wrap rounded-2xl px-4 py-3 text-sm leading-6",
isUser ? "bg-fuchsia-200 text-fuchsia-950" : "bg-violet-900/80 text-fuchsia-50"
"max-w-[85%]",
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>
);

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

@@ -1,5 +1,4 @@
import { useEffect, useRef, useState } from "preact/hooks";
import { Search } from "lucide-preact";
import type { SearchDetail } from "@/lib/api";
import { MarkdownContent } from "@/components/markdown/markdown-content";
import { cn } from "@/lib/utils";
@@ -27,11 +26,10 @@ type Props = {
search: SearchDetail | null;
isLoading: boolean;
isRunning: boolean;
showPrompt?: boolean;
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 [isAnswerExpanded, setIsAnswerExpanded] = 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>
) : 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 ? (
<p className="text-sm text-muted-foreground">No results found.</p>
) : null}

29
web/src/index.css
View File

@@ -3,7 +3,7 @@
@tailwind utilities;
:root {
--background: 282 33% 10%;
--background: 282 33% 8%;
--foreground: 300 35% 95%;
--muted: 287 24% 16%;
--muted-foreground: 297 16% 72%;
@@ -31,7 +31,7 @@ body,
body {
@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;
}
@@ -43,10 +43,33 @@ body {
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 ol {
margin-top: 0.65rem;
margin-left: 1.25rem;
margin-left: 0;
padding-left: 0;
list-style-position: inside;
}
.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}
<SearchResultsPanel search={search} isLoading={false} isRunning={isRunning} showPrompt={false} className="w-full" />
<SearchResultsPanel search={search} isLoading={false} isRunning={isRunning} className="w-full" />
</div>
</div>
);