feat(chat): highlight-to-chat — reference file/table selections in Chat

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/editor-context-menu.tsx

@@ -8,7 +8,7 @@ import {
  DropdownMenuShortcut,
  DropdownMenuTrigger,
 } from '@sim/emcn'
-import { Clipboard, Duplicate, Search, SelectAll } from '@sim/emcn/icons'
+import { Blimp, Clipboard, Duplicate, Search, SelectAll } from '@sim/emcn/icons'
 import { Scissors } from 'lucide-react'
 
 interface EditorContextMenuProps {
@@ -23,6 +23,8 @@ interface EditorContextMenuProps {
  onPaste: () => void
  onSelectAll: () => void
  onFind: () => void
+ /** Adds the current selection to Chat as a reference. Omit to hide the item. */
+ onAddToChat?: () => void
 }
 
 export function EditorContextMenu({
@@ -37,6 +39,7 @@ export function EditorContextMenu({
  onPaste,
  onSelectAll,
  onFind,
+ onAddToChat,
 }: EditorContextMenuProps) {
  return (
  <DropdownMenu open={isOpen} onOpenChange={(open) => !open && onClose()} modal={false}>
@@ -60,6 +63,15 @@ export function EditorContextMenu({
  sideOffset={2}
  onCloseAutoFocus={(e) => e.preventDefault()}
  >
+ {onAddToChat && (
+ <>
+ <DropdownMenuItem disabled={!hasSelection} onSelect={onAddToChat}>
+ <Blimp />
+ Add to Chat
+ </DropdownMenuItem>
+ <DropdownMenuSeparator />
+ </>
+ )}
  {canEdit && (
  <DropdownMenuItem disabled={!hasSelection} onSelect={onCut}>
  <Scissors />

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/bubble-menu.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { Blimp } from '@sim/emcn/icons'
 import { posToDOMRect } from '@tiptap/core'
 import { PluginKey } from '@tiptap/pm/state'
 import type { Editor } from '@tiptap/react'
@@ -54,6 +55,8 @@ interface EditorBubbleMenuProps {
  editor: Editor
  /** The editor's scrollable viewport, used to keep the toolbar on-screen for selections taller than it. */
  scrollContainerRef: React.RefObject<HTMLDivElement | null>
+ /** Adds the current selection to Chat as a reference. Omit to hide the action. */
+ onAddToChat?: () => void
 }
 
 /**
@@ -62,7 +65,11 @@ interface EditorBubbleMenuProps {
  * live in the `/` slash menu. Active states are read through {@link useEditorState} so the bar
  * stays correct without re-rendering the editor on every transaction.
  */
-export function EditorBubbleMenu({ editor, scrollContainerRef }: EditorBubbleMenuProps) {
+export function EditorBubbleMenu({
+ editor,
+ scrollContainerRef,
+ onAddToChat,
+}: EditorBubbleMenuProps) {
  const [linkValue, setLinkValue] = useState<string | null>(null)
  const linkInputRef = useRef<HTMLInputElement>(null)
  const linkRangeRef = useRef<{ from: number; to: number } | null>(null)
@@ -243,6 +250,17 @@ export function EditorBubbleMenu({ editor, scrollContainerRef }: EditorBubbleMen
  </>
  ) : (
  <>
+ {onAddToChat && (
+ <>
+ <ToolbarButton
+ icon={Blimp}
+ label='Add to Chat'
+ isActive={false}
+ onClick={onAddToChat}
+ />
+ <ToolbarDivider />
+ </>
+ )}
  <ToolbarButton
  icon={Bold}
  label='Bold'

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx

@@ -1,8 +1,9 @@
+import type { ComponentType, SVGProps } from 'react'
 import { cn, Tooltip } from '@sim/emcn'
-import type { LucideIcon } from 'lucide-react'
 
 interface ToolbarButtonProps {
- icon: LucideIcon
+ /** Any SVG icon component — Lucide icons and `@sim/emcn/icons` both satisfy this. */
+ icon: ComponentType<SVGProps<SVGSVGElement>>
  label: string
  shortcut?: string
  isActive?: boolean

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx

@@ -12,14 +12,21 @@ import type { Editor } from '@tiptap/react'
 import { EditorContent, useEditor } from '@tiptap/react'
 import { useRouter } from 'next/navigation'
 import { useSession } from '@/lib/auth/auth-client'
+import {
+ buildFileSelectionLabel,
+ truncateSelectionText,
+} from '@/lib/copilot/chat/selection-context'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { extractEmbeddedFileRef } from '@/lib/uploads/utils/embedded-image-ref'
 import { isUntitledName } from '@/app/workspace/[workspaceId]/files/untitled-title'
 import { useUploadWorkspaceFile } from '@/hooks/queries/workspace-files'
+import { useAddToChat } from '@/hooks/use-add-to-chat'
 import type { SaveStatus } from '@/hooks/use-autosave'
 import { useFileContentSource } from '@/hooks/use-file-content-source'
+import type { ChatContext } from '@/stores/panel'
 import { PreviewLoadingFrame } from '../preview-shared'
 import { useEditableFileContent } from '../use-editable-file-content'
+import { useSelectionCopyBridge } from '../use-selection-copy-bridge'
 import {
  announceAgentApplying,
  clearAgentApplying,
@@ -1124,6 +1131,36 @@ export function LoadedRichMarkdownEditor({
  []
  )
 
+ const addToChat = useAddToChat()
+ /**
+ * No line range: this editor renders a ProseMirror document, whose block
+ * boundaries do not correspond to markdown source lines (blank lines between
+ * paragraphs, list markers, heading prefixes and fenced blocks all shift the
+ * real line). Reporting a derived count would label the chip — and prompt the
+ * agent — with line numbers that don't exist in the file.
+ */
+ const buildSelectionContext = useCallback((): ChatContext | null => {
+ if (!editor) return null
+ const { from, to } = editor.state.selection
+ if (from === to) return null
+ const text = editor.state.doc.textBetween(from, to, '\n')
+ if (!text.trim()) return null
+ return {
+ kind: 'file_selection',
+ fileId: file.id,
+ fileName: file.name,
+ label: buildFileSelectionLabel(file.name),
+ text: truncateSelectionText(text),
+ }
+ }, [editor, file.id, file.name])
+
+ const handleAddSelectionToChat = () => {
+ const context = buildSelectionContext()
+ if (context) addToChat(context)
+ }
+
+ useSelectionCopyBridge(containerRef, buildSelectionContext)
+
  // Show the read-only placeholder (the already-fetched markdown) whenever a collaborative doc has not yet
  // seeded — including during an agent stream that begins before the seed lands. Streamed diffs are held
  // until `collabReady` (see the streaming effect), so before then the editor is empty; the placeholder
@@ -1135,7 +1172,13 @@ export function LoadedRichMarkdownEditor({
  ref={containerRef}
  className={cn('flex flex-1 flex-col overflow-y-auto', isEditable && 'cursor-text')}
  >
- {editor && <EditorBubbleMenu editor={editor} scrollContainerRef={containerRef} />}
+ {editor && (
+ <EditorBubbleMenu
+ editor={editor}
+ scrollContainerRef={containerRef}
+ onAddToChat={handleAddSelectionToChat}
+ />
+ )}
  {editor && <TableBubbleMenu editor={editor} scrollContainerRef={containerRef} />}
  {editor && <LinkHoverCard editor={editor} />}
  <input

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx

@@ -5,13 +5,20 @@ import type { OnMount } from '@monaco-editor/react'
 import { cn } from '@sim/emcn'
 import type { editor as MonacoEditorTypes } from 'monaco-editor'
 import dynamic from 'next/dynamic'
+import {
+ buildFileSelectionLabel,
+ truncateSelectionText,
+} from '@/lib/copilot/chat/selection-context'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { getFileExtension } from '@/lib/uploads/utils/file-utils'
+import { useAddToChat } from '@/hooks/use-add-to-chat'
+import type { ChatContext } from '@/stores/panel'
 import { EditorContextMenu } from './editor-context-menu'
 import type { PreviewMode } from './file-viewer'
 import { PreviewPanel, resolvePreviewType } from './preview-panel'
 import { PreviewLoadingFrame } from './preview-shared'
 import { useEditableFileContent } from './use-editable-file-content'
+import { useSelectionCopyBridge } from './use-selection-copy-bridge'
 
 const SIM_DARK_RULES: MonacoEditorTypes.ITokenThemeRule[] = [
  { token: 'comment', foreground: '606060', fontStyle: 'italic' },
@@ -373,6 +380,38 @@ export const TextEditor = memo(function TextEditor({
 
  const monacoLanguage = resolveMonacoLanguage(file)
  const monacoTheme = useMonacoTheme()
+ const addToChat = useAddToChat()
+
+ const buildSelectionContext = useCallback((): ChatContext | null => {
+ const editor = monacoEditorRef.current
+ const sel = editor?.getSelection()
+ const model = editor?.getModel()
+ if (!editor || !sel || sel.isEmpty() || !model) return null
+ const text = model.getValueInRange(sel)
+ if (!text.trim()) return null
+ const startLine = sel.startLineNumber
+ // A full-line highlight ends at column 1 of the FOLLOWING line, so that line
+ // contributed no text — reporting it would claim a range one line longer
+ // than what was selected, in both the chip label and the agent's prompt.
+ const endLine =
+ sel.endColumn === 1 && sel.endLineNumber > startLine
+ ? sel.endLineNumber - 1
+ : sel.endLineNumber
+ return {
+ kind: 'file_selection',
+ fileId: file.id,
+ fileName: file.name,
+ label: buildFileSelectionLabel(file.name, startLine, endLine),
+ text: truncateSelectionText(text),
+ startLine,
+ endLine,
+ }
+ }, [file.id, file.name])
+
+ const handleAddSelectionToChat = () => {
+ const context = buildSelectionContext()
+ if (context) addToChat(context)
+ }
 
  const {
  content,
@@ -394,6 +433,10 @@ export const TextEditor = memo(function TextEditor({
  })
  contentRef.current = content
 
+ // Enable once content has loaded — the container (and Monaco) only mount after
+ // the `isContentLoading` early return below, so the bridge must (re-)attach then.
+ useSelectionCopyBridge(containerRef, buildSelectionContext, !isContentLoading)
+
  useEffect(() => {
  const editor = monacoEditorRef.current
  if (!editor) return
@@ -650,6 +693,10 @@ export const TextEditor = memo(function TextEditor({
  onClose={closeContextMenu}
  hasSelection={contextMenu.hasSelection}
  canEdit={!isEditorReadOnly}
+ onAddToChat={() => {
+ handleAddSelectionToChat()
+ closeContextMenu()
+ }}
  onCut={() => {
  monacoEditorRef.current?.focus()
  monacoEditorRef.current?.trigger(

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/use-selection-copy-bridge.test.tsx

@@ -0,0 +1,88 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, createRef, type RefObject } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { SIM_SELECTION_MIME } from '@/lib/copilot/chat/selection-clipboard'
+import type { ChatContext } from '@/stores/panel'
+import { useSelectionCopyBridge } from './use-selection-copy-bridge'
+
+const selection: ChatContext = {
+ kind: 'file_selection',
+ fileId: 'f1',
+ fileName: 'notes.md',
+ label: 'notes.md:2-4',
+ text: 'the exact passage',
+}
+
+let container: HTMLDivElement
+let root: Root
+let containerRef: RefObject<HTMLDivElement | null>
+let buildContext: ReturnType<typeof vi.fn>
+
+/**
+ * Mirrors the editors this hook wraps: Monaco's editing surface is a hidden
+ * textarea, and its find widget is a real input nested in the same container.
+ */
+function Host() {
+ useSelectionCopyBridge(containerRef, buildContext as () => ChatContext | null)
+ return (
+ <div ref={containerRef}>
+ <textarea id='editor-surface' />
+ <input id='find-box' />
+ </div>
+ )
+}
+
+/** Dispatches a bubbling copy from `id` and returns what was written. */
+function dispatchCopy(id: string): Record<string, string> {
+ const written: Record<string, string> = {}
+ const event = new Event('copy', { bubbles: true }) as ClipboardEvent
+ Object.defineProperty(event, 'clipboardData', {
+ value: {
+ setData: (type: string, value: string) => {
+ written[type] = value
+ },
+ },
+ })
+ act(() => {
+ container.querySelector(`#${id}`)?.dispatchEvent(event)
+ })
+ return written
+}
+
+describe('useSelectionCopyBridge', () => {
+ beforeEach(() => {
+ container = document.createElement('div')
+ document.body.appendChild(container)
+ containerRef = createRef<HTMLDivElement>()
+ buildContext = vi.fn(() => selection)
+ root = createRoot(container)
+ act(() => {
+ root.render(<Host />)
+ })
+ })
+
+ afterEach(() => {
+ act(() => root.unmount())
+ container.remove()
+ vi.clearAllMocks()
+ })
+
+ it('attaches the selection when copying from the editor surface', () => {
+ const written = dispatchCopy('editor-surface')
+
+ expect(buildContext).toHaveBeenCalled()
+ expect(written[SIM_SELECTION_MIME]).toContain('file_selection')
+ })
+
+ it('ignores a copy from a nested input such as the find box', () => {
+ // The document still holds a highlight, so without the guard the chip would
+ // ride onto text the user never copied.
+ const written = dispatchCopy('find-box')
+
+ expect(buildContext).not.toHaveBeenCalled()
+ expect(written[SIM_SELECTION_MIME]).toBeUndefined()
+ })
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/use-selection-copy-bridge.ts

@@ -0,0 +1,44 @@
+'use client'
+
+import { type RefObject, useEffect } from 'react'
+import { attachSelectionContextToClipboard } from '@/lib/copilot/chat/selection-clipboard'
+import type { ChatContext } from '@/stores/panel'
+
+/**
+ * Rides a selection {@link ChatContext} onto the editor's native copy so a
+ * highlighted passage copied with Cmd+C pastes into Chat as a reference chip.
+ *
+ * Attached in the BUBBLE phase so it runs after the inner editor's own copy
+ * handler — Monaco and ProseMirror both `clearData()` before writing
+ * `text/plain`, so the custom type must be added last to survive.
+ *
+ * @param buildContext - Returns null when there is no non-empty selection.
+ * @param enabled - Re-runs the effect for a container that mounts late (behind a
+ * loading gate); a ref isn't reactive, so the effect would otherwise bail on the
+ * first render and never re-attach.
+ */
+export function useSelectionCopyBridge(
+ containerRef: RefObject<HTMLElement | null>,
+ buildContext: () => ChatContext | null,
+ enabled = true
+): void {
+ useEffect(() => {
+ const dom = containerRef.current
+ if (!dom || !enabled) return
+ const onCopy = (e: ClipboardEvent) => {
+ // A copy from a field nested in the editor — Monaco's find box being the
+ // common one — bubbles here while the document still holds a highlight,
+ // so the selection would be attached to text the user never copied.
+ //
+ // Only INPUT is skipped, deliberately: Monaco's own editing surface is a
+ // hidden TEXTAREA, so excluding textareas (as the table grid does, where
+ // the cell editors really are form fields) would suppress the chip on the
+ // main copy path this hook exists for.
+ if ((e.target as HTMLElement | null)?.tagName === 'INPUT') return
+ const context = buildContext()
+ if (context) attachSelectionContextToClipboard(e.clipboardData, context)
+ }
+ dom.addEventListener('copy', onCopy)
+ return () => dom.removeEventListener('copy', onCopy)
+ }, [containerRef, buildContext, enabled])
+}