feat: add copy functionality for ai responses with Dyad tag formatting (#1290) (#1315)

## Summary
Adds AI response copy functionality to chat messages that preserves
formatting and converts Dyad-specific tags to clean, readable markdown.

## Changes
- **New `useCopyToClipboard` hook**: Parses Dyad tags and converts them
to professional markdown format
- **Updated `ChatMessage` component**: Positions copy button on left
side of approval status
- **Dyad tag conversion**: Transforms custom tags to readable format:
  - `<dyad-write>` → `### File: path/to/file.js` + code block
  - `<dyad-edit>` → `### Edit: path/to/file.js` + code block  
  - `<dyad-execute-sql>` → `### Execute SQL` + ```sql block
  - `<think>` → `### Thinking` + content

## Features
-  Automatic programming language detection from file extensions  
-  Professional markdown formatting with proper headings and code
blocks
-  Tooltip showing "Copied" confirmation
-  Reuses existing DyadMarkdownParser logic for consistency

closes (#1290)
    
<!-- This is an auto-generated description by cubic. -->
---

## Summary by cubic
Adds a Copy button to assistant messages that copies a clean Markdown
version of the response by converting Dyad tags and preserving code
blocks. Improves shareability and removes Dyad-only markup; addresses
Linear #1290.

- **New Features**
- Added useCopyToClipboard hook that parses Dyad tags to Markdown,
auto-detects code language, and cleans spacing.
- Updated ChatMessage to show a Copy button (with Copy/Copied tooltip)
to the left of approval status; disabled while streaming.
- Tag conversions: think → "### Thinking"; dyad-write/edit → "###
File/Edit: path" + fenced code; dyad-execute-sql → "### Execute SQL" +
sql block; other Dyad tags map to concise headings; chat-summary/command
are omitted.
- Added e2e tests for clipboard copy, Dyad tag stripping/formatting, and
tooltip states.

<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Adeniji Adekunle James
2025-09-23 07:32:55 +01:00
committed by GitHub
parent 9cca1d2af0
commit 2597d50529
5 changed files with 451 additions and 44 deletions

View File

@@ -15,6 +15,7 @@ import {
import { useQueryClient } from "@tanstack/react-query";
import { useSettings } from "@/hooks/useSettings";
import { useCheckProblems } from "@/hooks/useCheckProblems";
import { getLanguage } from "@/utils/get_language";
interface FileEditorProps {
appId: number | null;
@@ -190,35 +191,6 @@ export const FileEditor = ({ appId, filePath }: FileEditorProps) => {
}
};
// Determine language based on file extension
const getLanguage = (filePath: string) => {
const extension = filePath.split(".").pop()?.toLowerCase() || "";
const languageMap: Record<string, string> = {
js: "javascript",
jsx: "javascript",
ts: "typescript",
tsx: "typescript",
html: "html",
css: "css",
json: "json",
md: "markdown",
py: "python",
java: "java",
c: "c",
cpp: "cpp",
cs: "csharp",
go: "go",
rs: "rust",
rb: "ruby",
php: "php",
swift: "swift",
kt: "kotlin",
// Add more as needed
};
return languageMap[extension] || "plaintext";
};
if (loading) {
return <div className="p-4">Loading file content...</div>;
}