feat: Added WYSIWYG and code formatting features to input

ui/desktop/src/ChatWindow.tsx

@@ -7,7 +7,7 @@
 import Splash from './components/Splash';
 import GooseMessage from './components/GooseMessage';
 import UserMessage from './components/UserMessage';
-import Input from './components/Input';
+import Input from './components/Input/index';
 import MoreMenu from './components/MoreMenu';
 import BottomMenu from './components/BottomMenu';
 import LoadingGoose from './components/LoadingGoose';
@@ -41,7 +41,7 @@
   chats,
   setChats,
   selectedChatId,
   setSelectedChatId,
   initialQuery,
   setProgressMessage,
   setWorking,
@@ -94,7 +94,7 @@
         updateWorking(Working.Working);
       }
     },
     onFinish: async (message, options) => {
       setTimeout(() => {
         setProgressMessage('Task finished. Click here to expand.');
         updateWorking(Working.Idle);
@@ -120,7 +120,7 @@
       c.id === selectedChatId ? { ...c, messages } : c
     );
     setChats(updatedChats);
   }, [messages, selectedChatId]);
 
   const initialQueryAppended = useRef(false);
   useEffect(() => {
@@ -128,7 +128,7 @@
       append({ role: 'user', content: initialQuery });
       initialQueryAppended.current = true;
     }
   }, [initialQuery]);
 
   useEffect(() => {
     if (messages.length > 0) {

ui/desktop/src/components/Input/CodeBlock.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+interface CodeBlockProps {
+  node?: any;
+  inline?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const CodeBlock = ({ node, inline, className, children, ...props }: CodeBlockProps) => {
+  const match = /language-(\w+)/.exec(className || '');
+  const language = match ? match[1] : '';
+
+  return !inline ? (
+    <SyntaxHighlighter
+      style={oneDark}
+      language={language || 'text'}
+      PreTag="div"
+      {...props}
+    >
+      {String(children).replace(/\n$/, '')}
+    </SyntaxHighlighter>
+  ) : (
+    <code className={className} {...props}>
+      {children}
+    </code>
+  );
+};

ui/desktop/src/components/Input/InputCommandBar.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Button } from '../ui/button';
+import Send from '../ui/Send';
+import Stop from '../ui/Stop';
+import { Paperclip, Code } from 'lucide-react';
+import { PreviewButton } from './PreviewButton';
+
+interface InputCommandBarProps {
+  text: string;
+  isPreview: boolean;
+  disabled: boolean;
+  isLoading: boolean;
+  onStop?: () => void;
+  togglePreview: () => void;
+  handleCodeFormat: () => void;
+  handleFileSelect: () => void;
+  onFormSubmit: (e: React.FormEvent) => void;
+}
+
+export const InputCommandBar = ({
+  text,
+  isPreview,
+  disabled,
+  isLoading,
+  onStop,
+  togglePreview,
+  handleCodeFormat,
+  handleFileSelect,
+}: InputCommandBarProps) => (
+  <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1 pl-2">
+    <PreviewButton
+      isPreview={isPreview}
+      disabled={disabled}
+      hasText={!!text.trim()}
+      onClick={togglePreview}
+    />
+    <Button
+      type="button"
+      size="icon"
+      variant="ghost"
+      onClick={handleCodeFormat}
+      disabled={disabled || isPreview}
+      className={`text-indigo-600 dark:text-indigo-300 hover:text-indigo-700 dark:hover:text-indigo-200 hover:bg-indigo-100 dark:hover:bg-indigo-800 ${
+        disabled || isPreview ? 'opacity-50 cursor-not-allowed' : ''
+      }`}
+    >
+      <Code size={20} />
+    </Button>
+    <Button
+      type="button"
+      size="icon"
+      variant="ghost"
+      onClick={handleFileSelect}
+      disabled={disabled || isPreview}
+      className={`text-indigo-600 dark:text-indigo-300 hover:text-indigo-700 dark:hover:text-indigo-200 hover:bg-indigo-100 dark:hover:bg-indigo-800 ${
+        disabled || isPreview ? 'opacity-50 cursor-not-allowed' : ''
+      }`}
+    >
+      <Paperclip size={20} />
+    </Button>
+    {isLoading ? (
+      <Button
+        type="button"
+        size="icon"
+        variant="ghost"
+        onClick={onStop}
+        className="bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200 text-indigo-600 hover:opacity-50"
+      >
+        <Stop size={24} />
+      </Button>
+    ) : (
+      <Button
+        type="submit"
+        size="icon"
+        variant="ghost"
+        disabled={disabled || !text.trim()}
+        className={`text-indigo-600 dark:text-indigo-300 hover:text-indigo-700 dark:hover:text-indigo-200 hover:bg-indigo-100 dark:hover:bg-indigo-800 ${
+          disabled || !text.trim() ? 'opacity-50 cursor-not-allowed' : ''
+        }`}
+      >
+        <Send size={24} />
+      </Button>
+    )}
+  </div>
+);

ui/desktop/src/components/Input/InputPreview.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { CodeBlock } from './CodeBlock';
+
+interface InputPreviewProps {
+  text: string;
+  previewRef: React.RefObject<HTMLDivElement>;
+}
+
+export const InputPreview = ({ text, previewRef }: InputPreviewProps) => (
+  <div 
+    ref={previewRef}
+    className="w-full min-h-[1rem] max-h-[240px] prose dark:prose-invert max-w-none text-14 cursor-default overflow-y-auto pr-3"
+  >
+    <ReactMarkdown
+      components={{
+        code: CodeBlock
+      }}
+    >
+      {text || 'What should goose do?'}
+    </ReactMarkdown>
+  </div>
+);

ui/desktop/src/components/Input/InputTextArea.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface InputTextAreaProps {
+  text: string;
+  disabled: boolean;
+  textAreaRef: React.RefObject<HTMLTextAreaElement>;
+  handleChange: (evt: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleKeyDown: (evt: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+}
+
+export const InputTextArea = ({
+  text,
+  disabled,
+  textAreaRef,
+  handleChange,
+  handleKeyDown
+}: InputTextAreaProps) => (
+  <textarea
+    autoFocus
+    id="dynamic-textarea"
+    placeholder="What should goose do?"
+    value={text}
+    onChange={handleChange}
+    onKeyDown={handleKeyDown}
+    disabled={disabled}
+    ref={textAreaRef}
+    rows={1}
+    className={`w-full min-h-[1rem] max-h-[240px] overflow-y-auto outline-none border-none focus:ring-0 bg-transparent text-14 resize-none pr-3 ${
+      disabled ? 'cursor-not-allowed opacity-50' : ''
+    }`}
+  />
+);

ui/desktop/src/components/Input/MarkdownToolbar.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Button } from '../ui/button';
+import { Bold, Italic, ListOrdered, List, Quote } from 'lucide-react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from '../ui/tooltip';
+
+interface MarkdownToolbarProps {
+  onFormat: (type: string) => void;
+  disabled?: boolean;
+}
+
+export function MarkdownToolbar({ onFormat, disabled }: MarkdownToolbarProps) {
+  const tools = [
+    { icon: Bold, format: 'bold', tooltip: 'Bold' },
+    { icon: Italic, format: 'italic', tooltip: 'Italic' },
+    { icon: List, format: 'ul', tooltip: 'Bulleted List' },
+    { icon: ListOrdered, format: 'ol', tooltip: 'Ordered List' },
+    { icon: Quote, format: 'quote', tooltip: 'Quote' },
+  ];
+
+  return (
+    <TooltipProvider>
+      <div className="flex gap-1 mb-3 -ml-2">
+        {tools.map((tool) => (
+          <Tooltip key={tool.format}>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                size="icon"
+                variant="ghost"
+                onClick={() => onFormat(tool.format)}
+                disabled={disabled}
+                className="text-indigo-600 dark:text-indigo-300 hover:text-indigo-700 
+                           dark:hover:text-indigo-200 hover:bg-indigo-100 dark:hover:bg-indigo-800"
+              >
+                <tool.icon size={16} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{tool.tooltip}</p>
+            </TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
+    </TooltipProvider>
+  );
+}