Merge pull request 'Render assistant replies as full-width text instead of bubbles' (#37) from conversation-routing into main

Reviewed-on: #37

raggr-frontend/src/App.css

@@ -60,7 +60,7 @@ body {
 ::-webkit-scrollbar-thumb { background: var(--color-sand); border-radius: 99px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--color-warm-gray); }
 
-/* ── Markdown in answer bubbles ─────────────────────── */
+/* ── Markdown in assistant answers ──────────────────── */
 .markdown-content p { margin: 0.5em 0; line-height: 1.7; }
 .markdown-content p:first-child { margin-top: 0; }
 .markdown-content p:last-child { margin-bottom: 0; }

raggr-frontend/src/components/AnswerBubble.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { cn } from "../lib/utils";
 
 type AnswerBubbleProps = {
   text: string;
@@ -10,31 +9,18 @@ type AnswerBubbleProps = {
 
 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 remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>
-            </div>
-          )}
+    <div className="message-enter">
+      {loading ? (
+        <div className="flex items-center gap-1.5 py-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>
+      ) : (
+        <div className="markdown-content text-[15px] leading-relaxed text-charcoal">
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>
+        </div>
+      )}
     </div>
   );
 });

raggr-frontend/src/components/ChatScreen.tsx

@@ -274,7 +274,7 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
         ) : (
           <>
             <div className="flex-1 overflow-y-auto px-4 py-6">
-              <div className="max-w-2xl mx-auto flex flex-col gap-3">
+              <div className="max-w-3xl mx-auto flex flex-col gap-6">
                 {showConversations && (
                   <div className="md:hidden mb-3 bg-warm-white rounded-2xl border border-sand-light p-3 shadow-sm">
                     <ConversationList
@@ -317,7 +317,7 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
             </div>
 
             <footer className="border-t border-sand-light/40 bg-cream">
-              <div className="max-w-2xl mx-auto px-4 py-3">
+              <div className="max-w-3xl mx-auto px-4 py-3">
                 <MessageInput
                   query={query}
                   handleQueryChange={handleQueryChange}