heimoshuiyu/chatgpt-api-web
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Enhance MessageBubble component with improved styling and collapsible content

Browse Source
This commit is contained in:
ecwu
2025-02-07 17:30:52 +00:00
parent 3e89e88c1d
commit 332a645e34
2 changed files with 7638 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7585
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

70
src/components/MessageBubble.tsx
View File

@@ -307,24 +307,26 @@ export default function Message(props: { messageIndex: number }) {
{chat.role === "assistant" ? (
<div className="border-b border-border dark:border-border-dark pb-4">
{chat.reasoning_content ? (
<Collapsible className="mb-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h4 className="text-sm font-semibold text-gray-500">
{chat.response_model_name}
</h4>
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm">
<LightBulbIcon className="h-3 w-3 text-gray-500" />
<span className="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger>
<Card className="bg-muted hover:bg-muted/80 mb-5 w-full lg:w-[65%]">
<Collapsible>
<div className="flex items-center justify-between px-3 py-1">
<div className="flex items-center">
<h4 className="font-semibold text-sm">
Think Content of {chat.response_model_name}
</h4>
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm">
<LightBulbIcon className="h-3 w-3 text-gray-500" />
<span className="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger>
</div>
</div>
</div>
<CollapsibleContent className="ml-5 text-gray-500 message-content">
{chat.reasoning_content.trim()}
</CollapsibleContent>
</Collapsible>
<CollapsibleContent className="ml-5 text-gray-500 message-content p">
{chat.reasoning_content.trim()}
</CollapsibleContent>
</Collapsible>
</Card>
) : null}
<div>
{chat.hide ? (
@@ -340,6 +342,12 @@ export default function Message(props: { messageIndex: number }) {
rehypePlugins={[rehypeKatex]}
//break={true}
components={{
strong: ({ children }) => (
<strong className="font-semibold">{children}</strong>
),
em: ({ children }) => (
<em className="italic text-primary">{children}</em>
),
code: ({ children }) => (
<code className="bg-muted px-1 py-0.5 rounded">
{children}
@@ -360,6 +368,34 @@ export default function Message(props: { messageIndex: number }) {
{children}
</a>
),
ol: ({ children }) => (
<ol className="list-decimal ml-6 space-y-2">
{children}
</ol>
),
ul: ({ children }) => (
<ul className="list-disc ml-6 space-y-2">{children}</ul>
),
h1: ({ children }) => (
<h1 className="text-2xl font-bold mt-6 mb-4">
{children}
</h1>
),
h2: ({ children }) => (
<h2 className="text-xl font-bold mt-5 mb-3">
{children}
</h2>
),
h3: ({ children }) => (
<h3 className="text-lg font-semibold mt-4 mb-2">
{children}
</h3>
),
blockquote: ({ children }) => (
<blockquote className="border-l-4 border-muted pl-4 italic">
{children}
</blockquote>
),
}}
>
{getMessageText(chat)}