Refactor App and Chat components for improved layout and user experience

- Updated the App component to enhance layout responsiveness and added flex properties for better alignment.
- Improved the Chat component's structure for consistent styling and overflow handling.
- Introduced thin scrollbar styles in global CSS for a more modern look.
- Enhanced FileManager component with minimum height and improved button styles for better usability.

app/frontend/src/App.js

@@ -58,8 +58,8 @@ function App() {
 
   return (
     <ThemeProvider defaultTheme="light">
-      <div className="min-h-screen bg-background text-foreground transition-colors duration-300">
-        <header className="bg-primary text-primary-foreground py-4 px-6 shadow-md">
+      <div className="min-h-screen bg-background text-foreground transition-colors duration-300 flex flex-col">
+        <header className="bg-primary text-primary-foreground py-4 px-6 shadow-md w-full">
           <div className="container mx-auto flex items-center justify-between">
             <div className="flex items-center gap-2">
               <span role="img" aria-label="brain" className="text-2xl">🧠</span>
@@ -68,65 +68,71 @@ function App() {
             <ThemeToggle />
           </div>
         </header>
-        <main className="container mx-auto py-6 px-4">
-          {showUploadForm && (
-            <FileUpload 
-              sessionId={sessionId} 
-              onUploadSuccess={handleFileUploadSuccess}
-            />
-          )}
-
-          {!showUploadForm && uploadedFiles.length > 0 && (
-            <div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-colors duration-300">
-              <FileManager 
-                files={uploadedFiles}
-                activeFileIndex={activeFileIndex}
-                onSelectFile={handleSelectFile}
-                onUploadNew={handleUploadNew}
+        
+        <main className="container mx-auto py-6 px-4 flex-1 flex items-center justify-center">
+          <div className="w-full max-w-4xl">
+            {showUploadForm && (
+              <FileUpload 
+                sessionId={sessionId} 
+                onUploadSuccess={handleFileUploadSuccess}
               />
-              
-              <div className="rounded-md bg-muted p-4 mb-4 transition-colors duration-300">
-                <h3 className="font-medium mb-2 flex items-center gap-2">
-                  <span role="img" aria-label="document" className="text-xl">
-                    {activeFile.name.toLowerCase().endsWith('.pdf') ? '📕' : '📄'}
-                  </span>
-                  <span>File: <span className="font-bold">{activeFile.name}</span></span>
-                </h3>
-                <p className="text-sm text-muted-foreground">{activeFile.description}</p>
-              </div>
-              
-              {activeFile.suggestedQuestions && activeFile.suggestedQuestions.length > 0 && (
-                <div className="space-y-2 bg-card p-4 rounded-md border border-border mb-4 transition-colors duration-300">
-                  <h4 className="text-sm font-medium flex items-center gap-2">
-                    <span role="img" aria-label="lightbulb" className="text-xl">💡</span>
-                    <span>Suggested questions:</span>
-                  </h4>
-                  <div className="flex flex-wrap gap-2">
-                    {activeFile.suggestedQuestions.map((question, idx) => (
-                      <button
-                        key={idx}
-                        className="text-xs bg-secondary text-secondary-foreground px-3 py-2 rounded-full hover:bg-secondary/80 transition-colors duration-200 flex items-center gap-1"
-                        onClick={() => handleQuestionSelect(question)}
-                      >
-                        <span role="img" aria-label="question" className="text-xs">❓</span>
-                        {question}
-                      </button>
-                    ))}
-                  </div>
+            )}
+
+            {!showUploadForm && uploadedFiles.length > 0 && (
+              <div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-colors duration-300 w-full">
+                <FileManager 
+                  files={uploadedFiles}
+                  activeFileIndex={activeFileIndex}
+                  onSelectFile={handleSelectFile}
+                  onUploadNew={handleUploadNew}
+                />
+                
+                <div className="rounded-md bg-muted p-4 mb-4 transition-colors duration-300 min-h-[100px]">
+                  <h3 className="font-medium mb-2 flex items-center gap-2">
+                    <span role="img" aria-label="document" className="text-xl flex-shrink-0">
+                      {activeFile.name.toLowerCase().endsWith('.pdf') ? '📕' : '📄'}
+                    </span>
+                    <span className="truncate">File: <span className="font-bold">{activeFile.name}</span></span>
+                  </h3>
+                  <p className="text-sm text-muted-foreground line-clamp-3">{activeFile.description}</p>
                 </div>
-              )}
-              
-              <Chat 
-                sessionId={activeFile.sessionId}
-                docDescription={activeFile.description}
-                suggestedQuestions={activeFile.suggestedQuestions}
-                selectedQuestion={selectedQuestion}
-                onQuestionSelected={() => setSelectedQuestion('')}
-              />
-            </div>
-          )}
+                
+                <div className="min-h-[100px] mb-4">
+                  {activeFile.suggestedQuestions && activeFile.suggestedQuestions.length > 0 && (
+                    <div className="space-y-2 bg-card p-4 rounded-md border border-border transition-colors duration-300 h-full">
+                      <h4 className="text-sm font-medium flex items-center gap-2">
+                        <span role="img" aria-label="lightbulb" className="text-xl flex-shrink-0">💡</span>
+                        <span>Suggested questions:</span>
+                      </h4>
+                      <div className="flex flex-wrap gap-2 overflow-y-auto max-h-[100px] pb-1">
+                        {activeFile.suggestedQuestions.map((question, idx) => (
+                          <button
+                            key={idx}
+                            className="text-xs bg-secondary text-secondary-foreground px-3 py-2 rounded-full hover:bg-secondary/80 transition-colors duration-200 flex items-center gap-1 flex-shrink-0"
+                            onClick={() => handleQuestionSelect(question)}
+                          >
+                            <span role="img" aria-label="question" className="text-xs flex-shrink-0">❓</span>
+                            <span className="truncate max-w-[200px]">{question}</span>
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+                
+                <Chat 
+                  sessionId={activeFile.sessionId}
+                  docDescription={activeFile.description}
+                  suggestedQuestions={activeFile.suggestedQuestions}
+                  selectedQuestion={selectedQuestion}
+                  onQuestionSelected={() => setSelectedQuestion('')}
+                />
+              </div>
+            )}
+          </div>
         </main>
-        <footer className="container mx-auto py-4 px-6 text-center text-sm text-muted-foreground">
+        
+        <footer className="w-full py-4 px-6 text-center text-sm text-muted-foreground">
           <p>Made with <span role="img" aria-label="heart" className="text-red-500">❤️</span> and Shadcn/UI</p>
         </footer>
       </div>

app/frontend/src/components/Chat.js

@@ -148,8 +148,8 @@ const Chat = ({ sessionId, docDescription, suggestedQuestions, selectedQuestion,
   );
 
   return (
-    <div className="flex h-[600px] flex-col rounded-lg border border-border bg-card/50 transition-colors duration-300">
-      <div className="flex-1 overflow-y-auto p-4">
+    <div className="flex flex-col rounded-lg border border-border bg-card/50 transition-colors duration-300 h-[600px]">
+      <div className="flex-1 overflow-y-auto p-4 w-full">
         {messages.length === 0 ? (
           <div className="flex h-full flex-col items-center justify-center text-center">
             <div className="mb-4 rounded-full bg-primary/10 p-6 transition-all duration-300">
@@ -162,45 +162,47 @@ const Chat = ({ sessionId, docDescription, suggestedQuestions, selectedQuestion,
             </p>
           </div>
         ) : (
-          messages.map((message, index) => (
-            <div 
-              key={index} 
-              className={`mb-4 flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}
-            >
+          <div className="w-full">
+            {messages.map((message, index) => (
               <div 
-                className={`
-                  flex items-start gap-2 max-w-[80%] rounded-lg px-4 py-3 shadow-sm
-                  ${message.sender === 'user' 
-                    ? 'bg-primary text-primary-foreground' 
-                    : message.isError 
-                      ? 'bg-destructive text-destructive-foreground' 
-                      : 'bg-secondary text-secondary-foreground'
-                  }
-                  transition-all duration-200
-                `}
+                key={index} 
+                className={`mb-4 flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'} w-full`}
               >
-                <span className="mt-1 text-lg">
-                  {message.sender === 'user' 
-                    ? '👤' 
-                    : message.isError 
-                      ? '⚠️' 
-                      : '🤖'}
-                </span>
-                <div className={`text-sm ${message.sender === 'ai' ? 'markdown-content' : ''}`}>
-                  {message.sender === 'user' ? (
-                    message.text
-                  ) : (
-                    <MarkdownContent content={message.text} />
-                  )}
+                <div 
+                  className={`
+                    flex items-start gap-2 max-w-[80%] rounded-lg px-4 py-3 shadow-sm
+                    ${message.sender === 'user' 
+                      ? 'bg-primary text-primary-foreground' 
+                      : message.isError 
+                        ? 'bg-destructive text-destructive-foreground' 
+                        : 'bg-secondary text-secondary-foreground'
+                    }
+                    transition-all duration-200
+                  `}
+                >
+                  <span className="mt-1 text-lg flex-shrink-0">
+                    {message.sender === 'user' 
+                      ? '👤' 
+                      : message.isError 
+                        ? '⚠️' 
+                        : '🤖'}
+                  </span>
+                  <div className={`text-sm ${message.sender === 'ai' ? 'markdown-content' : ''} overflow-hidden`}>
+                    {message.sender === 'user' ? (
+                      message.text
+                    ) : (
+                      <MarkdownContent content={message.text} />
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-          ))
+            ))}
+          </div>
         )}
         {isLoading && (
-          <div className="mb-4 flex justify-start">
+          <div className="mb-4 flex justify-start w-full">
             <div className="flex items-start gap-2 max-w-[80%] rounded-lg px-4 py-3 bg-secondary text-secondary-foreground shadow-sm">
-              <span className="mt-1 text-lg">🤖</span>
+              <span className="mt-1 text-lg flex-shrink-0">🤖</span>
               <div className="flex items-center space-x-2">
                 <div className="h-2 w-2 animate-bounce rounded-full bg-primary"></div>
                 <div className="h-2 w-2 animate-bounce rounded-full bg-primary" style={{ animationDelay: '0.2s' }}></div>
@@ -212,8 +214,8 @@ const Chat = ({ sessionId, docDescription, suggestedQuestions, selectedQuestion,
         <div ref={messagesEndRef} />
       </div>
       
-      <form onSubmit={handleSubmit} className="border-t border-border p-4 transition-colors duration-300">
-        <div className="flex space-x-2">
+      <form onSubmit={handleSubmit} className="border-t border-border p-4 transition-colors duration-300 w-full">
+        <div className="flex space-x-2 w-full">
           <Input
             id="chat-input"
             ref={inputRef}
@@ -227,10 +229,10 @@ const Chat = ({ sessionId, docDescription, suggestedQuestions, selectedQuestion,
           <Button 
             type="submit" 
             disabled={isLoading || !input.trim()}
-            className="transition-colors duration-300 flex items-center gap-2"
+            className="transition-colors duration-300 flex items-center gap-2 flex-shrink-0"
           >
             <span>Send</span>
-            <span role="img" aria-label="send">📤</span>
+            <span role="img" aria-label="send" className="flex-shrink-0">📤</span>
           </Button>
         </div>
       </form>

app/frontend/src/components/FileManager.js

@@ -5,10 +5,10 @@ const FileManager = ({ files, activeFileIndex, onSelectFile, onUploadNew }) => {
   if (!files.length) return null;
   
   return (
-    <div className="mb-6">
+    <div className="mb-6 min-h-[80px]">
       <div className="flex justify-between items-center mb-3">
         <h3 className="text-md font-medium flex items-center gap-2">
-          <span role="img" aria-label="files" className="text-lg">📚</span>
+          <span role="img" aria-label="files" className="text-lg flex-shrink-0">📚</span>
           <span>Your Documents</span>
         </h3>
         <Button 
@@ -17,28 +17,29 @@ const FileManager = ({ files, activeFileIndex, onSelectFile, onUploadNew }) => {
           variant="outline"
           className="flex items-center gap-1 text-xs"
         >
-          <span role="img" aria-label="upload">📄</span>
+          <span role="img" aria-label="upload" className="flex-shrink-0">📄</span>
           <span>Upload New</span>
         </Button>
       </div>
       
-      <div className="overflow-x-auto">
-        <div className="flex gap-2 pb-2">
+      <div className="overflow-x-auto pb-2 scrollbar-thin">
+        <div className="flex gap-2 pb-1 min-w-[300px]">
           {files.map((file, index) => (
             <button
               key={index}
               onClick={() => onSelectFile(index)}
               className={`
-                px-3 py-2 rounded-md text-sm whitespace-nowrap flex items-center gap-1.5 min-w-0 transition-colors
+                px-3 py-2 rounded-md text-sm whitespace-nowrap flex items-center gap-1.5 min-w-0 flex-shrink-0 transition-colors
                 ${activeFileIndex === index 
                   ? 'bg-primary text-primary-foreground'
                   : 'bg-secondary/70 hover:bg-secondary text-secondary-foreground'}
               `}
+              style={{ minWidth: '120px', maxWidth: '200px' }}
             >
-              <span role="img" aria-label="document" className="flex-none">
+              <span role="img" aria-label="document" className="flex-shrink-0">
                 {file.name.toLowerCase().endsWith('.pdf') ? '📕' : '📄'}
               </span>
-              <span className="truncate max-w-[150px]">{file.name}</span>
+              <span className="truncate">{file.name}</span>
             </button>
           ))}
         </div>

app/frontend/src/globals.css

@@ -165,4 +165,58 @@
     max-width: 100%;
     height: auto;
   }
+}
+
+/* Thin scrollbar style */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-secondary/30 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-primary/30 rounded-full transition-colors duration-300;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-primary/50;
+}
+
+/* Make all scrollable areas use the thin scrollbar */
+.overflow-y-auto,
+.overflow-x-auto {
+  @apply scrollbar-thin;
+}
+
+/* Additional content height limits */
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Fix layout shifts with transitions */
+.max-w-md, 
+.max-w-4xl,
+.container {
+  width: 100%;
+}
+
+/* Ensure fixed layout for markdown content */
+.markdown-content img,
+.markdown-content pre,
+.markdown-content table {
+  max-width: 100%;
+  width: auto !important;
+  overflow-x: auto;
+}
+
+/* Prevent layout shifts when switching files */
+button, a {
+  backface-visibility: hidden;
+  transform: translateZ(0);
 }