@adecore/agents-react 0.38.0 → 0.40.0

package/src/chat/ui/VisualFrame.tsx

@@ -54,6 +54,7 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
     const scope = useChatScope();
     // The frame opens again when its page changes, so the reader keeps its identity while the visual does.
     const page = useCallback(() => attachments.read(scope.id, chatId, visual.id).then((blob) => blob.text()), [attachments, scope.id, chatId, visual.id]);
+
     return (
         <PageFrame
             page={page}
@@ -91,10 +92,12 @@ function PageFrame({ page, title, maxHeight, fill = false, className, initialHei
     const controllerRef = useRef<VisualViewportController | null>(null);
     const [viewportReady, setViewportReady] = useState(false);
     const [measure, width] = useMeasuredWidth();
+
     const setBox = (node: HTMLDivElement | null) => {
         boxRef.current = node;
         measure(node);
     };
+
     const theme = useVisualTheme(boxRef);
     const widthRef = useRef(width);
     const onHeightRef = useRef(onHeight);
@@ -104,9 +107,11 @@ function PageFrame({ page, title, maxHeight, fill = false, className, initialHei
     const [failed, setFailed] = useState(false);
     // The frame keeps the address it opened with: a later theme goes over the bridge, since a new address would load the page again.
     const [opening, setOpening] = useState<{ src: string; theme: VisualTheme } | null>(null);
+
     if (opening === null && frameUrl !== null && theme !== null && width > 0) {
         setOpening({ src: frameUrl + visualThemeFragment(theme), theme });
     }
+
     const height = fill || width === 0 ? undefined : (reported ?? initialHeight(width));
 
     useLayoutEffect(() => {
@@ -116,9 +121,11 @@ function PageFrame({ page, title, maxHeight, fill = false, className, initialHei
 
     useLayoutEffect(() => {
         const frame = frameRef.current;
+
         if (opening === null || frame === null) {
             return;
         }
+
         const bridge = new VisualBridge({
             frame: () => frame.contentWindow,
             visual: { maxHeight },
@@ -130,6 +137,7 @@ function PageFrame({ page, title, maxHeight, fill = false, className, initialHei
                 if (fill) {
                     return;
                 }
+
                 setReported(next);
                 onHeightRef.current?.(widthRef.current, next);
             },
@@ -142,10 +150,14 @@ function PageFrame({ page, title, maxHeight, fill = false, className, initialHei
             onAppearance: setDrawn,
             onFailure: () => setFailed(true)
         });
+
         bridgeRef.current = bridge;
         const view = frame.ownerDocument.defaultView ?? window;
+
         const listen = (event: MessageEvent): void => bridge.receive(event);
+
         view.addEventListener('message', listen);
+
         return () => {
             view.removeEventListener('message', listen);
             bridge.dispose();
@@ -158,11 +170,14 @@ function PageFrame({ page, title, maxHeight, fill = false, className, initialHei
         const viewport = viewportRef.current;
         const bridge = bridgeRef.current;
         const scroller = box?.closest<HTMLElement>('.chat-scroll');
+
         if (fill || !viewportReady || !box || !viewport || !bridge || !scroller) {
             return;
         }
+
         const controller = new VisualViewportController(box, viewport, scroller, bridge);
         controllerRef.current = controller;
+
         return () => {
             controller.dispose();
             controllerRef.current = null;

package/src/chat/ui/Welcome.tsx

@@ -13,6 +13,7 @@ export function WelcomeGreeting({ chatId, now = localClock }: { chatId: string;
     const { t } = useTranslation('agent-chat');
     const provider = useChatRow(chatId, (row) => row?.info.provider ?? null);
     const [part] = useState(() => dayPartOf(now()));
+
     return (
         <div className="flex items-center justify-center gap-3 px-3 pb-2 text-text">
             {provider && <AgentIcon kind={provider} size={32} className="shrink-0" />}

package/src/chat/ui/chip-clipboard.ts

@@ -22,7 +22,9 @@ export function messageClipboardChips(
     if (item.kind === 'assistant') {
         return clipboardChipsOf(text, tokenizeNamedReferences(text, lookup.items, lookup.referenced));
     }
+
     const tokens = referenceTokens([...(item.chats ?? []), ...(item.references ?? [])], lookup.items);
+
     return clipboardChipsOf(text, tokenizeChips(text, item.mentions ?? [], item.skills ?? [], tokens));
 }
 
@@ -31,15 +33,18 @@ export function rowClipboardChips(row: TimelineRow, text: string, lookup: Pick<R
     if (row.kind === 'user' || row.kind === 'assistant') {
         return messageClipboardChips(row.item, text, lookup);
     }
+
     return clipboardChipsOf(text, []);
 }
 
 /* What a chip the transcript drew stands for, read back from the attributes `TokenChip` writes. */
 function segmentOf(chip: Element): ChipSegment | null {
     const value = chip.getAttribute('data-chip-value');
+
     if (value === null) {
         return null;
     }
+
     switch (chip.getAttribute('data-chip')) {
         case 'mention':
             return { kind: 'mention', path: value };
@@ -47,6 +52,7 @@ function segmentOf(chip: Element): ChipSegment | null {
             return { kind: 'skill', name: value };
         case 'reference': {
             const name = chip.getAttribute('data-chip-name');
+
             return name === null || name === '' ? null : { kind: 'reference', id: value, name };
         }
         default:
@@ -57,31 +63,39 @@ function segmentOf(chip: Element): ChipSegment | null {
 /* The chips a selection holds whole, beside the text it copies; a chip cut in half is only text. */
 export function selectionChips(selection: Selection): ClipboardChips {
     const segments: ChipSegment[] = [];
+
     for (let i = 0; i < selection.rangeCount; i++) {
         const container = selection.getRangeAt(i).commonAncestorContainer;
         const root = container instanceof Element ? container : container.parentElement;
         const own = root?.closest('[data-chip]');
         const candidates = own ? [own] : [...(root?.querySelectorAll('[data-chip]') ?? [])];
+
         for (const chip of candidates) {
             const segment = selection.containsNode(chip, false) ? segmentOf(chip) : null;
+
             if (segment !== null) {
                 segments.push(segment);
             }
         }
     }
+
     return clipboardChipsOf(selection.toString(), segments);
 }
 
 /* A copy of a selection in the thread, which carries the chips in it as well when it holds any. */
 export function copySelectionWithChips(event: ClipboardEvent): void {
     const selection = document.getSelection();
+
     if (event.defaultPrevented || event.clipboardData === null || selection === null || selection.isCollapsed) {
         return;
     }
+
     const chips = selectionChips(selection);
+
     if (!hasClipboardChips(chips)) {
         return;
     }
+
     writeClipboardChips(event.clipboardData, chips);
     event.preventDefault();
 }
@@ -93,9 +107,12 @@ export function copySelectionWithChips(event: ClipboardEvent): void {
 export function copyWithChips(chips: ClipboardChips): void {
     if (!hasClipboardChips(chips) || typeof document.execCommand !== 'function') {
         void copyText(chips.text);
+
         return;
     }
+
     let written = false;
+
     const write = (event: ClipboardEvent): void => {
         if (event.clipboardData !== null) {
             writeClipboardChips(event.clipboardData, chips);
@@ -103,12 +120,15 @@ export function copyWithChips(chips: ClipboardChips): void {
             written = true;
         }
     };
+
     document.addEventListener('copy', write, true);
+
     try {
         document.execCommand('copy');
     } finally {
         document.removeEventListener('copy', write, true);
     }
+
     if (!written) {
         void copyText(chips.text);
     }

package/src/chat/ui/code-lines.ts

@@ -22,25 +22,32 @@ export class TokenCache<State> {
             if (state !== undefined) {
                 return tokenize(code, state);
             }
+
             const key = `${namespace}\0${code}`;
             const known = this.entries.get(key);
+
             if (known !== undefined) {
                 this.entries.delete(key);
                 this.entries.set(key, known);
+
                 return known.result;
             }
+
             const result = tokenize(code, state);
             // Account for tokens too, so dense code cannot fill the cache with tiny strings.
             const cost = key.length * 2 + result.lines.reduce((sum, line) => sum + line.length * 64, 0);
+
             if (cost <= TOKEN_CACHE_BUDGET) {
                 while (this.entries.size > 0 && (this.size + cost > TOKEN_CACHE_BUDGET || this.entries.size >= TOKEN_CACHE_ENTRIES)) {
                     const oldest = this.entries.keys().next().value!;
                     this.size -= this.entries.get(oldest)!.cost;
                     this.entries.delete(oldest);
                 }
+
                 this.entries.set(key, { result, cost });
                 this.size += cost;
             }
+
             return result;
         };
     }
@@ -68,24 +75,31 @@ export class IncrementalLines<State> {
         // A carriage return splits lines in ways a cut at newlines does not see, so that code starts over every time.
         if (code.includes('\r')) {
             this.reset();
+
             return this.tokenize(code, undefined).lines;
         }
+
         const end = complete ? code.length : code.lastIndexOf('\n') + 1;
         const stable = code.slice(0, end);
         const continues = (this.source === '' || this.source.endsWith('\n')) && stable.startsWith(this.source);
+
         if (!continues) {
             this.reset();
         }
+
         const added = stable.slice(this.source.length);
+
         if (added !== '') {
             const result = this.tokenize(added.endsWith('\n') ? added.slice(0, -1) : added, this.state);
             this.lines = [...this.lines, ...result.lines];
             this.state = result.state;
             this.source = stable;
         }
+
         if (complete) {
             return this.lines;
         }
+
         return [...this.lines, ...this.tokenize(code.slice(end), this.state).lines];
     }
 

package/src/chat/ui/code-theme.ts

@@ -6,6 +6,7 @@ import { useHostCodeMode, useHostCodeThemes } from '../../host-hooks';
 export function useCodeTheme(): string {
     const mode = useHostCodeMode();
     const themes = useHostCodeThemes();
+
     return mode === 'dark' ? themes.dark : themes.light;
 }
 

package/src/chat/ui/composer/ComposerControls.tsx

@@ -1,14 +1,16 @@
-import { useRef, type Ref } from 'react';
+import { useRef, useState, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ArrowUp, Play, Plus, Square } from 'lucide-react';
+import clsx from 'clsx';
+import { ArrowUp, ChevronDown, Play, Plus, Square } from 'lucide-react';
 import type { ChatInfo } from '@adecore/agent-contracts';
-import { Button, ErrorBoundary, Icon, Tooltip, type Shortcut } from '@adecore/ui';
-import { useChatHost } from '../../../host';
+import { Button, ErrorBoundary, Icon, Menu, Tooltip, type Shortcut } from '@adecore/ui';
+import { useChatHost, type ComposerSendAction, type ComposerSendDraft } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { useProviders } from '../../../state/providers';
 import { useAccountChoice } from '../../account-choice';
 import type { StashedPrompt } from '../../stash';
 import { composerStopLabel } from '../../subagent-list';
+import { HostMenuItems } from '../HostMenuItems';
 import { StashPicker } from '../Pickers';
 import { RunSettings } from '../RunSettings';
 import type { ChatControls } from './use-chat-controls';
@@ -22,6 +24,68 @@ interface SendProps {
     onSend(alternate: boolean): void;
     /* Set when a person stopped the last turn and the box is empty: Continue stands where the send button would. */
     onContinue: (() => void) | null;
+    /* The host's own, behind a chevron on the send button; empty draws the send button alone. */
+    actions: readonly ComposerSendAction[];
+    draft: ComposerSendDraft;
+}
+
+interface SendButtonProps {
+    send: SendProps;
+    /* The chevron only follows whether the box takes input: an action may want an empty draft, such as to reuse the last message. */
+    writable: boolean;
+}
+
+/* The send button, split with a chevron that opens the host's send actions when it has any. */
+function SendButton({ send, writable }: SendButtonProps) {
+    const { t } = useTranslation('agent-chat');
+    const [box, setBox] = useState<HTMLDivElement | null>(null);
+    const split = send.actions.length > 0;
+
+    const button = (
+        <Tooltip label={send.label} kbd={send.kbd} name>
+            <button
+                className={clsx(
+                    'flex h-9 w-9 shrink-0 items-center justify-center bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100',
+                    split ? 'focus-visible:-outline-offset-2' : 'rounded-full'
+                )}
+                disabled={send.disabled}
+                onClick={(event) => send.onSend(event.altKey)}
+            >
+                <Icon icon={ArrowUp} size={16} />
+            </button>
+        </Tooltip>
+    );
+
+    if (!split) {
+        return button;
+    }
+
+    const { draft } = send;
+
+    return (
+        // One round shape that clips both halves, the way a split button of the library draws its frame.
+        <div ref={setBox} className="flex h-9 shrink-0 overflow-clip rounded-full">
+            {button}
+            <Menu.Root>
+                <Tooltip label={t('composer.sendActions')} name>
+                    <Menu.Trigger
+                        render={
+                            <button
+                                type="button"
+                                className='relative flex h-9 w-6 shrink-0 items-center justify-center bg-accent text-accent-text before:absolute before:inset-y-0 before:left-0 before:my-auto before:h-4 before:w-px before:bg-current/30 before:content-[""] hover:brightness-90 focus-visible:-outline-offset-2 disabled:opacity-50 disabled:hover:brightness-100'
+                            />
+                        }
+                        disabled={!writable}
+                    >
+                        <Icon icon={ChevronDown} size={14} />
+                    </Menu.Trigger>
+                </Tooltip>
+                <Menu.Popup anchor={box} side="top" sideOffset={8} align="end" className="min-w-48">
+                    <HostMenuItems actions={send.actions.map((action) => ({ ...action, run: () => action.run(draft) }))} />
+                </Menu.Popup>
+            </Menu.Root>
+        </div>
+    );
 }
 
 interface ComposerControlsProps {
@@ -62,6 +126,7 @@ export function ComposerControls({
     const model = providers.find((entry) => entry.kind === info.provider)?.models.find((entry) => entry.slug === info.selection.model);
     // The CLI announces its session on the first message, so anything before that is still a blank chat.
     const started = info.agentSessionId !== null || info.usage.turns > 0;
+
     // A chat that has started keeps its provider (the CLI holds the thread), and so does one opened for a
     // named CLI; its models stay switchable, since the CLI takes a new one on the restart the next send does.
     const pickable =
@@ -140,17 +205,7 @@ export function ComposerControls({
                         </Button>
                     </Tooltip>
                 )}
-                {send.onContinue === null && send.visible && (
-                    <Tooltip label={send.label} kbd={send.kbd} name>
-                        <button
-                            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100"
-                            disabled={send.disabled}
-                            onClick={(event) => send.onSend(event.altKey)}
-                        >
-                            <Icon icon={ArrowUp} size={16} />
-                        </button>
-                    </Tooltip>
-                )}
+                {send.onContinue === null && send.visible && <SendButton send={send} writable={writable} />}
             </div>
         </div>
     );

package/src/chat/ui/composer/ComposerMenu.tsx

@@ -9,6 +9,7 @@ import { optionIdOf } from './menu-aria';
 
 function splitPath(path: string): { name: string; dir: string } {
     const slash = path.lastIndexOf('/');
+
     return slash < 0 ? { name: path, dir: '' } : { name: path.slice(slash + 1), dir: path.slice(0, slash) };
 }
 
@@ -41,6 +42,7 @@ function MenuOption({ menus, index, className, onPick, children }: OptionProps)
 
 function CommandMenu({ menus }: { menus: Menus }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <div id={menus.listId} role="listbox" aria-label={t('composer.menu.commands')} className="border-b border-border px-1.5 py-1.5">
             {menus.commands.map((command, index) => (
@@ -56,6 +58,7 @@ function CommandMenu({ menus }: { menus: Menus }) {
 
 function SkillMenu({ menus }: { menus: Menus }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <div id={menus.listId} role="listbox" aria-label={t('composer.menu.skills')} className="border-b border-border px-1.5 py-1.5">
             {menus.skillMatches.map((skill, index) => (
@@ -76,6 +79,7 @@ function MentionMenu({ menus, query }: { menus: Menus; query: string }) {
     const { listId, files, mentionCount } = menus;
     const filesLabelId = `${listId}-files`;
     const filesLabelShown = query === '';
+
     return (
         <div className="border-b border-border px-1.5 py-1.5">
             {mentionCount > 0 && (
@@ -83,6 +87,7 @@ function MentionMenu({ menus, query }: { menus: Menus; query: string }) {
                     {filesLabelShown && <Menu.Label id={filesLabelId}>{t('composer.mentions.here')}</Menu.Label>}
                     {files.map((path, index) => {
                         const { name, dir } = splitPath(path);
+
                         return (
                             <MenuOption key={path} menus={menus} index={index} className="items-center" onPick={() => menus.chooseMention(path)}>
                                 <FileIcon path={path} size={14} />
@@ -104,9 +109,11 @@ function MentionMenu({ menus, query }: { menus: Menus; query: string }) {
 function ReferenceMenu({ menus }: { menus: Menus }) {
     const { t } = useTranslation('agent-chat');
     const { listId, referenceMatches } = menus;
+
     const groups = (['canvas', 'views'] as const)
         .map((group) => ({ group, items: referenceMatches.filter((item) => item.group === group) }))
         .filter((entry) => entry.items.length > 0);
+
     return (
         <div className="border-b border-border px-1.5 py-1.5">
             {referenceMatches.length > 0 ? (
@@ -116,6 +123,7 @@ function ReferenceMenu({ menus }: { menus: Menus }) {
                             <Menu.Label id={`${listId}-${group}`}>{t(`composer.references.${group}`)}</Menu.Label>
                             {items.map((item) => {
                                 const index = referenceMatches.indexOf(item);
+
                                 return (
                                     <MenuOption key={item.id} menus={menus} index={index} className="items-center" onPick={() => menus.chooseReference(item)}>
                                         <Icon icon={REFERENCE_ICONS[item.kind]} size={14} className="shrink-0 text-text-faint" />
@@ -141,14 +149,18 @@ export function ComposerMenu({ menus }: { menus: Menus }) {
     if (menus.commandMenuOpen) {
         return <CommandMenu menus={menus} />;
     }
+
     if (menus.skillMenuOpen) {
         return <SkillMenu menus={menus} />;
     }
+
     if (menus.mentionMenuOpen && menus.mention !== null) {
         return <MentionMenu menus={menus} query={menus.mention.query} />;
     }
+
     if (menus.referenceMenuOpen) {
         return <ReferenceMenu menus={menus} />;
     }
+
     return null;
 }

package/src/chat/ui/composer/DraftParts.tsx

@@ -22,6 +22,7 @@ interface DraftQuoteProps {
 export function DraftQuote({ chatId, quote, source, onRemove, onSourceGone }: DraftQuoteProps) {
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
+
     return (
         <div className={`flex items-center gap-2 ${ROW}`}>
             {source === null ? (
@@ -45,6 +46,7 @@ export function DraftQuote({ chatId, quote, source, onRemove, onSourceGone }: Dr
 /* The files the message carries: an image as a thumbnail, anything else by its name and size. */
 export function DraftAttachments({ attachments, onRemove }: { attachments: readonly ChatAttachmentUpload[]; onRemove(index: number): void }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <div className={`flex flex-wrap gap-2 ${ROW}`}>
             {attachments.map((attachment, index) => (

package/src/chat/ui/composer/QueuedMessages.tsx

@@ -18,6 +18,7 @@ interface QueuedMessagesProps {
 export function QueuedMessages({ chatId, queue, paused, takingBack, onEdit }: QueuedMessagesProps) {
     const { t } = useTranslation('agent-chat');
     const actions = useChatActions();
+
     return (
         <div className="flex flex-col gap-1 border-b border-border px-2 py-1.5">
             {paused && <p className="px-1.5 text-xs text-text-muted">{t('composer.queue.paused')}</p>}
@@ -26,8 +27,11 @@ export function QueuedMessages({ chatId, queue, paused, takingBack, onEdit }: Qu
                     scrollTimelineToEnd(chatId, 'instant');
                     void actions.sendNow(chatId, message.id).catch(() => undefined);
                 };
+
                 const unqueue = (): void => void actions.unqueue(chatId, message.id).catch(() => undefined);
+
                 const edit = (): void => onEdit(message);
+
                 return (
                     <ContextMenu.Root key={message.id}>
                         <ContextMenu.Trigger className="group/queued flex items-center gap-2 rounded-md px-1.5 py-1 text-xs text-text-muted">

package/src/chat/ui/composer/chip-paste.ts

@@ -32,6 +32,7 @@ export function pastedChipsIn(text: string, from: number, to: number, code: read
     const outside = [...code, { from: 0, to: from }, { from: to, to: text.length }];
     const skills = chipRanges(text, [], [...choices.skills], outside);
     const references = namedReferenceRanges(text, choices.referables, choices.referenced, outside);
+
     return clipboardChipsOf(
         text.slice(from, to),
         [...skills, ...references].map((range) =>
@@ -51,9 +52,12 @@ export function withPastedChips(draft: ChatDraft, chips: ClipboardChips, choices
         ...ids,
         ...more.filter((id, index) => !ids.includes(id) && more.indexOf(id) === index)
     ];
+
     const isChat = (token: ReferenceToken): boolean => choices.referables.some((item) => item.id === token.id && item.kind === 'chat');
+
     const chats = chips.references.filter(isChat);
     const references = chips.references.filter((token) => !isChat(token));
+
     return {
         ...draft,
         mentions: choices.mentions ? add(draft.mentions, chips.mentions) : draft.mentions,
@@ -80,20 +84,26 @@ export function withPastedChips(draft: ChatDraft, chips: ClipboardChips, choices
 export function pasteWithChips(view: EditorView, clip: string, copied: ClipboardChips | null, choices: PasteChoices): ClipboardChips | null {
     if (copied !== null && hasClipboardChips(copied)) {
         view.dispatch(view.state.replaceSelection(copied.text), { scrollIntoView: true, userEvent: 'input.paste' });
+
         return copied;
     }
+
     if (!mayHoldChips(clip)) {
         return null;
     }
+
     const from = view.state.selection.main.from;
     const inserted = view.state.replaceSelection(clip);
     const state = view.state.update(inserted).state;
     const to = state.selection.main.head;
     const found = pastedChipsIn(state.doc.toString(), from, to, codeRanges(state), choices);
+
     if (!hasClipboardChips(found)) {
         return null;
     }
+
     view.dispatch(inserted, { scrollIntoView: true, userEvent: 'input.paste' });
+
     return found;
 }
 
@@ -105,18 +115,24 @@ export function copyWithChipsFromEditor(
     references: readonly ReferenceToken[]
 ): boolean {
     const { from, to } = view.state.selection.main;
+
     if (from === to || event.clipboardData === null) {
         return false;
     }
+
     const text = view.state.sliceDoc(from, to);
     const chips = clipboardChipsOf(text, tokenizeChips(text, draft.mentions, draft.skills, references));
+
     if (!hasClipboardChips(chips)) {
         return false;
     }
+
     writeClipboardChips(event.clipboardData, chips);
     event.preventDefault();
+
     if (event.type === 'cut') {
         view.dispatch({ changes: { from, to }, scrollIntoView: true, userEvent: 'delete.cut' });
     }
+
     return true;
 }

package/src/chat/ui/composer/chips.ts

@@ -47,6 +47,7 @@ class ReferenceIcon extends WidgetType {
         const root = createRoot(holder);
         root.render(createElement(Icon, { icon: REFERENCE_ICONS[this.kind], size: 12 }));
         roots.set(holder, root);
+
         return holder;
     }
 
@@ -62,18 +63,23 @@ function chipMarks(state: EditorState): DecorationSet {
     const { mentions, skills, references = [] } = state.facet(choices);
     const kinds = new Map(references.map((token) => [token.id, token.kind]));
     const marks: Range<Decoration>[] = [];
+
     // `@a.ts` in backticks is code, not a mention.
     for (const range of chipRanges(state.doc.toString(), mentions, skills, codeRanges(state), references)) {
         if (range.kind !== 'reference') {
             marks.push((range.kind === 'skill' ? skillMark : mentionMark).range(range.from, range.to));
+
             continue;
         }
+
         marks.push(referenceMark.range(range.from, range.to));
         const kind = kinds.get(range.value);
+
         if (kind !== undefined && kind !== null) {
             marks.push(Decoration.replace({ widget: new ReferenceIcon(kind) }).range(range.from, range.from + 1));
         }
     }
+
     return Decoration.set(marks, true);
 }
 

package/src/chat/ui/composer/editor.ts

@@ -33,17 +33,21 @@ export interface CodeRange {
 /* The code spans and fenced blocks between `from` and `to`, as far as the parser has got. */
 export function codeRanges(state: EditorState, from = 0, to = state.doc.length): CodeRange[] {
     const found: CodeRange[] = [];
+
     syntaxTree(state).iterate({
         from,
         to,
         enter: (node) => {
             if (node.name === 'InlineCode' || node.name === 'FencedCode') {
                 found.push({ from: node.from, to: node.to, kind: node.name === 'InlineCode' ? 'inline' : 'fence' });
+
                 return false;
             }
+
             return undefined;
         }
     });
+
     return found;
 }
 
@@ -61,16 +65,20 @@ function codeDecorations(view: EditorView): DecorationSet {
     const { state } = view;
     const decorations: Array<Range<Decoration>> = [];
     const fenceLines = new Set<number>();
+
     for (const visible of view.visibleRanges) {
         for (const range of codeRanges(state, visible.from, visible.to)) {
             if (range.kind === 'inline') {
                 decorations.push(inlineCodeMark.range(range.from, range.to));
+
                 continue;
             }
+
             const first = state.doc.lineAt(range.from).number;
             const last = state.doc.lineAt(range.to).number;
             const start = state.doc.lineAt(Math.max(range.from, visible.from)).number;
             const end = state.doc.lineAt(Math.min(range.to, visible.to)).number;
+
             for (let number = start; number <= end; number++) {
                 if (!fenceLines.has(number)) {
                     fenceLines.add(number);
@@ -79,6 +87,7 @@ function codeDecorations(view: EditorView): DecorationSet {
             }
         }
     }
+
     return Decoration.set(decorations, true);
 }
 

package/src/chat/ui/composer/insert.ts

@@ -12,11 +12,13 @@ export function insertAtSelection(state: EditorState, text: string): Transaction
     if (text === '') {
         return {};
     }
+
     const { from, to } = state.selection.main;
     const before = state.doc.sliceString(Math.max(0, from - 1), from);
     const after = state.doc.sliceString(to, to + 1);
     const lead = before !== '' && !isSpace(before) && !isSpace(text) ? ' ' : '';
     const trail = (after === '' || !isSpace(after)) && !/\s$/.test(text) ? ' ' : '';
     const insert = `${lead}${text}${trail}`;
+
     return { changes: { from, to, insert }, selection: { anchor: from + insert.length }, scrollIntoView: true, userEvent: 'input' };
 }