improvement(home): interactions

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/home/components/index.ts

@@ -0,0 +1,2 @@
+export { MessageContent } from './message-content'
+export { UserInput } from './user-input'

apps/sim/app/workspace/[workspaceId]/home/components/message-content/index.ts

@@ -0,0 +1 @@
+export { MessageContent } from './message-content'

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import { Check, CircleAlert, Loader2 } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { cn } from '@/lib/core/utils/cn'
+import type { ContentBlock, ToolCallStatus } from '../../types'
+
+const REMARK_PLUGINS = [remarkGfm]
+const ICON_BASE = 'h-[12px] w-[12px] flex-shrink-0'
+
+function StatusIcon({ status }: { status: ToolCallStatus }) {
+  switch (status) {
+    case 'executing':
+      return <Loader2 className={cn(ICON_BASE, 'animate-spin text-[var(--text-tertiary)]')} />
+    case 'success':
+      return <Check className={cn(ICON_BASE, 'text-emerald-500')} />
+    case 'error':
+      return <CircleAlert className={cn(ICON_BASE, 'text-red-400')} />
+  }
+}
+
+function formatToolName(name: string): string {
+  return name
+    .replace(/_v\d+$/, '')
+    .split('_')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ')
+}
+
+interface TextSegment {
+  type: 'text'
+  content: string
+}
+
+interface ActionSegment {
+  type: 'action'
+  id: string
+  label: string
+  status: ToolCallStatus
+}
+
+type MessageSegment = TextSegment | ActionSegment
+
+/**
+ * Flattens raw content blocks into a uniform list of text and action segments.
+ * Tool calls and subagents are treated identically as action items.
+ */
+function parseBlocks(blocks: ContentBlock[], isStreaming: boolean): MessageSegment[] {
+  const segments: MessageSegment[] = []
+  const lastSubagentIdx = blocks.findLastIndex((b) => b.type === 'subagent')
+
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i]
+
+    switch (block.type) {
+      case 'text': {
+        if (block.content?.trim()) {
+          const last = segments[segments.length - 1]
+          if (last?.type === 'text') {
+            last.content += block.content
+          } else {
+            segments.push({ type: 'text', content: block.content })
+          }
+        }
+        break
+      }
+      case 'subagent': {
+        if (block.content) {
+          segments.push({
+            type: 'action',
+            id: `subagent-${i}`,
+            label: block.content,
+            status: isStreaming && i === lastSubagentIdx ? 'executing' : 'success',
+          })
+        }
+        break
+      }
+      case 'tool_call': {
+        if (block.toolCall) {
+          segments.push({
+            type: 'action',
+            id: block.toolCall.id,
+            label: block.toolCall.displayTitle || formatToolName(block.toolCall.name),
+            status: block.toolCall.status,
+          })
+        }
+        break
+      }
+    }
+  }
+
+  return segments
+}
+
+interface MessageContentProps {
+  blocks: ContentBlock[]
+  fallbackContent: string
+  isStreaming: boolean
+}
+
+export function MessageContent({ blocks, fallbackContent, isStreaming }: MessageContentProps) {
+  const parsed = blocks.length > 0 ? parseBlocks(blocks, isStreaming) : []
+
+  const segments: MessageSegment[] =
+    parsed.length > 0
+      ? parsed
+      : fallbackContent?.trim()
+        ? [{ type: 'text' as const, content: fallbackContent }]
+        : []
+
+  if (segments.length === 0) return null
+
+  return (
+    <>
+      {segments.map((segment, i) => {
+        if (segment.type === 'text') {
+          return (
+            <div
+              key={`text-${i}`}
+              className='prose prose-neutral prose-sm dark:prose-invert max-w-none'
+            >
+              <ReactMarkdown remarkPlugins={REMARK_PLUGINS}>{segment.content}</ReactMarkdown>
+            </div>
+          )
+        }
+
+        return (
+          <div key={segment.id} className='flex items-center gap-[8px] py-[4px]'>
+            <StatusIcon status={segment.status} />
+            <span className='text-[13px] text-[var(--text-secondary)]'>{segment.label}</span>
+          </div>
+        )
+      })}
+    </>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/user-input/index.ts

@@ -0,0 +1 @@
+export { UserInput } from './user-input'

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -0,0 +1,182 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { ArrowUp, Mic } from 'lucide-react'
+import { Button } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import { useAnimatedPlaceholder } from '../../hooks'
+
+const TEXTAREA_CLASSES =
+  'm-0 box-border h-auto max-h-[30vh] min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden break-words border-0 bg-transparent px-[4px] py-[4px] font-medium font-sans text-[14px] text-[var(--text-primary)] leading-[20px] outline-none placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+
+const SEND_BUTTON_BASE = 'h-[28px] w-[28px] rounded-full border-0 p-0 transition-colors'
+const SEND_BUTTON_ACTIVE =
+  'bg-[var(--c-383838)] hover:bg-[var(--c-575757)] dark:bg-[var(--c-E0E0E0)] dark:hover:bg-[var(--c-CFCFCF)]'
+const SEND_BUTTON_DISABLED = 'bg-[var(--c-808080)] dark:bg-[var(--c-808080)]'
+
+function autoResizeTextarea(e: React.FormEvent<HTMLTextAreaElement>) {
+  const target = e.target as HTMLTextAreaElement
+  target.style.height = 'auto'
+  target.style.height = `${Math.min(target.scrollHeight, window.innerHeight * 0.3)}px`
+}
+
+interface UserInputProps {
+  value: string
+  onChange: (value: string) => void
+  onSubmit: () => void
+  isSending: boolean
+  onStopGeneration: () => void
+  animate?: boolean
+}
+
+export function UserInput({
+  value,
+  onChange,
+  onSubmit,
+  isSending,
+  onStopGeneration,
+  animate = true,
+}: UserInputProps) {
+  const animatedPlaceholder = useAnimatedPlaceholder()
+  const placeholder = animate ? animatedPlaceholder : 'Send message to Sim'
+  const canSubmit = value.trim().length > 0 && !isSending
+
+  const [isListening, setIsListening] = useState(false)
+  const recognitionRef = useRef<SpeechRecognition | null>(null)
+  const prefixRef = useRef('')
+
+  useEffect(() => {
+    return () => {
+      recognitionRef.current?.abort()
+    }
+  }, [])
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  const handleContainerClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    if ((e.target as HTMLElement).closest('button')) return
+    textareaRef.current?.focus()
+  }, [])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        onSubmit()
+      }
+    },
+    [onSubmit]
+  )
+
+  const toggleListening = useCallback(() => {
+    if (isListening) {
+      recognitionRef.current?.stop()
+      recognitionRef.current = null
+      setIsListening(false)
+      return
+    }
+
+    const w = window as Window & {
+      SpeechRecognition?: typeof SpeechRecognition
+      webkitSpeechRecognition?: typeof SpeechRecognition
+    }
+    const SpeechRecognitionAPI = w.SpeechRecognition || w.webkitSpeechRecognition
+    if (!SpeechRecognitionAPI) return
+
+    prefixRef.current = value
+
+    const recognition = new SpeechRecognitionAPI()
+    recognition.continuous = true
+    recognition.interimResults = true
+    recognition.lang = 'en-US'
+
+    recognition.onresult = (event: SpeechRecognitionEvent) => {
+      let transcript = ''
+      for (let i = 0; i < event.results.length; i++) {
+        transcript += event.results[i][0].transcript
+      }
+      const prefix = prefixRef.current
+      onChange(prefix ? `${prefix} ${transcript}` : transcript)
+    }
+
+    recognition.onend = () => {
+      if (recognitionRef.current === recognition) {
+        try {
+          recognition.start()
+        } catch {
+          recognitionRef.current = null
+          setIsListening(false)
+        }
+      }
+    }
+    recognition.onerror = (e: SpeechRecognitionErrorEvent) => {
+      if (e.error === 'aborted' || e.error === 'not-allowed') {
+        recognitionRef.current = null
+        setIsListening(false)
+      }
+    }
+
+    recognitionRef.current = recognition
+    recognition.start()
+    setIsListening(true)
+  }, [isListening, value, onChange])
+
+  return (
+    <div
+      onClick={handleContainerClick}
+      className='mx-auto w-full max-w-[640px] cursor-text rounded-[12px] border border-[var(--border-1)] bg-white px-[10px] py-[8px] shadow-sm dark:bg-[var(--surface-4)]'
+    >
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onInput={autoResizeTextarea}
+        placeholder={placeholder}
+        rows={1}
+        className={TEXTAREA_CLASSES}
+      />
+      <div className='flex items-center justify-end gap-[6px]'>
+        <button
+          type='button'
+          onClick={toggleListening}
+          className={cn(
+            'flex h-[28px] w-[28px] items-center justify-center rounded-full transition-colors',
+            isListening
+              ? 'bg-red-500 text-white hover:bg-red-600'
+              : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+          )}
+          title={isListening ? 'Stop listening' : 'Voice input'}
+        >
+          <Mic className='h-[16px] w-[16px]' strokeWidth={2} />
+        </button>
+        {isSending ? (
+          <Button
+            onClick={onStopGeneration}
+            className={cn(SEND_BUTTON_BASE, SEND_BUTTON_ACTIVE)}
+            title='Stop generation'
+          >
+            <svg
+              className='block h-[14px] w-[14px] fill-white dark:fill-black'
+              viewBox='0 0 24 24'
+              xmlns='http://www.w3.org/2000/svg'
+            >
+              <rect x='4' y='4' width='16' height='16' rx='3' ry='3' />
+            </svg>
+          </Button>
+        ) : (
+          <Button
+            onClick={onSubmit}
+            disabled={!canSubmit}
+            className={cn(SEND_BUTTON_BASE, canSubmit ? SEND_BUTTON_ACTIVE : SEND_BUTTON_DISABLED)}
+          >
+            <ArrowUp
+              className='block h-[16px] w-[16px] text-white dark:text-black'
+              strokeWidth={2.25}
+            />
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}