mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-16 10:50:38 +09:00
[codex] Polish issue composer and long document display (#4420)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies > - Issue comments and documents are the main working surface where operators and agents collaborate > - File drops, markdown editing, and long issue descriptions need to feel predictable because they sit directly in the task execution loop > - The composer had edge cases around drag targets, attachment feedback, image drops, and long markdown content crowding the page > - This pull request polishes the issue composer, hardens markdown editor regressions, and adds a fold curtain for long issue descriptions/documents > - The benefit is a calmer issue detail surface that handles uploads and long work products without hiding state or breaking layout ## What Changed - Scoped issue-composer drag/drop behavior so the composer owns file drops without turning the whole thread into a competing drop target. - Added clearer attachment upload feedback for non-image files and image-drop stability coverage. - Hardened markdown editor and markdown body handling around HTML-like tag regressions. - Added `FoldCurtain` and wired it into issue descriptions and issue documents so long markdown previews can expand/collapse. - Added Storybook coverage for the fold curtain state. ## Verification - `pnpm exec vitest run ui/src/components/IssueChatThread.test.tsx ui/src/components/MarkdownEditor.test.tsx ui/src/components/MarkdownBody.test.tsx --config ui/vitest.config.ts` passed: 3 files, 75 tests. - `git diff --check public-gh/master..pap-2228-editor-composer-polish -- . ':(exclude)ui/storybook-static'` passed. - Confirmed this PR does not include `pnpm-lock.yaml`. ## Risks - Low-to-medium risk: this changes user-facing composer/drop behavior and long markdown display. - The fold curtain uses DOM measurement and `ResizeObserver`; reviewers should check browser behavior for very long descriptions and documents. - No database migrations. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex coding agent based on GPT-5, with shell, git, Paperclip API, and GitHub CLI tool use in the local Paperclip workspace. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge Note: screenshots were not newly captured during branch splitting; the UI states are covered by component tests and a Storybook story. --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com> Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
8f1cd0474f
commit
77a72e28c2
10 changed files with 839 additions and 54 deletions
|
|
@ -69,12 +69,14 @@ vi.mock("./MarkdownEditor", () => ({
|
|||
placeholder,
|
||||
className,
|
||||
contentClassName,
|
||||
fileDropTarget,
|
||||
}: {
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
contentClassName?: string;
|
||||
fileDropTarget?: "editor" | "parent";
|
||||
}, ref) => {
|
||||
useImperativeHandle(ref, () => ({
|
||||
focus: markdownEditorFocusMock,
|
||||
|
|
@ -85,6 +87,7 @@ vi.mock("./MarkdownEditor", () => ({
|
|||
aria-label="Issue chat editor"
|
||||
data-class-name={className}
|
||||
data-content-class-name={contentClassName}
|
||||
data-file-drop-target={fileDropTarget}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={(event) => onChange?.(event.target.value)}
|
||||
|
|
@ -249,6 +252,21 @@ function createExpiredRequestConfirmationInteraction(
|
|||
};
|
||||
}
|
||||
|
||||
function createFileDragEvent(type: string, files: File[]) {
|
||||
const event = new Event(type, { bubbles: true, cancelable: true }) as Event & {
|
||||
dataTransfer: {
|
||||
types: string[];
|
||||
files: File[];
|
||||
dropEffect?: string;
|
||||
};
|
||||
};
|
||||
event.dataTransfer = {
|
||||
types: ["Files"],
|
||||
files,
|
||||
};
|
||||
return event;
|
||||
}
|
||||
|
||||
describe("IssueChatThread", () => {
|
||||
let container: HTMLDivElement;
|
||||
|
||||
|
|
@ -818,12 +836,210 @@ describe("IssueChatThread", () => {
|
|||
expect(editor?.dataset.contentClassName).toContain("max-h-[28dvh]");
|
||||
expect(editor?.dataset.contentClassName).toContain("overflow-y-auto");
|
||||
expect(editor?.dataset.contentClassName).not.toContain("min-h-[72px]");
|
||||
expect(editor?.dataset.fileDropTarget).toBe("parent");
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows full-composer drop instructions while dragging files over the issue composer", () => {
|
||||
const root = createRoot(container);
|
||||
|
||||
act(() => {
|
||||
root.render(
|
||||
<MemoryRouter>
|
||||
<IssueChatThread
|
||||
comments={[]}
|
||||
linkedRuns={[]}
|
||||
timelineEvents={[]}
|
||||
liveRuns={[]}
|
||||
onAdd={async () => {}}
|
||||
imageUploadHandler={async () => "/api/attachments/image/content"}
|
||||
onAttachImage={async () => undefined}
|
||||
enableLiveTranscriptPolling={false}
|
||||
/>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
});
|
||||
|
||||
const composer = container.querySelector('[data-testid="issue-chat-composer"]') as HTMLDivElement | null;
|
||||
expect(composer).not.toBeNull();
|
||||
const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement | null;
|
||||
expect(fileInput?.getAttribute("accept")).toBeNull();
|
||||
|
||||
act(() => {
|
||||
composer?.dispatchEvent(createFileDragEvent("dragenter", [
|
||||
new File(["hello"], "notes.txt", { type: "text/plain" }),
|
||||
]));
|
||||
});
|
||||
|
||||
expect(container.querySelector('[data-testid="issue-chat-composer-drop-overlay"]')).not.toBeNull();
|
||||
expect(container.textContent).toContain("Drop to upload");
|
||||
expect(container.textContent).toContain("Images insert into the reply");
|
||||
expect(container.textContent).toContain("Other files are added to this issue");
|
||||
expect(composer?.className).toContain("border-primary/45");
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows non-image attachment upload state in the composer after a drop", async () => {
|
||||
const root = createRoot(container);
|
||||
const onAttachImage = vi.fn(async (file: File) => ({
|
||||
id: "attachment-1",
|
||||
companyId: "company-1",
|
||||
issueId: "issue-1",
|
||||
issueCommentId: null,
|
||||
assetId: "asset-1",
|
||||
provider: "local_disk",
|
||||
objectKey: "issues/issue-1/report.pdf",
|
||||
contentPath: "/api/attachments/attachment-1/content",
|
||||
originalFilename: file.name,
|
||||
contentType: file.type,
|
||||
byteSize: file.size,
|
||||
sha256: "abc123",
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-1",
|
||||
createdAt: new Date("2026-04-24T12:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-24T12:00:00.000Z"),
|
||||
}));
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<MemoryRouter>
|
||||
<IssueChatThread
|
||||
comments={[]}
|
||||
linkedRuns={[]}
|
||||
timelineEvents={[]}
|
||||
liveRuns={[]}
|
||||
onAdd={async () => {}}
|
||||
onAttachImage={onAttachImage}
|
||||
enableLiveTranscriptPolling={false}
|
||||
/>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
});
|
||||
|
||||
const composer = container.querySelector('[data-testid="issue-chat-composer"]') as HTMLDivElement | null;
|
||||
const file = new File(["report body"], "report.pdf", { type: "application/pdf" });
|
||||
|
||||
await act(async () => {
|
||||
composer?.dispatchEvent(createFileDragEvent("drop", [file]));
|
||||
});
|
||||
|
||||
expect(onAttachImage).toHaveBeenCalledWith(file);
|
||||
const attachmentList = container.querySelector('[data-testid="issue-chat-composer-attachments"]');
|
||||
expect(attachmentList).not.toBeNull();
|
||||
expect(container.textContent).toContain("report.pdf");
|
||||
expect(container.textContent).toContain("Attached to issue");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows only the outer composer drop overlay when dragging over the reply editor", () => {
|
||||
const root = createRoot(container);
|
||||
|
||||
act(() => {
|
||||
root.render(
|
||||
<MemoryRouter>
|
||||
<IssueChatThread
|
||||
comments={[]}
|
||||
linkedRuns={[]}
|
||||
timelineEvents={[]}
|
||||
liveRuns={[]}
|
||||
onAdd={async () => {}}
|
||||
imageUploadHandler={async () => "/api/attachments/image/content"}
|
||||
onAttachImage={async () => undefined}
|
||||
enableLiveTranscriptPolling={false}
|
||||
/>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
});
|
||||
|
||||
const composer = container.querySelector('[data-testid="issue-chat-composer"]') as HTMLDivElement | null;
|
||||
const editor = container.querySelector('textarea[aria-label="Issue chat editor"]') as HTMLTextAreaElement | null;
|
||||
expect(composer).not.toBeNull();
|
||||
expect(editor).not.toBeNull();
|
||||
|
||||
act(() => {
|
||||
editor?.dispatchEvent(createFileDragEvent("dragenter", [
|
||||
new File(["hello"], "notes.txt", { type: "text/plain" }),
|
||||
]));
|
||||
});
|
||||
|
||||
expect(container.querySelector('[data-testid="issue-chat-composer-drop-overlay"]')).not.toBeNull();
|
||||
expect(container.textContent).toContain("Drop to upload");
|
||||
expect(container.textContent).not.toContain("Drop image to upload");
|
||||
expect(composer?.className).toContain("border-primary/45");
|
||||
|
||||
const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement | null;
|
||||
expect(fileInput?.getAttribute("accept")).toBeNull();
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows non-image attachment upload state in the composer after a drop from the editor", async () => {
|
||||
const root = createRoot(container);
|
||||
const onAttachImage = vi.fn(async (file: File) => ({
|
||||
id: "attachment-1",
|
||||
companyId: "company-1",
|
||||
issueId: "issue-1",
|
||||
issueCommentId: null,
|
||||
assetId: "asset-1",
|
||||
provider: "local_disk",
|
||||
objectKey: "issues/issue-1/report.pdf",
|
||||
contentPath: "/api/attachments/attachment-1/content",
|
||||
originalFilename: file.name,
|
||||
contentType: file.type,
|
||||
byteSize: file.size,
|
||||
sha256: "abc123",
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-1",
|
||||
createdAt: new Date("2026-04-24T12:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-24T12:00:00.000Z"),
|
||||
}));
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<MemoryRouter>
|
||||
<IssueChatThread
|
||||
comments={[]}
|
||||
linkedRuns={[]}
|
||||
timelineEvents={[]}
|
||||
liveRuns={[]}
|
||||
onAdd={async () => {}}
|
||||
onAttachImage={onAttachImage}
|
||||
enableLiveTranscriptPolling={false}
|
||||
/>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
});
|
||||
|
||||
const editor = container.querySelector('textarea[aria-label="Issue chat editor"]') as HTMLTextAreaElement | null;
|
||||
const file = new File(["report body"], "report.pdf", { type: "application/pdf" });
|
||||
|
||||
await act(async () => {
|
||||
editor?.dispatchEvent(createFileDragEvent("drop", [file]));
|
||||
});
|
||||
|
||||
expect(onAttachImage).toHaveBeenCalledWith(file);
|
||||
const attachmentList = container.querySelector('[data-testid="issue-chat-composer-attachments"]');
|
||||
expect(attachmentList).not.toBeNull();
|
||||
expect(attachmentList?.className).toContain("mb-3");
|
||||
expect(container.textContent).toContain("report.pdf");
|
||||
expect(container.textContent).toContain("Attached to issue");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("renders the bottom spacer with zero height until the user has submitted", () => {
|
||||
const root = createRoot(container);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue