Files
fusion/packages/dashboard/app/components/ComposeChatPanel.css
gsxdsm e30f6d851f FN-8293: add native structure drag-and-draft mail composition
Mail composers can attach native structures by drag-and-drop and generate report narratives with AI.

- Add a shared native-structure drag protocol and attachable previews across Mail source views.
- Add a disposable compose-chat panel that drafts narratives around attached embeds.
- Cover drag behavior and compose-chat session lifecycle, and document the Mail interaction.

Files changed:
 .changeset/fn-8293-mail-drag-compose-chat.md       |   7 ++
 docs/dashboard-guide.md                            |   3 +
 .../dashboard/app/components/ComposeChatPanel.css  |  33 ++++++
 .../dashboard/app/components/ComposeChatPanel.tsx  | 117 +++++++++++++++++++++
 packages/dashboard/app/components/EvalsView.tsx    |   3 +-
 packages/dashboard/app/components/GoalsView.tsx    |   6 ++
 packages/dashboard/app/components/InsightsView.tsx |   8 +-
 .../dashboard/app/components/MessageComposer.css   |  22 ++++
 .../dashboard/app/components/MessageComposer.tsx   |  92 ++++++++++++++--
 .../dashboard/app/components/MissionManager.tsx    |  11 +-
 .../components/__tests__/ComposeChatPanel.test.tsx | 102 ++++++++++++++++++
 .../components/__tests__/MessageComposer.test.tsx  |  25 +++++
 .../utils/__tests__/nativeStructureDrag.test.ts    |  56 ++++++++++
 .../dashboard/app/utils/nativeStructureDrag.ts     |  54 ++++++++++
 14 files changed, 525 insertions(+), 14 deletions(-)

Fusion-Task-Id: FN-8293
Fusion-Task-Lineage: 9864e76c-2a0d-41f6-b7f2-de8dd63710b5
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
2026-07-18 20:30:42 -07:00

34 lines
671 B
CSS

.compose-chat-panel {
background: var(--bg-secondary);
border: solid var(--border);
border-radius: var(--radius-md);
display: grid;
gap: var(--space-sm);
padding: var(--space-md);
}
.compose-chat-panel__input {
min-height: calc(var(--space-xl) * 3);
resize: vertical;
}
.compose-chat-panel__output {
background: var(--bg-primary);
border-radius: var(--radius-sm);
min-height: calc(var(--space-xl) * 3);
padding: var(--space-sm);
white-space: pre-wrap;
}
.compose-chat-panel__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
@media (max-width: 768px) {
.compose-chat-panel__actions > .btn {
flex: 1 1 auto;
}
}