story-kit: merge 163_story_remove_bubble_styling_from_streaming_chat_messages

frontend/src/components/Chat.tsx

@@ -761,45 +761,49 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 								>
 									<div
 										style={{
-											maxWidth: "85%",
-											padding: "16px 20px",
-											borderRadius: "12px",
-											background: "#262626",
-											color: "#fff",
-											border: "1px solid #404040",
-											fontFamily: "system-ui, -apple-system, sans-serif",
-											fontSize: "0.95rem",
-											fontWeight: 400,
-											whiteSpace: "pre-wrap",
-											lineHeight: 1.6,
+											maxWidth: "100%",
+											padding: "0",
+											borderRadius: "0",
+											background: "transparent",
+											color: "#ececec",
+											border: "none",
+											fontFamily: "inherit",
+											fontSize: "1em",
+											fontWeight: "500",
+											whiteSpace: "normal",
+											lineHeight: "1.6",
 										}}
 									>
-										<Markdown
-											components={{
-												// eslint-disable-next-line @typescript-eslint/no-explicit-any
-												// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
-												code: ({ className, children, ...props }: any) => {
-													const match = /language-(\w+)/.exec(className || "");
-													const isInline = !className;
-													return !isInline && match ? (
-														<SyntaxHighlighter
-															// biome-ignore lint/suspicious/noExplicitAny: oneDark style types are incompatible
-															style={oneDark as any}
-															language={match[1]}
-															PreTag="div"
-														>
-															{String(children).replace(/\n$/, "")}
-														</SyntaxHighlighter>
-													) : (
-														<code className={className} {...props}>
-															{children}
-														</code>
-													);
-												},
-											}}
-										>
-											{streamingContent}
-										</Markdown>
+										<div className="markdown-body">
+											<Markdown
+												components={{
+													// eslint-disable-next-line @typescript-eslint/no-explicit-any
+													// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
+													code: ({ className, children, ...props }: any) => {
+														const match = /language-(\w+)/.exec(
+															className || "",
+														);
+														const isInline = !className;
+														return !isInline && match ? (
+															<SyntaxHighlighter
+																// biome-ignore lint/suspicious/noExplicitAny: oneDark style types are incompatible
+																style={oneDark as any}
+																language={match[1]}
+																PreTag="div"
+															>
+																{String(children).replace(/\n$/, "")}
+															</SyntaxHighlighter>
+														) : (
+															<code className={className} {...props}>
+																{children}
+															</code>
+														);
+													},
+												}}
+											>
+												{streamingContent}
+											</Markdown>
+										</div>
 									</div>
 								</div>
 							)}