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