feat: enhance README and chat components with new features and UI improvements

- Updated README with new screenshots and highlights of features including document and image uploads, keyboard shortcuts, and error handling.
- Improved UI consistency in chat components with adjusted padding and margins for better layout.
- Enhanced file upload component styling for a more polished appearance.
- Added tips section in README for user guidance on document and image attachments.

Author: ivanfioravanti

README.md

@@ -6,17 +6,39 @@ Chatbot Ollama is an open source chat UI for Ollama.
 
 This project is based on [chatbot-ui](https://github.com/mckaywrigley/chatbot-ui) by [Mckay Wrigley](https://github.com/mckaywrigley).
 
-![Chatbot Ollama](./public/screenshots/screenshot-2023-10-02.png)
+![Chatbot Ollama – Dark](./public/screenshots/screenshot-2025-09-dark.png)
+
+![Chatbot Ollama – Light](./public/screenshots/screenshot-2025-09-light.png)
+
+> If the image does not render, place the new screenshot at `public/screenshots/screenshot-2025-09-dark.png` (light version optional at `public/screenshots/screenshot-2025-09-light.png`).
+
+## Highlights (new)
+
+- Blue theme polished for light and dark modes with consistent sidebars, headers, and overlays.
+- Document upload (PDF, TXT, MD):
+  - PDFs parsed server‑side for reliability; text/markdown read client‑side.
+  - The full (truncated) content is attached invisibly to the model prompt — the UI stays clean.
+  - 50 MB size cap, 100 page cap (PDF), 50k characters per attachment.
+- Image upload: attach images and send them to vision‑capable models (base64). Non‑vision models simply ignore images.
+- Code blocks: copy button, language label, optional line numbers, line‑wrap toggle, and “download as file”.
+- Streaming & control: Stop Generation button, auto‑scroll toggle (pause/resume when you scroll up).
+- Keyboard shortcuts:
+  - Enter to send, Shift+Enter for newline
+  - Esc to blur input
+  - Ctrl/Cmd+L clears the composer
+  - Arrow Up recalls the last user message
+- Error handling: a consistent toast shows details, Copy details, and Retry.
+- Conversation tools: Copy messages button copies the whole visible conversation (with role labels and any attached content).
+- Sidebar UX: search inputs are theme‑aware, prompts list matches chat list styling, improved hover/selection.
 
 ## Updates
 
 Chatbot Ollama will be updated over time.
 
 ### Next up
 
-- [ ] pull a model
-- [ ] delete a model
-- [ ] show model information
+- [ ] Model management (pull/delete)
+- [ ] Model info/details dialog
 
 ## Docker
 
@@ -73,6 +95,12 @@ npm run dev
 
 You should be able to start chatting.
 
+### Tips
+
+- Attach documents via the paper icon in the composer — the content is included for the model invisibly so the chat stays uncluttered.
+- Attach an image with the camera icon — vision models will “see” it; others will ignore it.
+- Use the clipboard icon in the sticky header to copy the current conversation.
+
 ## Configuration
 
 When deploying the application, the following environment variables can be set:

components/Chat/Chat.tsx

@@ -523,7 +523,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
               </>
             ) : (
               <>
-                <div className="sticky top-0 z-10 flex justify-center items-center gap-3 bg-white/80 dark:bg-[#0e1728]/80 backdrop-blur-lg border-b border-gray-200 dark:border-[#1b2a4a] py-3 px-4 text-sm text-gray-600 dark:text-gray-300 shadow-sm">
+                <div className="sticky top-0 z-10 flex justify-center items-center gap-3 bg-white/80 dark:bg-[#0e1728]/80 backdrop-blur-lg border-b border-gray-200 dark:border-[#1b2a4a] py-2 px-3 text-sm text-gray-600 dark:text-gray-300 shadow-sm">
                   <div className="flex items-center gap-2">
                     <span className="font-medium">{t('Model')}:</span>
                     <span className="text-primary-600 dark:text-primary-400 font-semibold">{selectedConversation?.model.name}</span>
@@ -577,7 +577,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
                   </div>
                 )}
 
-                <div className="space-y-4 py-4">
+                <div className="space-y-3 py-2">
                   {selectedConversation?.messages.map((message, index) => (
                     <MemoizedChatMessage
                       key={index}

components/Chat/ChatInput.tsx

@@ -361,7 +361,7 @@ export const ChatInput = ({
   }, []);
 
   return (
-    <div className="absolute bottom-0 left-0 w-full border-transparent bg-gradient-to-b from-transparent via-white/90 to-white/90 pt-6 dark:border-white/20 dark:via-[#0e1728]/90 dark:to-[#0e1728]/90 md:pt-2 backdrop-blur-sm">
+    <div className="absolute bottom-0 left-0 w-full border-transparent bg-gradient-to-b from-transparent via-white/90 to-white/90 pt-3 dark:border-white/20 dark:via-[#0e1728]/90 dark:to-[#0e1728]/90 md:pt-2 backdrop-blur-sm">
       <div className="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
         {messageIsStreaming && (
           <button
@@ -470,7 +470,7 @@ export const ChatInput = ({
           )}
 
           {showFileUpload && (
-            <div className="absolute bottom-12 w-full px-1">
+            <div className="absolute bottom-12 left-1/2 -translate-x-1/2 w-[min(92vw,720px)] px-3 z-40">
               <FileUpload
                 onFileSelect={handleFileSelect}
                 onFileRemove={() => setSelectedFile(null)}
@@ -488,7 +488,7 @@ export const ChatInput = ({
           )}
 
           {showImageUpload && (
-            <div className="absolute bottom-24 w-full px-1">
+            <div className="absolute bottom-12 left-1/2 -translate-x-1/2 w-[min(92vw,720px)] px-3 z-40">
               <FileUpload
                 onFileSelect={async (file) => {
                   // basic image validation

components/Chat/ChatLoader.tsx

@@ -9,7 +9,7 @@ export const ChatLoader: FC<Props> = () => {
       className="group border-b border-gray-200 bg-gray-50/90 text-gray-800 dark:border-[#1b2a4a] dark:bg-[#0f1d35]/95 dark:text-gray-100"
       style={{ overflowWrap: 'anywhere' }}
     >
-      <div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
+      <div className="m-auto flex gap-3 p-3 text-base md:max-w-2xl md:gap-4 md:py-4 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
         <div className="min-w-[40px] items-end">
           <div className="flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-r from-purple-500/70 to-blue-500/70 text-white">
             <IconRobot size={20} stroke={2.5} />

components/Chat/ChatMessage.tsx

@@ -138,14 +138,14 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
       }`}
       style={{ overflowWrap: 'anywhere' }}
     >
-      <div className="relative m-auto flex p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
+      <div className="relative m-auto flex p-3 text-base md:max-w-2xl md:gap-4 md:py-4 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
         <div className="min-w-[40px] text-right">
           {message.role === 'assistant' ? (
-            <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-accent-purple text-white shadow-card hover:shadow-hover transition-all duration-200 group-hover:scale-105">
+            <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-accent-purple text-white shadow-card hover:shadow-hover transition-all duration-200 group-hover:scale-105">
               <IconRobot size={20} stroke={2} />
             </div>
           ) : (
-            <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-accent-green to-accent-blue text-white shadow-card hover:shadow-hover transition-all duration-200 group-hover:scale-105">
+            <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-gradient-to-br from-accent-green to-accent-blue text-white shadow-card hover:shadow-hover transition-all duration-200 group-hover:scale-105">
               <IconUser size={20} stroke={2} />
             </div>
           )}
@@ -158,7 +158,7 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
                 <div className="flex w-full flex-col">
                   <textarea
                     ref={textareaRef}
-                    className="w-full resize-none whitespace-pre-wrap border-2 border-gray-200 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 p-4 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-200"
+                    className="w-full resize-none whitespace-pre-wrap border-2 border-gray-200 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 p-3 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-200"
                     value={messageContent}
                     onChange={handleInputChange}
                     onKeyDown={handlePressEnter}
@@ -173,7 +173,7 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
                     }}
                   />
 
-                  <div className="mt-6 flex justify-center space-x-3">
+                  <div className="mt-4 flex justify-center space-x-3">
                     <button
                       className="px-6 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white font-medium transition-all duration-200 shadow-card hover:shadow-hover disabled:opacity-50 disabled:cursor-not-allowed"
                       onClick={handleEditMessage}

components/FileUpload/FileUpload.tsx

@@ -98,10 +98,10 @@ export const FileUpload: FC<Props> = ({
     <div className="relative">
       {!selectedFile ? (
         <div
-          className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
+          className={`border-2 border-dashed rounded-xl p-6 text-center transition-colors shadow-card ${
             isDragging
               ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-              : 'border-neutral-300 dark:border-neutral-600 hover:border-neutral-400 dark:hover:border-neutral-500'
+              : 'border-blue-200 bg-white dark:border-[#1b2a4a] dark:bg-[#0f1d35]'
           }`}
           onDrop={handleDrop}
           onDragOver={handleDragOver}