bug fixes related to chat input element

code-forge-temple · code-forge-temple · commit 232f8bb760dd · 2025-05-04T21:50:54.000+03:00
diff --git a/README.md b/README.md
@@ -43,6 +43,7 @@ It is compatible with all Chromium and Gecko-based browsers: Chrome, Vivaldi, Op
 - **Model Management:** Select, refresh, download, and delete models.
 - **Advanced Capture Tools:** Options for capturing both text and images are available. Captured content is inserted directly into your chat using special tags (`@captured-text` for text and `@captured-image` for images).
 - **Prompt Customization:** Adjust and customize prompts to instruct the AI model on how to generate responses.
+- **File Attachments:** Upload files to the chat interface and reference them in discussions using the `@attached-files` tag.
 
 ## Prerequisites
 
@@ -203,6 +204,7 @@ To install the the compiled extension, for:
    - A responsive, draggable chat box will open on the active webpage.
    - Use the chat interface to send messages to the Ollama AI service, review conversation history, and manage models.
    - Additional features include capturing selected HTML content (that can be referenced in the discussion with `@captured-text` tag), capturing an image of an area on the page (that can be referenced in the discussion with `@captured-image` tag) for VISION LLMs, and customizing prompts (to instruct the loaded model on how to answer).
+   - You can also attach files to the chat using the **Attach Files** button. Uploaded files can be referenced in the discussion using the `@attached-files` tag.
 
 4. **Interacting with the Chat:**
    - Type your query in the chat input and press Enter or click the `Send` button.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "scribe-pal",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "description": "ScribePal is an intelligent browser extension that leverages AI to empower your web experience.",
     "author": "Code Forge Temple",
     "type": "module",
diff --git a/src/popup/popup.html b/src/popup/popup.html
@@ -7,7 +7,7 @@
 <body>
     <div class="menu-item input-with-button">
         <label for="ollama-url">Ollama Server URL:</label>
-        <input type="text" id="ollama-url" placeholder="http://your-server:port">
+        <input type="text" id="ollama-url" placeholder="http://ollama-server:11434">
         <button id="save-ollama-url">Save</button>
     </div>
     <div class="menu-item theme-selection">
diff --git a/src/tab/components/ChatBox/components/ChatInput/ChatInput.scss b/src/tab/components/ChatBox/components/ChatInput/ChatInput.scss
@@ -5,13 +5,17 @@
     display: flex;
     margin: 10px 0 0 0;
 
-    input[type="text"] {
+    textarea {
         flex-grow: 1;
         padding: 5px;
         border: 1px solid #ccc;
         border-radius: 4px 0 0 4px;
         background: white;
         color: black;
+        white-space: nowrap;
+        overflow: hidden;
+        resize: none;
+        font-family: monospace;
     }
 
     button {
@@ -23,7 +27,7 @@
 
 .dark-theme {
     .chat-input-container {
-        input {
+        textarea {
             background: commonVars.$dark-theme-secondary-color;
             border-color: commonVars.$dark-theme-secondary-color;
             color: white;
diff --git a/src/tab/components/ChatBox/components/ChatInput/ChatInput.tsx b/src/tab/components/ChatBox/components/ChatInput/ChatInput.tsx
@@ -18,7 +18,7 @@ type ChatInputProps = {
 }
 
 export const ChatInput = withShadowStyles(({message, onMessageChange, onSend}: ChatInputProps) => {
-    const inputRef = useRef<HTMLInputElement>(null);
+    const inputRef = useRef<HTMLTextAreaElement>(null);
     const [caret, setCaret] = useState<number>(0);
     const [suggestionsVisible, setSuggestionsVisible] = useState(false);
     const [suggestionPosition, setSuggestionPosition] = useState({top: 0, left: 0});
@@ -43,7 +43,7 @@ export const ChatInput = withShadowStyles(({message, onMessageChange, onSend}: C
                 const visibleWidth = inputRef.current.clientWidth;
 
                 if (caretPixelPos > scrollLeft + visibleWidth) {
-                    inputRef.current.scrollLeft = caretPixelPos - visibleWidth + 15;
+                    inputRef.current.scrollLeft = caretPixelPos - visibleWidth + ctx.measureText('M').width;
                 }
             }
         }
@@ -92,16 +92,18 @@ export const ChatInput = withShadowStyles(({message, onMessageChange, onSend}: C
 
     return (
         <div className="chat-input-container">
-            <input
+            <textarea
                 ref={inputRef}
-                type="text"
+                rows={1}
                 placeholder="Type your message..."
                 value={message}
-                onChange={(e) => onMessageChange(e.target.value)}
                 onPaste={(e) => {
                     e.preventDefault();
 
-                    const pastedText = e.clipboardData.getData('text');
+                    const pastedText = e.clipboardData.getData('text')
+                        .replace(/\r\n/g, ' ')
+                        .replace(/\n/g, ' ')
+                        .replace(/\t/g, ' ');
                     const input = inputRef.current;
 
                     if (!input) return;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "scribe-pal",`
`3`		`- "version": "1.4.0",`
	`3`	`+ "version": "1.4.1",`
`4`	`4`	`"description": "ScribePal is an intelligent browser extension that leverages AI to empower your web experience.",`
`5`	`5`	`"author": "Code Forge Temple",`
`6`	`6`	`"type": "module",`