Add/Remove Inline File References in UI #165

New issue

Closed

opened 2026-01-01 01:29:09 +00:00 by rwachters · 0 comments

rwachters commented

2026-01-01 01:29:09 +00:00

(Migrated from github.com)

Overview

Implement interactive inline file attachment in the chat input field, allowing users to insert file references at specific cursor positions using the # key and display them as colored text links within the message.

User Story

As a user, I want to insert file references inline within my message text using the # key, so that files are embedded at specific positions in my message rather than just appended at the end.

Implementation Plan

Steps

Migrate InputArea from String to TextFieldValue in InputArea.kt, ChatState, and UpdateInputUseCase to track cursor position and selection; update all call sites in ChatViewModel and UI components.
Create FileReferenceVisualTransformation class implementing VisualTransformation with OffsetMapping to inject colored text links like [file.txt] at inlinePosition indices, making them skip-over zones for cursor navigation while keeping the actual text unchanged.
Implement automatic position synchronization in UpdateInputUseCase.execute() to detect text insertions/deletions and shift all inlinePosition values that come after the change point, maintaining correct inline reference placement as user types.
Add # key handler to InputArea.onKeyEvent to intercept Shift+3, capture textFieldValue.selection.start, show a file selection dialog listing currently attached non-inline files, and update selected FileReference with captured inlinePosition.
Add Backspace handler to detect when cursor is immediately after an inline reference (check if any file has inlinePosition == cursorPosition - 1), and if found, clear its inlinePosition to convert it back to non-inline instead of deleting text.
Make inline text clickable by implementing click detection through OffsetMapping inverse lookup to determine which file reference was clicked, then invoke onFileReferenceClick callback to show details dialog.

Design Decisions

Visual representation: Display inline references as colored text links like [file.txt] (using SpanStyle with color = primaryColor)
Cursor behavior: Inline references are skip-over zones (cursor jumps over them)
Copy/paste: The inline text [file.txt] is included when copying (natural TextField behavior)
Multiple files at same position: Insert consecutively with inlinePosition, inlinePosition+1, etc.
Single file insertion: # key inserts one file at a time (simpler implementation)

Builds on #164 (File References implementation)

Technical Notes

Backend already supports inlinePosition via buildContentWithFileReferences
Non-inline file badges remain displayed in the FlowRow below the TextField
Use OffsetMapping to handle cursor positioning around inline references

## Overview Implement interactive inline file attachment in the chat input field, allowing users to insert file references at specific cursor positions using the `#` key and display them as colored text links within the message. ## User Story As a user, I want to insert file references inline within my message text using the `#` key, so that files are embedded at specific positions in my message rather than just appended at the end. ## Implementation Plan ### Steps 1. **Migrate `InputArea` from `String` to `TextFieldValue`** in `InputArea.kt`, `ChatState`, and `UpdateInputUseCase` to track cursor position and selection; update all call sites in `ChatViewModel` and UI components. 2. **Create `FileReferenceVisualTransformation`** class implementing `VisualTransformation` with `OffsetMapping` to inject colored text links like `[file.txt]` at `inlinePosition` indices, making them skip-over zones for cursor navigation while keeping the actual text unchanged. 3. **Implement automatic position synchronization** in `UpdateInputUseCase.execute()` to detect text insertions/deletions and shift all `inlinePosition` values that come after the change point, maintaining correct inline reference placement as user types. 4. **Add `#` key handler** to `InputArea.onKeyEvent` to intercept Shift+3, capture `textFieldValue.selection.start`, show a file selection dialog listing currently attached non-inline files, and update selected `FileReference` with captured `inlinePosition`. 5. **Add Backspace handler** to detect when cursor is immediately after an inline reference (check if any file has `inlinePosition == cursorPosition - 1`), and if found, clear its `inlinePosition` to convert it back to non-inline instead of deleting text. 6. **Make inline text clickable** by implementing click detection through `OffsetMapping` inverse lookup to determine which file reference was clicked, then invoke `onFileReferenceClick` callback to show details dialog. ## Design Decisions - **Visual representation**: Display inline references as colored text links like `[file.txt]` (using `SpanStyle` with `color = primaryColor`) - **Cursor behavior**: Inline references are skip-over zones (cursor jumps over them) - **Copy/paste**: The inline text `[file.txt]` is included when copying (natural TextField behavior) - **Multiple files at same position**: Insert consecutively with `inlinePosition`, `inlinePosition+1`, etc. - **Single file insertion**: `#` key inserts one file at a time (simpler implementation) ## Related Issues - Builds on #164 (File References implementation) ## Technical Notes - Backend already supports `inlinePosition` via `buildContentWithFileReferences` - Non-inline file badges remain displayed in the FlowRow below the TextField - Use `OffsetMapping` to handle cursor positioning around inline references