ryan
4ac0754ea7
Extract logic from god components into custom hooks (useAuthCheck, useConversations, useChat, usePresignedUrl, useAdminUsers, useOIDCAuth). Eliminate unnecessary useEffects per React guidelines — scroll is now imperative, isAdmin comes from useAuthCheck instead of a separate fetch. ConversationList becomes a pure presentational component. Wrap bubble components in React.memo. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import ReactMarkdown from "react-markdown";
|
|
import { cn } from "../lib/utils";
|
|
|
|
type AnswerBubbleProps = {
|
|
text: string;
|
|
loading?: boolean;
|
|
};
|
|
|
|
export const AnswerBubble = React.memo(({ text, loading }: AnswerBubbleProps) => {
|
|
return (
|
|
<div className="flex justify-start message-enter">
|
|
<div
|
|
className={cn(
|
|
"max-w-[78%] rounded-3xl rounded-bl-md",
|
|
"bg-warm-white border border-sand-light/70",
|
|
"shadow-sm shadow-sand/30",
|
|
"overflow-hidden",
|
|
)}
|
|
>
|
|
<div className="h-0.5 w-full bg-gradient-to-r from-amber-soft via-amber-glow/50 to-transparent" />
|
|
|
|
<div className="px-4 py-3">
|
|
{loading ? (
|
|
<div className="flex items-center gap-1.5 py-1 px-1">
|
|
<span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
|
|
<span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
|
|
<span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
|
|
</div>
|
|
) : (
|
|
<div className="markdown-content text-sm leading-relaxed text-charcoal">
|
|
<ReactMarkdown>{text}</ReactMarkdown>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|