Merge branch 'adrianliechti:main' into main

Author: gtonic

package-lock.json

@@ -30,6 +30,7 @@
     "react-syntax-highlighter": "^15.6.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "wavtools": "^0.1.5",
     "zod": "^3.25.76"

package.json

@@ -19,7 +19,6 @@ import {
 import { getConfig } from "../config";
 import { useChat } from "../hooks/useChat";
 import { useRepositories } from "../hooks/useRepositories";
-import { useTextPaste } from "../hooks/useTextPaste";
 import { useTranscription } from "../hooks/useTranscription";
 import { useDropZone } from "../hooks/useDropZone";
 import { useSettings } from "../hooks/useSettings";
@@ -47,9 +46,6 @@ export function ChatInput() {
   const contentEditableRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  // Custom hook for plain text paste handling
-  const handlePaste = useTextPaste(contentEditableRef, setContent);
-
   // Generate static random placeholder text for new chats, updates when profile name changes
   const randomPlaceholder = useMemo(() => {
     const personalizedVariations = [
@@ -476,19 +472,20 @@ export function ChatInput() {
             suppressContentEditableWarning={true}
             onInput={(e) => {
               const target = e.target as HTMLDivElement;
+
+              const input = target.innerText || target.textContent || '';
+              setContent(input);
 
-              // Simple approach: use innerText which preserves line breaks
-              const newContent = target.innerText || '';
-              
-              setContent(newContent);
-              
-              // Hide prompt suggestions when user starts typing
-              if (newContent.trim() && showPromptSuggestions) {
+              if (input.trim() && showPromptSuggestions) {
                 setShowPromptSuggestions(false);
               }
             }}
             onKeyDown={handleKeyDown}
-            onPaste={handlePaste}
+            onPaste={(e) => {
+              e.preventDefault();
+              const text = e.clipboardData.getData('text/plain');
+              document.execCommand('insertText', false, text);
+            }}
           />
 
           {/* CSS-animated placeholder */}
@@ -508,7 +505,7 @@ export function ChatInput() {
         </div>
 
         {/* Controls */}
-        <div className="flex items-center justify-between p-3 pt-0 pb-6 md:pb-3">
+        <div className="flex items-center justify-between p-3 pt-0 pb-8 md:pb-3">
           <div className="flex items-center gap-2">
             <Button
               type="button"

src/components/ChatInput.tsx

@@ -8,9 +8,10 @@ import { getConfig } from "../config";
 
 type ChatMessageProps = {
   message: Message;
+  isLast?: boolean;
 };
 
-export function ChatMessage({ message }: ChatMessageProps) {
+export function ChatMessage({ message, ...props }: ChatMessageProps) {
   const isUser = message.role === Role.User;
 
   const config = getConfig();
@@ -78,10 +79,12 @@ export function ChatMessage({ message }: ChatMessageProps) {
         )}
 
         {!isUser && (
-          <div className="flex justify-between items-center mt-2 chat-message-actions">
+          <div className={`flex justify-between items-center mt-2 ${
+            props.isLast ? 'chat-message-actions !opacity-100' : 'chat-message-actions opacity-0'
+          }`}>
             <div className="flex items-center gap-2">
-              <CopyButton text={message.content} />
-              {enableTTS && <PlayButton text={message.content} />}
+              <CopyButton text={message.content} size={4} />
+              {enableTTS && <PlayButton text={message.content} size={4} />}
             </div>
           </div>
         )}

src/components/ChatMessage.tsx

@@ -2,7 +2,12 @@ import { useState } from 'react';
 import { Copy as CopyIcon, CopyCheck as CopyCheckIcon } from "lucide-react";
 import { Button } from "@headlessui/react";
 
-export const CopyButton = ({ text }: { text: string }) => {
+type CopyButtonProps = {
+  text: string;
+  size?: number;
+};
+
+export const CopyButton = ({ text, ...props }: CopyButtonProps) => {
     const [copied, setCopied] = useState(false);
 
     const handleCopy = async () => {
@@ -15,9 +20,8 @@ export const CopyButton = ({ text }: { text: string }) => {
         }
     };
 
-    const buttonClasses = "text-neutral-400 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300 transition-colors opacity-60 hover:opacity-100";
-
-    const iconSize = "h-3 w-3";
+    const buttonClasses = "text-neutral-400 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300 transition-colors opacity-60 hover:opacity-100 p-1";
+    const iconSize = `h-${props.size ?? 3} w-${props.size ?? 3}`;
 
     return (
         <Button

src/components/CopyButton.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import ReactMarkdown, { type Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
 import rehypeRaw from 'rehype-raw';
 import rehypeSanitize from 'rehype-sanitize';
 import { MermaidRenderer } from './MermaidRenderer';
@@ -214,7 +215,7 @@ const components: Partial<Components> = {
     },
 };
 
-const remarkPlugins = [remarkGfm];
+const remarkPlugins = [remarkGfm, remarkBreaks];
 const rehypePlugins = [rehypeRaw, rehypeSanitize];
 
 const NonMemoizedMarkdown = ({ children }: { children: string }) => {

src/components/Markdown.tsx

@@ -6,9 +6,10 @@ import { Client } from '../lib/client';
 type PlayButtonProps = {
   text: string;
   voice?: string;
+  size?: number;
 };
 
-export function PlayButton({ text }: PlayButtonProps) {
+export function PlayButton({ text, ...props }: PlayButtonProps) {
   const [isPlaying, setIsPlaying] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -31,8 +32,8 @@ export function PlayButton({ text }: PlayButtonProps) {
     }
   };
 
-  const buttonClasses = "text-neutral-400 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300 transition-colors opacity-60 hover:opacity-100 disabled:opacity-30";
-  const iconSize = "h-3 w-3";
+  const buttonClasses = "text-neutral-400 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300 transition-colors opacity-60 hover:opacity-100 disabled:opacity-30 p-1";
+  const iconSize = `h-${props.size ?? 3} w-${props.size ?? 3}`;
 
   return (
     <Button

src/components/PlayButton.tsx

@@ -132,7 +132,7 @@ body {
 }
 
 .chat-message-actions {
-  @apply opacity-0 transition-opacity duration-200;
+  @apply transition-opacity duration-200;
 }
 
 .group:hover .chat-message-actions {

src/hooks/useTextPaste.ts

@@ -72,10 +72,6 @@ export function ChatPage() {
     dependencies: [chat, messages],
   });
 
-  // Animation state for chat input
-  const [isAnimating, setIsAnimating] = useState(false);
-  const prevMessagesCountRef = useRef(0);
-
   // Set up navigation actions (only once on mount)
   useEffect(() => {
     setRightActions(
@@ -161,22 +157,6 @@ export function ChatPage() {
     prevMessagesLengthRef.current = messages.length;
   }, [messages.length, enableAutoScroll]);
 
-  // Handle animation when first message is added
-  useEffect(() => {
-    if (prevMessagesCountRef.current === 0 && messages.length > 0) {
-      setIsAnimating(true);
-      // Reset animation state after animation completes
-      const animationTimer = setTimeout(() => {
-        setIsAnimating(false);
-      }, 600); // Match the CSS transition duration
-      
-      return () => {
-        clearTimeout(animationTimer);
-      };
-    }
-    prevMessagesCountRef.current = messages.length;
-  }, [messages.length]);
-
   return (
     <div className="h-full w-full flex overflow-hidden relative">
       {messages.length === 0 && <BackgroundImage />}
@@ -242,7 +222,7 @@ export function ChatPage() {
                 })()}
 
                 {messages.map((message, idx) => (
-                  <ChatMessage key={idx} message={message} />
+                  <ChatMessage key={idx} message={message} isLast={idx === messages.length - 1} />
                 ))}
 
                 {/* sentinel for scrollIntoView */}
@@ -254,14 +234,10 @@ export function ChatPage() {
 
         {/* Chat Input - hidden during voice mode */}
         {!isVoiceMode && (
-          <footer className={`absolute left-0 right-0 bg-transparent md:pb-4 pb-0 px-3 pointer-events-none transition-all duration-600 ease-out z-20 ${
-            messages.length === 0 ? 'bottom-0 md:bottom-1/3 md:transform md:translate-y-1/2' : 'bottom-0'
-          } ${isAnimating ? 'transition-all duration-600 ease-out' : ''}`}>
-            <div className={`relative pointer-events-auto ${
-              layoutMode === 'wide' ? 'max-w-full md:max-w-[80vw] mx-auto' : 'max-content-width'
-            } ${messages.length === 0 ? 'max-w-4xl' : ''} ${
-              showRepositoryDrawer ? 'md:mr-80 md:pr-4' : ''
-            }`}>
+          <footer className={`fixed bottom-0 left-0 right-0 md:px-3 md:pb-4 pointer-events-none z-20 transition-all duration-600 ease-out ${
+            messages.length === 0 ? 'md:bottom-1/3 md:transform md:translate-y-1/2' : ''
+          }`}>
+            <div className="relative pointer-events-auto md:max-w-4xl mx-auto">
               <ChatInput />
             </div>
           </footer>