//! A configurable [Dioxus] + [Bulma] chat UI.
//!
//! The crate provides a [`ChatSurface`] component plus a small data model
//! ([`ChatTranscript`], [`ChatMessage`], [`ChatMessagePayload`]) for rendering
//! chat conversations, including:
//!
//! - chained, collapsible reasoning timelines ([`Reasoning`]),
//! - inline message controls — buttons, selectors, toggles ([`InlineControl`]),
//! surfaced through [`ChatSurface`]'s `on_action` handler,
//! - spinning status indicators, tool calls, progress, and errors.
//!
//! The composer is **controlled**: bind [`ChatSurfaceProps::input`] and handle
//! `on_send`/`on_stop`/`on_retry`/`on_clear`. Set [`ChatSurfaceProps::embedded`]
//! to host the surface inside an app that already provides Bulma and a theme,
//! and inject app-specific composer controls via
//! [`ChatSurfaceProps::input_accessory`].
//!
//! With the default `genai` feature enabled, [`ChatTranscript::to_genai_request`]
//! converts a transcript into a [`genai`] chat request. Disable default features
//! to build for `wasm32-unknown-unknown` (the web target), where `genai` is not
//! available. The `markdown` feature (on by default, pure Rust) renders
//! [`ChatMessagePayload::Markdown`] to HTML.
//!
//! [Dioxus]: https://dioxuslabs.com/
//! [Bulma]: https://bulma.io/
//! [`genai`]: https://docs.rs/genai/
use dioxus::prelude::*;
use dioxus_bulma::prelude::*;
#[cfg(feature = "genai")]
use genai::chat::{ChatMessage as GenAiChatMessage, ChatRequest, ChatRole as GenAiChatRole, ToolResponse};
use serde::{Deserialize, Serialize};
use serde_json::Value;
#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
pub enum ChatRole {
System,
User,
Assistant,
Tool,
}
#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
pub enum ToolCallStatus {
Pending,
Running,
Completed,
Failed,
}
impl ToolCallStatus {
pub fn as_label(&self) -> &'static str {
match self {
Self::Pending => "pending",
Self::Running => "running",
Self::Completed => "completed",
Self::Failed => "failed",
}
}
}
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub struct ToolCall {
pub name: String,
pub arguments: Value,
pub status: ToolCallStatus,
}
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub struct ProgressState {
pub label: String,
pub percent: f32,
}
/// Lifecycle of a single step inside a chained reasoning trace.
#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
pub enum StepStatus {
/// Not started yet.
Pending,
/// Currently running.
Active,
/// Finished successfully.
Done,
/// Finished with an error.
Failed,
}
/// A single phase in a chained "thinking" trace (à la VS Code agent steps).
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub struct ReasoningStep {
pub title: String,
/// Optional secondary line (e.g. a file path, a short result).
#[serde(default)]
pub detail: Option<String>,
pub status: StepStatus,
}
impl ReasoningStep {
pub fn new(title: impl Into<String>, status: StepStatus) -> Self {
Self { title: title.into(), detail: None, status }
}
pub fn with_detail(mut self, detail: impl Into<String>) -> Self {
self.detail = Some(detail.into());
self
}
}
/// A collapsible group of chained reasoning steps shown as a connected timeline.
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub struct Reasoning {
/// One-line summary shown on the collapsed header (e.g. "Thought for 4s").
pub summary: String,
pub steps: Vec<ReasoningStep>,
/// Whether the panel starts collapsed.
#[serde(default)]
pub collapsed: bool,
}
/// Visual emphasis for an inline control.
#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize, Default)]
pub enum ControlStyle {
Primary,
#[default]
Neutral,
Danger,
Ghost,
}
/// An option in an inline [`InlineControl::Select`].
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub struct SelectOption {
pub value: String,
pub label: String,
}
impl SelectOption {
pub fn new(value: impl Into<String>, label: impl Into<String>) -> Self {
Self { value: value.into(), label: label.into() }
}
}
/// A small interactive element rendered inline inside a message.
///
/// Interactions are surfaced through the [`ChatSurface`] `on_action` handler;
/// the component is "controlled", so update the transcript in response to events.
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub enum InlineControl {
Button {
id: String,
label: String,
#[serde(default)]
style: ControlStyle,
#[serde(default)]
disabled: bool,
},
Select {
id: String,
#[serde(default)]
label: Option<String>,
options: Vec<SelectOption>,
#[serde(default)]
selected: Option<String>,
},
Toggle {
id: String,
label: String,
#[serde(default)]
value: bool,
},
}
/// The kind of interaction that produced a [`ControlEvent`].
#[derive(Debug, Clone, PartialEq)]
pub enum ControlValue {
/// A button was clicked.
Clicked,
/// A select changed to the given option value.
Selected(String),
/// A toggle changed to the given state.
Toggled(bool),
}
/// Emitted when the user interacts with an [`InlineControl`].
#[derive(Debug, Clone, PartialEq)]
pub struct ControlEvent {
/// The `id` of the control that was interacted with.
pub id: String,
pub value: ControlValue,
}
/// Whether a piece of attached context is a file or a directory.
#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
pub enum ContextKind {
File,
Directory,
}
/// A piece of context (a file or directory) attached to the next message.
///
/// The pending list is owned by the caller and passed to [`ChatSurface`] via
/// `attachments`; the component renders it and emits [`ContextEvent`]s. How files
/// and directories are actually chosen (native dialog, browser input, typed path)
/// is up to the caller — see the `on_context` handler.
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub struct ContextItem {
/// Stable id used when the user removes the item.
pub id: String,
/// Display label, e.g. a file name or directory path.
pub label: String,
pub kind: ContextKind,
}
impl ContextItem {
pub fn file(id: impl Into<String>, label: impl Into<String>) -> Self {
Self { id: id.into(), label: label.into(), kind: ContextKind::File }
}
pub fn directory(id: impl Into<String>, label: impl Into<String>) -> Self {
Self { id: id.into(), label: label.into(), kind: ContextKind::Directory }
}
/// A file context item derived from a [`Document`] (id and name carried over).
pub fn from_document(doc: &Document) -> Self {
Self::file(doc.id.clone(), doc.name.clone())
}
}
/// Emitted when the user adds or removes context via the input area.
///
/// Handle this in [`ChatSurface`]'s `on_context` and update the `attachments`
/// list you pass back in (a controlled component, like [`InlineControl`]).
#[derive(Debug, Clone, PartialEq)]
pub enum ContextEvent {
/// The user asked to attach file(s); open a picker and add [`ContextItem`]s.
AddFilesRequested,
/// The user asked to add a directory as context.
AddDirectoryRequested,
/// The user removed the attached item with this `id`.
Remove(String),
}
/// The role of a single line in a [`FileDiff`].
#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
pub enum DiffKind {
/// An added line (rendered green, prefixed `+`).
Added,
/// A removed line (rendered red, prefixed `-`).
Removed,
/// An unchanged context line.
Context,
}
/// A single line within a unified [`FileDiff`].
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub struct DiffLine {
pub kind: DiffKind,
pub content: String,
}
impl DiffLine {
pub fn added(content: impl Into<String>) -> Self {
Self { kind: DiffKind::Added, content: content.into() }
}
pub fn removed(content: impl Into<String>) -> Self {
Self { kind: DiffKind::Removed, content: content.into() }
}
pub fn context(content: impl Into<String>) -> Self {
Self { kind: DiffKind::Context, content: content.into() }
}
}
/// A unified diff for a single file, rendered with an apply animation.
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub struct FileDiff {
/// File path shown in the diff header.
pub path: String,
pub lines: Vec<DiffLine>,
/// When `true`, changed lines stream in (staggered) and flash on apply.
/// Set `false` to render the final state with no animation.
#[serde(default = "default_true")]
pub animate: bool,
}
fn default_true() -> bool {
true
}
/// The type of a [`Document`], used to pick an icon when there is no image preview.
#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
pub enum DocumentKind {
Image,
Pdf,
Text,
Other,
/// Rendered by a caller-provided handler — see [`ChatSurface`]'s
/// `render_document`.
Custom,
}
/// A document shown as a thumbnail that expands to a full view on click.
///
/// Built-in full views: image (`image`), PDF (`url`, with an optional `image`
/// page preview), and text (`text`). For anything else, set `kind` to
/// [`DocumentKind::Custom`] and provide a `render_document` handler on the
/// [`ChatSurface`]; `data` carries an arbitrary payload for that handler.
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub struct Document {
pub id: String,
/// Display name, e.g. "diagram.png".
pub name: String,
pub kind: DocumentKind,
/// Image source (URL or data URI): thumbnail + enlarged image, or a PDF page
/// preview.
#[serde(default)]
pub image: Option<String>,
/// Source URL (PDF, downloadable original, custom resource).
#[serde(default)]
pub url: Option<String>,
/// Inline text content shown in the expanded view (for text/code documents).
#[serde(default)]
pub text: Option<String>,
/// Arbitrary payload for a custom handler to interpret.
#[serde(default)]
pub data: Option<Value>,
}
impl Document {
fn bare(id: impl Into<String>, name: impl Into<String>, kind: DocumentKind) -> Self {
Self {
id: id.into(),
name: name.into(),
kind,
image: None,
url: None,
text: None,
data: None,
}
}
/// An image document: the same `src` is used for the thumbnail and full view.
pub fn image(id: impl Into<String>, name: impl Into<String>, src: impl Into<String>) -> Self {
Self { image: Some(src.into()), ..Self::bare(id, name, DocumentKind::Image) }
}
/// A text document: shown as an icon thumbnail that expands to the content.
pub fn text(id: impl Into<String>, name: impl Into<String>, content: impl Into<String>) -> Self {
Self { text: Some(content.into()), ..Self::bare(id, name, DocumentKind::Text) }
}
/// A PDF document. `url` points at the file; set [`Document::image`]-style
/// `image` too for a page preview where inline PDF rendering is unavailable.
pub fn pdf(id: impl Into<String>, name: impl Into<String>, url: impl Into<String>) -> Self {
Self { url: Some(url.into()), ..Self::bare(id, name, DocumentKind::Pdf) }
}
/// A custom document rendered by a `render_document` handler. `data` is passed
/// through for the handler to interpret.
pub fn custom(id: impl Into<String>, name: impl Into<String>, data: Value) -> Self {
Self { data: Some(data), ..Self::bare(id, name, DocumentKind::Custom) }
}
/// Attach a page-preview image (e.g. for a PDF).
pub fn with_image(mut self, src: impl Into<String>) -> Self {
self.image = Some(src.into());
self
}
}
/// Emitted when the user acts on documents in a gallery.
///
/// Handle this in [`ChatSurface`]'s `on_document`. Document selection requires
/// `ChatControls::allow_document_selection`; downloads use a native link and do
/// not emit an event.
#[derive(Debug, Clone, PartialEq)]
pub enum DocumentEvent {
/// The user selected one or more documents and asked to add them to the chat
/// context. Convert them (e.g. via [`ContextItem::from_document`]) and append
/// to the `attachments` list.
AddToContext(Vec<Document>),
}
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub enum ChatMessagePayload {
Text(String),
Markdown(String),
/// A chained, collapsible reasoning/thinking trace.
Reasoning(Reasoning),
ToolCall(ToolCall),
ToolResult { name: String, content: String },
Progress(ProgressState),
/// A spinning status line with a custom label (e.g. "Running tests…").
Status(String),
/// A row of inline controls (buttons / selectors / toggles).
Controls(Vec<InlineControl>),
/// A unified file diff, optionally animated as it is applied.
Diff(FileDiff),
/// A gallery of document thumbnails that expand to a full view.
Documents(Vec<Document>),
Typing,
Error(String),
}
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub struct ChatMessage {
pub role: ChatRole,
pub payload: ChatMessagePayload,
}
#[derive(Debug, Clone, PartialEq, Default, Serialize, Deserialize)]
pub struct ChatTranscript {
pub messages: Vec<ChatMessage>,
}
impl ChatTranscript {
pub fn push(&mut self, role: ChatRole, payload: ChatMessagePayload) {
self.messages.push(ChatMessage { role, payload });
}
#[cfg(feature = "genai")]
pub fn to_genai_request(&self) -> ChatRequest {
let mut system: Option<String> = None;
let mut messages = Vec::new();
for message in &self.messages {
match (&message.role, &message.payload) {
(ChatRole::System, ChatMessagePayload::Text(content))
| (ChatRole::System, ChatMessagePayload::Markdown(content)) => {
if system.is_none() {
system = Some(content.clone());
} else {
messages.push(GenAiChatMessage::system(content.clone()));
}
}
(ChatRole::User, ChatMessagePayload::Text(content))
| (ChatRole::User, ChatMessagePayload::Markdown(content)) => {
messages.push(GenAiChatMessage::user(content.clone()));
}
(ChatRole::Assistant, ChatMessagePayload::Text(content))
| (ChatRole::Assistant, ChatMessagePayload::Markdown(content)) => {
messages.push(GenAiChatMessage::assistant(content.clone()));
}
(ChatRole::Tool, ChatMessagePayload::Text(content))
| (ChatRole::Tool, ChatMessagePayload::Markdown(content)) => {
messages.push(GenAiChatMessage {
role: GenAiChatRole::Tool,
content: format!("Tool output: {content}").into(),
options: None,
});
}
(_, ChatMessagePayload::ToolResult { name, content }) => {
messages.push(GenAiChatMessage::from(
ToolResponse::new(name.clone(), content.clone()),
));
}
(_, ChatMessagePayload::ToolCall(call)) => {
messages.push(GenAiChatMessage::assistant(format!(
"Tool call requested: {} with {}",
call.name, call.arguments
)));
}
(_, ChatMessagePayload::Error(content)) => {
messages.push(GenAiChatMessage::assistant(content.clone()));
}
(_, ChatMessagePayload::Progress(_))
| (_, ChatMessagePayload::Reasoning(_))
| (_, ChatMessagePayload::Status(_))
| (_, ChatMessagePayload::Controls(_))
| (_, ChatMessagePayload::Diff(_))
| (_, ChatMessagePayload::Documents(_))
| (_, ChatMessagePayload::Typing) => {}
}
}
let mut request = ChatRequest::new(messages);
request.system = system;
request
}
}
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
pub struct ChatControls {
pub show_input: bool,
pub show_send_button: bool,
pub show_stop_button: bool,
pub show_retry_button: bool,
pub show_clear_button: bool,
pub input_enabled: bool,
pub placeholder: String,
/// Show the "attach files" affordance. Off by default — enabling it requires
/// wiring [`ChatSurface`]'s `on_context` handler to do the picking.
pub allow_file_attachments: bool,
/// Show the "add directory" affordance.
pub allow_directory_context: bool,
/// Label for the attach-files button.
pub attach_files_label: String,
/// Label for the add-directory button.
pub add_directory_label: String,
/// Show selection checkboxes on document thumbnails plus an "add to context"
/// bar. Off by default — enabling it requires wiring `on_document`.
pub allow_document_selection: bool,
}
impl Default for ChatControls {
fn default() -> Self {
Self {
show_input: true,
show_send_button: true,
show_stop_button: true,
show_retry_button: true,
show_clear_button: true,
input_enabled: true,
placeholder: "Ask anything, or invoke a tool...".to_string(),
allow_file_attachments: false,
allow_directory_context: false,
attach_files_label: "📎 Add files".to_string(),
add_directory_label: "📁 Add folder".to_string(),
allow_document_selection: false,
}
}
}
#[derive(Props, Clone, PartialEq)]
pub struct ChatSurfaceProps {
pub transcript: ChatTranscript,
#[props(default)]
pub controls: ChatControls,
#[props(default)]
pub title: Option<String>,
#[props(default)]
pub theme: Option<BulmaTheme>,
/// Embed the surface inside a host app instead of rendering a standalone
/// page. When `true`, the component does **not** wrap itself in a
/// [`BulmaProvider`] (so it pulls no Bulma CSS and applies no theme of its
/// own — the host owns both) and drops the `Section`/`Container`/`Box`/title
/// page chrome, rendering the transcript and composer directly. The scoped
/// `.gc-*` styles are still injected either way.
#[props(default)]
pub embedded: bool,
/// The current value of the composer text input (controlled, like
/// [`transcript`](Self::transcript) and [`attachments`](Self::attachments)).
/// Update it from [`on_input`](Self::on_input).
#[props(default)]
pub input: String,
/// Fired on every keystroke in the composer with the new input value.
#[props(default)]
pub on_input: EventHandler<String>,
/// Fired when the user submits the composer (Send button or Enter). Carries
/// the current input text; clear [`input`](Self::input) in response.
#[props(default)]
pub on_send: EventHandler<String>,
/// Fired when the user clicks Stop to interrupt an in-flight response.
#[props(default)]
pub on_stop: EventHandler<()>,
/// Fired when the user clicks Retry.
#[props(default)]
pub on_retry: EventHandler<()>,
/// Fired when the user clicks Clear.
#[props(default)]
pub on_clear: EventHandler<()>,
/// Optional caller-supplied controls rendered inside the composer (e.g. a
/// model picker or a working-directory selector). App-specific affordances
/// live here rather than in the crate.
#[props(default)]
pub input_accessory: Option<Element>,
/// Fired when the user interacts with an inline [`InlineControl`].
#[props(default)]
pub on_action: EventHandler<ControlEvent>,
/// Context (files/directories) currently attached to the next message.
/// Owned by the caller; render-only here.
#[props(default)]
pub attachments: Vec<ContextItem>,
/// Fired when the user adds or removes context via the input area.
#[props(default)]
pub on_context: EventHandler<ContextEvent>,
/// Custom renderer for the expanded (full) view of [`DocumentKind::Custom`]
/// documents. Receives the [`Document`] and returns the element to show in the
/// lightbox. Without it, custom documents show a "no handler" placeholder.
#[props(default)]
pub render_document: Option<Callback<Document, Element>>,
/// Fired when the user adds selected documents to the context. Requires
/// `ChatControls::allow_document_selection`.
#[props(default)]
pub on_document: EventHandler<DocumentEvent>,
}
/// Scoped styling for the compact captions and the chained reasoning timeline.
/// Colors are pulled from Bulma CSS variables so it adapts to light/dark themes.
const CHAT_SURFACE_CSS: &str = r#"
.gc-msg { margin-bottom: 1.1rem; }
.gc-caption { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; }
.gc-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; flex: none; }
.gc-msg-system .gc-dot { background: #b5b5b5; }
.gc-msg-user .gc-dot { background: var(--bulma-primary, #00d1b2); }
.gc-msg-assistant .gc-dot { background: var(--bulma-link, #485fc7); }
.gc-msg-tool .gc-dot { background: var(--bulma-info, #3e8ed0); }
.gc-role { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bulma-text-weak, #7a7a7a); }
.gc-body { padding-left: 0.9rem; border-left: 2px solid var(--bulma-border-weak, #ededed); margin-left: 0.24rem; }
.gc-body > p { margin: 0; }
.gc-muted { color: var(--bulma-text-weak, #7a7a7a); }
.gc-code { padding: 0.6rem 0.75rem; border-radius: 0.5rem; background: var(--bulma-scheme-main-bis, #f5f7fa); font-size: 0.8rem; overflow-x: auto; margin-top: 0.4rem; white-space: pre; }
.gc-tool-line { display: flex; align-items: center; gap: 0.5rem; }
.gc-tool-name { font-family: monospace; font-weight: 600; font-size: 0.85rem; color: var(--bulma-text, #363636); }
.gc-chip { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.45rem; border-radius: 999px; font-weight: 600; }
.gc-chip-pending { background: rgba(255,183,15,.18); color: #b87503; }
.gc-chip-active { background: rgba(62,142,208,.18); color: #2b6cb0; }
.gc-chip-done { background: rgba(72,199,142,.18); color: #257953; }
.gc-chip-failed { background: rgba(241,70,104,.18); color: #c81e4b; }
.gc-reasoning { border: 1px solid var(--bulma-border-weak, #ededed); border-radius: 0.6rem; background: var(--bulma-scheme-main-bis, #f8f9fb); padding: 0.5rem 0.75rem; }
.gc-reasoning-summary { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; list-style: none; font-size: 0.78rem; color: var(--bulma-text-weak, #7a7a7a); font-weight: 600; }
.gc-reasoning-summary::-webkit-details-marker { display: none; }
.gc-chevron { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s ease; flex: none; }
.gc-reasoning[open] .gc-chevron { transform: rotate(90deg); }
.gc-timeline { list-style: none; margin: 0.6rem 0 0.15rem; padding: 0; }
.gc-step { position: relative; padding: 0 0 0.7rem 1.5rem; }
.gc-step:last-child { padding-bottom: 0; }
.gc-step::before { content: ""; position: absolute; left: 0.4rem; top: 1.05rem; bottom: -0.1rem; width: 2px; background: var(--bulma-border, #dbdbdb); }
.gc-step:last-child::before { display: none; }
.gc-step-marker { position: absolute; left: 0; top: 0.05rem; width: 0.85rem; height: 0.85rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; line-height: 1; }
.gc-step-pending .gc-step-marker { color: var(--bulma-text-weak, #b5b5b5); }
.gc-step-active .gc-step-marker { color: var(--bulma-info, #3e8ed0); animation: gc-pulse 1.2s ease-in-out infinite; }
.gc-step-done .gc-step-marker { color: var(--bulma-success, #48c78e); }
.gc-step-failed .gc-step-marker { color: var(--bulma-danger, #f14668); }
.gc-step-content { display: flex; flex-direction: column; }
.gc-step-title { font-size: 0.85rem; color: var(--bulma-text, #363636); }
.gc-step-pending .gc-step-title { color: var(--bulma-text-weak, #7a7a7a); }
.gc-step-detail { font-size: 0.75rem; color: var(--bulma-text-weak, #7a7a7a); }
.gc-status { display: flex; align-items: center; gap: 0.5rem; color: var(--bulma-text-weak, #7a7a7a); font-size: 0.85rem; }
.gc-spinner { width: 0.95rem; height: 0.95rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; display: inline-block; flex: none; animation: gc-spin 0.7s linear infinite; }
.gc-spinner-sm { width: 0.75rem; height: 0.75rem; border-width: 2px; }
.gc-step-active .gc-step-marker .gc-spinner { color: var(--bulma-info, #3e8ed0); }
.gc-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.gc-control-group { display: inline-flex; align-items: center; gap: 0.35rem; }
.gc-control-label { font-size: 0.78rem; color: var(--bulma-text-weak, #7a7a7a); }
.gc-toggle { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.gc-input-box { border: 1px solid var(--bulma-border, #dbdbdb); border-radius: 0.7rem; background: var(--bulma-scheme-main, #fff); padding: 0.5rem 0.6rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.gc-input-box:focus-within { border-color: var(--bulma-link, #485fc7); box-shadow: 0 0 0 2px rgba(72, 95, 199, 0.12); }
.gc-input-box textarea, .gc-input-box .textarea { border: none !important; box-shadow: none !important; background: transparent; padding: 0.1rem; min-height: 3.5rem; resize: vertical; }
.gc-attachments { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.gc-attachment { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.25rem 0.1rem 0.5rem; border-radius: 999px; background: var(--bulma-scheme-main-bis, #f5f7fa); border: 1px solid var(--bulma-border-weak, #ededed); font-size: 0.76rem; }
.gc-attachment-kind { font-size: 0.8rem; line-height: 1; }
.gc-attachment-label { color: var(--bulma-text, #363636); }
.gc-attachment-remove { cursor: pointer; border: none; background: none; color: var(--bulma-text-weak, #7a7a7a); font-size: 1rem; line-height: 1; padding: 0 0.15rem; }
.gc-attachment-remove:hover { color: var(--bulma-danger, #f14668); }
.gc-input-accessory { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.4rem; }
.gc-context-actions { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-top: 0.3rem; }
.gc-markdown > :first-child { margin-top: 0; }
.gc-markdown > :last-child { margin-bottom: 0; }
.gc-markdown pre { background: var(--bulma-scheme-main-bis, #f5f7fa); border-radius: 0.5rem; padding: 0.6rem 0.75rem; overflow-x: auto; font-size: 0.82rem; }
.gc-markdown code { font-size: 0.85em; }
.gc-context-btn { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; border: none; background: transparent; color: var(--bulma-text-weak, #7a7a7a); font-size: 0.76rem; padding: 0.2rem 0.4rem; border-radius: 0.4rem; line-height: 1; transition: background 0.12s ease, color 0.12s ease; }
.gc-context-btn:hover:not(:disabled) { background: var(--bulma-scheme-main-bis, #f0f1f4); color: var(--bulma-text, #363636); }
.gc-context-btn:disabled { opacity: 0.5; cursor: default; }
.gc-diff { border: 1px solid var(--bulma-border-weak, #ededed); border-radius: 0.6rem; overflow: hidden; font-size: 0.8rem; }
.gc-diff-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.7rem; background: var(--bulma-scheme-main-bis, #f5f7fa); border-bottom: 1px solid var(--bulma-border-weak, #ededed); }
.gc-diff-file { font-family: monospace; font-weight: 600; color: var(--bulma-text, #363636); }
.gc-diff-stat-add { color: #257953; font-weight: 600; }
.gc-diff-stat-del { color: #c81e4b; font-weight: 600; }
.gc-diff-body { font-family: monospace; padding: 0.3rem 0; overflow-x: auto; }
.gc-diff-line { display: flex; gap: 0.5rem; padding: 0 0.7rem; white-space: pre; line-height: 1.5; }
.gc-diff-gutter { width: 0.8rem; text-align: center; flex: none; color: var(--bulma-text-weak, #b5b5b5); user-select: none; }
.gc-diff-code { flex: 1 1 auto; }
.gc-diff-added { background: rgba(72, 199, 142, 0.14); box-shadow: inset 2px 0 0 #48c78e; }
.gc-diff-added .gc-diff-gutter { color: #257953; }
.gc-diff-removed { background: rgba(241, 70, 104, 0.14); box-shadow: inset 2px 0 0 #f14668; }
.gc-diff-removed .gc-diff-gutter { color: #c81e4b; }
.gc-diff-context { color: var(--bulma-text-weak, #7a7a7a); }
.gc-diff-animate { animation: gc-diff-reveal 0.28s ease both; }
.gc-diff-animate.gc-diff-added { animation: gc-diff-reveal 0.28s ease both, gc-flash-add 1.1s ease; }
.gc-diff-animate.gc-diff-removed { animation: gc-diff-reveal 0.28s ease both, gc-flash-remove 1.1s ease; }
.gc-doc-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.8rem; color: var(--bulma-text-weak, #7a7a7a); }
.gc-docs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gc-doc { position: relative; border: 1px solid var(--bulma-border-weak, #ededed); border-radius: 0.5rem; overflow: hidden; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.gc-doc.gc-selected { border-color: var(--bulma-link, #485fc7); box-shadow: 0 0 0 2px rgba(72, 95, 199, 0.25); }
.gc-doc-select { position: absolute; top: 0.35rem; left: 0.35rem; z-index: 2; width: 1rem; height: 1rem; cursor: pointer; }
.gc-doc-thumb { cursor: pointer; border: none; background: var(--bulma-scheme-main, #fff); padding: 0; width: 7rem; overflow: hidden; display: flex; flex-direction: column; text-align: left; }
.gc-doc:hover { border-color: var(--bulma-link, #485fc7); box-shadow: 0 2px 8px rgba(10, 10, 10, 0.08); }
.gc-doc-preview { height: 4.6rem; display: flex; align-items: center; justify-content: center; background: var(--bulma-scheme-main-bis, #f5f7fa); overflow: hidden; }
.gc-doc-preview img { width: 100%; height: 100%; object-fit: cover; }
.gc-doc-icon { font-size: 1.9rem; }
.gc-doc-name { font-size: 0.72rem; padding: 0.3rem 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bulma-text, #363636); }
.gc-lightbox { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.7); display: flex; align-items: center; justify-content: center; padding: 2rem; z-index: 1000; animation: gc-fade-in 0.15s ease; }
.gc-lightbox-card { background: var(--bulma-scheme-main, #fff); border-radius: 0.6rem; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(10, 10, 10, 0.4); }
.gc-lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--bulma-border-weak, #ededed); }
.gc-lightbox-title { font-weight: 600; font-size: 0.9rem; color: var(--bulma-text, #363636); }
.gc-lightbox-actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.gc-lightbox-download { font-size: 0.82rem; color: var(--bulma-link, #485fc7); white-space: nowrap; }
.gc-lightbox-close { cursor: pointer; border: none; background: none; font-size: 1.4rem; line-height: 1; color: var(--bulma-text-weak, #7a7a7a); }
.gc-lightbox-close:hover { color: var(--bulma-text, #363636); }
.gc-lightbox-body { padding: 0.9rem; overflow: auto; }
.gc-lightbox-body img { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; }
.gc-lightbox-text { font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; margin: 0; }
.gc-pdf { width: 80vw; max-width: 900px; height: 75vh; border: none; }
.gc-doc-link { display: inline-block; margin-top: 0.6rem; font-size: 0.85rem; color: var(--bulma-link, #485fc7); }
@keyframes gc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes gc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gc-spin { to { transform: rotate(360deg); } }
@keyframes gc-diff-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes gc-flash-add { 0% { background: rgba(72, 199, 142, 0.55); } 100% { background: rgba(72, 199, 142, 0.14); } }
@keyframes gc-flash-remove { 0% { background: rgba(241, 70, 104, 0.55); } 100% { background: rgba(241, 70, 104, 0.14); } }
"#;
#[component]
pub fn ChatSurface(props: ChatSurfaceProps) -> Element {
let title = props
.title
.clone()
.unwrap_or_else(|| "Dioxus GenAI Chat".to_string());
let theme = props.theme;
let embedded = props.embedded;
// The scoped `.gc-*` styles are needed in both modes. In embedded mode the
// host app owns Bulma + theming, so we skip `BulmaProvider` (no CDN CSS, no
// theme wrapper) and the standalone page chrome.
if embedded {
return rsx! {
style { dangerous_inner_html: CHAT_SURFACE_CSS }
div { class: "gc-surface gc-embedded",
ChatBody { ..props }
}
};
}
rsx! {
BulmaProvider {
theme,
load_bulma_css: true,
style { dangerous_inner_html: CHAT_SURFACE_CSS }
Section {
class: "py-5",
Container {
class: "is-max-desktop",
BulmaBox {
style: "border-radius: 16px; box-shadow: 0 12px 40px rgba(10, 10, 10, 0.1);",
BulmaTitle {
size: TitleSize::Is4,
"{title}"
}
ChatBody { ..props }
}
}
}
}
}
}
/// Render a Markdown payload to an HTML string.
///
/// With the `markdown` feature (on by default) this parses CommonMark (plus
/// tables and strikethrough) via `pulldown-cmark`. Without it, the source is
/// HTML-escaped and wrapped in a paragraph so raw markup is shown verbatim
/// and never interpreted as HTML.
#[cfg(feature = "markdown")]
fn render_markdown(src: &str) -> String {
use pulldown_cmark::{Options, Parser, html};
let mut options = Options::empty();
options.insert(Options::ENABLE_TABLES);
options.insert(Options::ENABLE_STRIKETHROUGH);
let parser = Parser::new_ext(src, options);
let mut out = String::new();
html::push_html(&mut out, parser);
out
}
#[cfg(not(feature = "markdown"))]
fn render_markdown(src: &str) -> String {
let escaped = src
.replace('&', "&")
.replace('<', "<")
.replace('>', ">");
format!("<p>{escaped}</p>")
}
/// The transcript + composer, with no page chrome. Rendered directly in
/// embedded mode, and inside the standalone `Box` otherwise.
#[component]
fn ChatBody(props: ChatSurfaceProps) -> Element {
let on_context = props.on_context;
let on_input = props.on_input;
let on_send = props.on_send;
let on_stop = props.on_stop;
let on_retry = props.on_retry;
let on_clear = props.on_clear;
let show_context_actions =
props.controls.allow_file_attachments || props.controls.allow_directory_context;
let input_enabled = props.controls.input_enabled;
let send_disabled = !input_enabled || props.input.trim().is_empty();
rsx! {
for (idx, message) in props.transcript.messages.iter().enumerate() {
ChatBubble {
key: "{idx}",
message: message.clone(),
on_action: props.on_action,
render_document: props.render_document,
on_document: props.on_document,
document_selectable: props.controls.allow_document_selection,
}
}
if props.controls.show_input {
div {
class: "gc-input-box",
if !props.attachments.is_empty() {
div {
class: "gc-attachments",
for item in props.attachments.iter() {
{
let id = item.id.clone();
rsx! {
span {
key: "{item.id}",
class: "gc-attachment",
span { class: "gc-attachment-kind", "{context_kind_icon(item.kind)}" }
span { class: "gc-attachment-label", "{item.label}" }
button {
class: "gc-attachment-remove",
title: "Remove",
onclick: move |_| on_context.call(ContextEvent::Remove(id.clone())),
"×"
}
}
}
}
}
}
}
// Native textarea (not the Bulma component) so we can bind a
// controlled value and handle Enter-to-send via `onkeydown`.
// Enter submits the controlled `input` value (the keydown event
// itself carries no text); Shift+Enter inserts a newline.
textarea {
class: "textarea",
value: "{props.input}",
placeholder: "{props.controls.placeholder}",
rows: 3,
disabled: !input_enabled,
oninput: move |evt| on_input.call(evt.value()),
onkeydown: {
let input = props.input.clone();
move |evt: KeyboardEvent| {
if input_enabled
&& evt.key() == Key::Enter
&& !evt.modifiers().shift()
{
evt.prevent_default();
let text = input.trim();
if !text.is_empty() {
on_send.call(text.to_string());
}
}
}
},
}
if let Some(accessory) = props.input_accessory.clone() {
div { class: "gc-input-accessory", {accessory} }
}
if show_context_actions {
div {
class: "gc-context-actions",
if props.controls.allow_file_attachments {
button {
class: "gc-context-btn",
disabled: !input_enabled,
onclick: move |_| on_context.call(ContextEvent::AddFilesRequested),
"{props.controls.attach_files_label}"
}
}
if props.controls.allow_directory_context {
button {
class: "gc-context-btn",
disabled: !input_enabled,
onclick: move |_| on_context.call(ContextEvent::AddDirectoryRequested),
"{props.controls.add_directory_label}"
}
}
}
}
}
}
Buttons {
if props.controls.show_send_button {
Button {
color: BulmaColor::Primary,
disabled: send_disabled,
onclick: {
let input = props.input.clone();
move |_| {
let text = input.trim();
if !text.is_empty() {
on_send.call(text.to_string());
}
}
},
"Send"
}
}
if props.controls.show_stop_button {
Button {
color: BulmaColor::Warning,
outlined: true,
onclick: move |_| on_stop.call(()),
"Stop"
}
}
if props.controls.show_retry_button {
Button {
color: BulmaColor::Info,
outlined: true,
onclick: move |_| on_retry.call(()),
"Retry"
}
}
if props.controls.show_clear_button {
Button {
color: BulmaColor::Danger,
outlined: true,
onclick: move |_| on_clear.call(()),
"Clear"
}
}
}
}
}
#[derive(Props, Clone, PartialEq)]
struct ChatBubbleProps {
message: ChatMessage,
on_action: EventHandler<ControlEvent>,
#[props(default)]
render_document: Option<Callback<Document, Element>>,
#[props(default)]
on_document: EventHandler<DocumentEvent>,
#[props(default)]
document_selectable: bool,
}
#[component]
fn ChatBubble(props: ChatBubbleProps) -> Element {
let role = &props.message.role;
rsx! {
div {
class: "gc-msg gc-msg-{role_slug(role)}",
div {
class: "gc-caption",
span { class: "gc-dot" }
span { class: "gc-role", "{role_label(role)}" }
}
div {
class: "gc-body",
{match &props.message.payload {
ChatMessagePayload::Text(content) => rsx! {
p { "{content}" }
},
ChatMessagePayload::Markdown(content) => rsx! {
div {
class: "gc-markdown content",
dangerous_inner_html: render_markdown(content),
}
},
ChatMessagePayload::Reasoning(reasoning) => rsx! {
ReasoningPanel { reasoning: reasoning.clone() }
},
ChatMessagePayload::Status(label) => rsx! {
div {
class: "gc-status",
span { class: "gc-spinner" }
span { "{label}" }
}
},
ChatMessagePayload::Controls(controls) => rsx! {
ControlBar { controls: controls.clone(), on_action: props.on_action }
},
ChatMessagePayload::Diff(diff) => rsx! {
DiffView { diff: diff.clone() }
},
ChatMessagePayload::Documents(documents) => rsx! {
DocumentGallery {
documents: documents.clone(),
render_document: props.render_document,
on_document: props.on_document,
selectable: props.document_selectable,
}
},
ChatMessagePayload::Typing => rsx! {
div {
class: "gc-status",
span { class: "gc-spinner" }
span { "Thinking…" }
}
},
ChatMessagePayload::Error(content) => rsx! {
p { class: "has-text-danger has-text-weight-semibold", "{content}" }
},
ChatMessagePayload::Progress(progress) => rsx! {
div {
p { class: "gc-muted mb-1", "{progress.label}" }
Progress {
color: BulmaColor::Info,
value: progress.percent.clamp(0.0, 100.0),
max: 100.0,
"{progress.percent.clamp(0.0, 100.0).round()}%"
}
}
},
ChatMessagePayload::ToolCall(call) => {
let args = serde_json::to_string_pretty(&call.arguments)
.unwrap_or_else(|_| call.arguments.to_string());
let running = matches!(call.status, ToolCallStatus::Running);
rsx! {
div {
div {
class: "gc-tool-line",
span { class: "gc-tool-name", "{call.name}" }
if running {
span { class: "gc-spinner gc-spinner-sm" }
}
span {
class: "gc-chip gc-chip-{step_slug(tool_step_status(&call.status))}",
"{call.status.as_label()}"
}
}
pre { class: "gc-code", "{args}" }
}
}
}
ChatMessagePayload::ToolResult { name, content } => rsx! {
div {
div {
class: "gc-tool-line",
span { class: "gc-tool-name", "{name}" }
span { class: "gc-chip gc-chip-done", "result" }
}
pre { class: "gc-code", "{content}" }
}
},
}}
}
}
}
}
#[derive(Props, Clone, PartialEq)]
struct ControlBarProps {
controls: Vec<InlineControl>,
on_action: EventHandler<ControlEvent>,
}
/// A row of small inline controls (buttons, selectors, toggles).
#[component]
fn ControlBar(props: ControlBarProps) -> Element {
let on_action = props.on_action;
rsx! {
div {
class: "gc-controls",
for (idx, control) in props.controls.iter().enumerate() {
{match control {
InlineControl::Button { id, label, style, disabled } => {
let id = id.clone();
rsx! {
button {
key: "{idx}",
class: "button is-small {control_style_class(*style)}",
disabled: *disabled,
onclick: move |_| on_action.call(ControlEvent {
id: id.clone(),
value: ControlValue::Clicked,
}),
"{label}"
}
}
}
InlineControl::Select { id, label, options, selected } => {
let id = id.clone();
rsx! {
div {
key: "{idx}",
class: "gc-control-group",
if let Some(label) = label {
span { class: "gc-control-label", "{label}" }
}
div {
class: "select is-small",
select {
onchange: move |evt| on_action.call(ControlEvent {
id: id.clone(),
value: ControlValue::Selected(evt.value()),
}),
for opt in options.iter() {
option {
key: "{opt.value}",
value: "{opt.value}",
selected: selected.as_deref() == Some(opt.value.as_str()),
"{opt.label}"
}
}
}
}
}
}
}
InlineControl::Toggle { id, label, value } => {
let id = id.clone();
rsx! {
label {
key: "{idx}",
class: "checkbox gc-toggle",
input {
r#type: "checkbox",
checked: *value,
onchange: move |evt| on_action.call(ControlEvent {
id: id.clone(),
value: ControlValue::Toggled(evt.checked()),
}),
}
span { "{label}" }
}
}
}
}}
}
}
}
}
fn control_style_class(style: ControlStyle) -> &'static str {
match style {
ControlStyle::Primary => "is-primary",
ControlStyle::Neutral => "",
ControlStyle::Danger => "is-danger is-light",
ControlStyle::Ghost => "is-ghost",
}
}
#[derive(Props, Clone, PartialEq)]
struct DiffViewProps {
diff: FileDiff,
}
/// Renders a unified file diff. When `diff.animate` is set, changed lines stream
/// in top-to-bottom (staggered) and flash green/red as they are "applied".
#[component]
fn DiffView(props: DiffViewProps) -> Element {
let diff = &props.diff;
let animate = diff.animate;
let added = diff.lines.iter().filter(|l| l.kind == DiffKind::Added).count();
let removed = diff.lines.iter().filter(|l| l.kind == DiffKind::Removed).count();
rsx! {
div {
class: "gc-diff",
div {
class: "gc-diff-header",
span { class: "gc-diff-file", "{diff.path}" }
span { class: "gc-diff-stat-add", "+{added}" }
span { class: "gc-diff-stat-del", "-{removed}" }
}
div {
class: "gc-diff-body",
for (idx, line) in diff.lines.iter().enumerate() {
{
let kind = line.kind;
let class = if animate {
format!("gc-diff-line gc-diff-{} gc-diff-animate", diff_kind_slug(kind))
} else {
format!("gc-diff-line gc-diff-{}", diff_kind_slug(kind))
};
// Stagger the reveal so the diff appears to apply top-to-bottom.
let style = if animate {
format!("animation-delay: {}ms", idx * 45)
} else {
String::new()
};
rsx! {
div {
key: "{idx}",
class: "{class}",
style: "{style}",
span { class: "gc-diff-gutter", "{diff_sign(kind)}" }
span { class: "gc-diff-code", "{line.content}" }
}
}
}
}
}
}
}
}
fn diff_kind_slug(kind: DiffKind) -> &'static str {
match kind {
DiffKind::Added => "added",
DiffKind::Removed => "removed",
DiffKind::Context => "context",
}
}
fn diff_sign(kind: DiffKind) -> &'static str {
match kind {
DiffKind::Added => "+",
DiffKind::Removed => "-",
DiffKind::Context => " ",
}
}
fn document_icon(kind: DocumentKind) -> &'static str {
match kind {
DocumentKind::Image => "🖼️",
DocumentKind::Pdf => "📕",
DocumentKind::Text => "📄",
DocumentKind::Other => "📎",
DocumentKind::Custom => "🧩",
}
}
/// Percent-encode text into a `data:` URI so it can be downloaded via `<a download>`.
fn text_data_uri(text: &str) -> String {
let mut out = String::from("data:text/plain;charset=utf-8,");
for &b in text.as_bytes() {
if b.is_ascii_alphanumeric() || matches!(b, b'-' | b'_' | b'.' | b'~') {
out.push(b as char);
} else {
out.push('%');
out.push(char::from_digit((b >> 4) as u32, 16).unwrap().to_ascii_uppercase());
out.push(char::from_digit((b & 0x0f) as u32, 16).unwrap().to_ascii_uppercase());
}
}
out
}
/// Resolve a downloadable source for a document, if any.
fn download_href(doc: &Document) -> Option<String> {
if let Some(url) = &doc.url {
Some(url.clone())
} else if let Some(image) = &doc.image {
Some(image.clone())
} else {
doc.text.as_deref().map(text_data_uri)
}
}
#[derive(Props, Clone, PartialEq)]
struct DocumentGalleryProps {
documents: Vec<Document>,
#[props(default)]
render_document: Option<Callback<Document, Element>>,
#[props(default)]
on_document: EventHandler<DocumentEvent>,
#[props(default)]
selectable: bool,
}
/// A row of document thumbnails. Clicking one opens a full-view lightbox with a
/// download button; with `selectable`, thumbnails get checkboxes and an
/// "add to context" bar.
///
/// The expanded index and selection set are local view state (like a native
/// `<details>` toggle) — not part of the transcript — so they live in signals.
#[component]
fn DocumentGallery(props: DocumentGalleryProps) -> Element {
let mut expanded = use_signal(|| None::<usize>);
let mut selected = use_signal(std::collections::HashSet::<String>::new);
let documents = props.documents.clone();
let render_document = props.render_document;
let on_document = props.on_document;
let selectable = props.selectable;
let selected_count = selected.read().len();
rsx! {
if selectable && selected_count > 0 {
div {
class: "gc-doc-bar",
span { "{selected_count} selected" }
button {
class: "button is-small is-primary",
onclick: {
let documents = documents.clone();
move |_| {
let sel = selected.read();
let chosen: Vec<Document> =
documents.iter().filter(|d| sel.contains(&d.id)).cloned().collect();
drop(sel);
on_document.call(DocumentEvent::AddToContext(chosen));
selected.write().clear();
}
},
"➕ Add to context"
}
button {
class: "button is-small is-light",
onclick: move |_| selected.write().clear(),
"Clear"
}
}
}
div {
class: "gc-docs",
for (idx, doc) in documents.iter().enumerate() {
div {
key: "{doc.id}",
class: if selected.read().contains(&doc.id) { "gc-doc gc-selected" } else { "gc-doc" },
if selectable {
input {
r#type: "checkbox",
class: "gc-doc-select",
checked: selected.read().contains(&doc.id),
onclick: move |e| e.stop_propagation(),
onchange: {
let id = doc.id.clone();
move |e: FormEvent| {
let mut sel = selected.write();
if e.checked() {
sel.insert(id.clone());
} else {
sel.remove(&id);
}
}
},
}
}
button {
class: "gc-doc-thumb",
title: "{doc.name}",
onclick: move |_| expanded.set(Some(idx)),
div {
class: "gc-doc-preview",
if let Some(src) = &doc.image {
img { src: "{src}", alt: "{doc.name}" }
} else {
span { class: "gc-doc-icon", "{document_icon(doc.kind)}" }
}
}
span { class: "gc-doc-name", "{doc.name}" }
}
}
}
}
if let Some(idx) = expanded() {
if let Some(doc) = documents.get(idx) {
div {
class: "gc-lightbox",
onclick: move |_| expanded.set(None),
div {
class: "gc-lightbox-card",
onclick: move |e| e.stop_propagation(),
div {
class: "gc-lightbox-head",
span { class: "gc-lightbox-title", "{doc.name}" }
div {
class: "gc-lightbox-actions",
if let Some(href) = download_href(doc) {
a {
class: "gc-lightbox-download",
href: "{href}",
download: "{doc.name}",
title: "Download",
"⤓ Download"
}
}
button {
class: "gc-lightbox-close",
title: "Close",
onclick: move |_| expanded.set(None),
"×"
}
}
}
div {
class: "gc-lightbox-body",
if doc.kind == DocumentKind::Custom {
if let Some(cb) = render_document {
{cb.call(doc.clone())}
} else {
p { class: "gc-muted", "No handler registered for this document." }
}
} else if doc.kind == DocumentKind::Pdf {
if let Some(src) = &doc.image {
img { src: "{src}", alt: "{doc.name}" }
} else if let Some(url) = &doc.url {
iframe { class: "gc-pdf", src: "{url}", title: "{doc.name}" }
}
if let Some(url) = &doc.url {
a {
class: "gc-doc-link",
href: "{url}",
target: "_blank",
rel: "noopener",
"Open original ↗"
}
}
} else if let Some(src) = &doc.image {
img { src: "{src}", alt: "{doc.name}" }
} else if let Some(text) = &doc.text {
pre { class: "gc-lightbox-text", "{text}" }
} else if let Some(url) = &doc.url {
a {
class: "gc-doc-link",
href: "{url}",
target: "_blank",
rel: "noopener",
"Open ↗"
}
} else {
p { class: "gc-muted", "No preview available." }
}
}
}
}
}
}
}
}
#[derive(Props, Clone, PartialEq)]
struct ReasoningPanelProps {
reasoning: Reasoning,
}
/// VS Code-style collapsible chain of reasoning steps rendered as a timeline.
#[component]
fn ReasoningPanel(props: ReasoningPanelProps) -> Element {
let reasoning = &props.reasoning;
rsx! {
details {
class: "gc-reasoning",
open: !reasoning.collapsed,
summary {
class: "gc-reasoning-summary",
span { class: "gc-chevron" }
span { class: "gc-reasoning-title", "{reasoning.summary}" }
}
ol {
class: "gc-timeline",
for (idx, step) in reasoning.steps.iter().enumerate() {
li {
key: "{idx}",
class: "gc-step gc-step-{step_slug(step.status)}",
span {
class: "gc-step-marker",
if step.status == StepStatus::Active {
span { class: "gc-spinner gc-spinner-sm" }
} else {
"{step_marker(step.status)}"
}
}
div {
class: "gc-step-content",
span { class: "gc-step-title", "{step.title}" }
if let Some(detail) = &step.detail {
span { class: "gc-step-detail", "{detail}" }
}
}
}
}
}
}
}
}
fn context_kind_icon(kind: ContextKind) -> &'static str {
match kind {
ContextKind::File => "📄",
ContextKind::Directory => "📁",
}
}
fn role_label(role: &ChatRole) -> &'static str {
match role {
ChatRole::System => "System",
ChatRole::User => "User",
ChatRole::Assistant => "Assistant",
ChatRole::Tool => "Tool",
}
}
fn role_slug(role: &ChatRole) -> &'static str {
match role {
ChatRole::System => "system",
ChatRole::User => "user",
ChatRole::Assistant => "assistant",
ChatRole::Tool => "tool",
}
}
fn step_slug(status: StepStatus) -> &'static str {
match status {
StepStatus::Pending => "pending",
StepStatus::Active => "active",
StepStatus::Done => "done",
StepStatus::Failed => "failed",
}
}
fn step_marker(status: StepStatus) -> &'static str {
match status {
StepStatus::Pending => "○",
StepStatus::Active => "●",
StepStatus::Done => "✓",
StepStatus::Failed => "✕",
}
}
fn tool_step_status(status: &ToolCallStatus) -> StepStatus {
match status {
ToolCallStatus::Pending => StepStatus::Pending,
ToolCallStatus::Running => StepStatus::Active,
ToolCallStatus::Completed => StepStatus::Done,
ToolCallStatus::Failed => StepStatus::Failed,
}
}
pub fn sample_transcript() -> ChatTranscript {
let mut transcript = ChatTranscript::default();
transcript.push(
ChatRole::System,
ChatMessagePayload::Text("You are an expert Rust assistant.".to_string()),
);
transcript.push(
ChatRole::User,
ChatMessagePayload::Text("Summarize the latest telemetry report.".to_string()),
);
transcript.push(
ChatRole::Assistant,
ChatMessagePayload::Reasoning(Reasoning {
summary: "Worked through 3 steps".to_string(),
collapsed: false,
steps: vec![
ReasoningStep::new("Understood the request", StepStatus::Done)
.with_detail("Summarize the last 24h of telemetry"),
ReasoningStep::new("Decided to fetch the report", StepStatus::Done)
.with_detail("Tool: fetch_report(source = telemetry)"),
ReasoningStep::new("Waiting on tool output", StepStatus::Active),
],
}),
);
transcript.push(
ChatRole::Assistant,
ChatMessagePayload::ToolCall(ToolCall {
name: "fetch_report".to_string(),
arguments: serde_json::json!({"source": "telemetry", "period": "24h"}),
status: ToolCallStatus::Running,
}),
);
transcript.push(
ChatRole::Tool,
ChatMessagePayload::Progress(ProgressState {
label: "Fetching report data".to_string(),
percent: 74.0,
}),
);
transcript.push(
ChatRole::Tool,
ChatMessagePayload::ToolResult {
name: "fetch_report".to_string(),
content: "Error rate dropped by 14% while latency remained stable.".to_string(),
},
);
transcript.push(
ChatRole::Tool,
ChatMessagePayload::Status("Generating summary…".to_string()),
);
transcript.push(
ChatRole::Assistant,
ChatMessagePayload::Markdown(
"### Summary\n- Error rate improved by **14%**\n- Latency remained stable".to_string(),
),
);
transcript.push(
ChatRole::Assistant,
ChatMessagePayload::Diff(FileDiff {
path: "src/alerts.rs".to_string(),
animate: true,
lines: vec![
DiffLine::context("fn alert_threshold() -> f32 {"),
DiffLine::removed(" 0.20 // 20% error rate"),
DiffLine::added(" 0.14 // tightened after telemetry review"),
DiffLine::context("}"),
],
}),
);
transcript.push(
ChatRole::Assistant,
ChatMessagePayload::Documents(vec![
Document::image(
"doc-diagram",
"diagram.svg",
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTIwIj48cmVjdCB3aWR0aD0iMTYwIiBoZWlnaHQ9IjEyMCIgZmlsbD0iIzQ4NWZjNyIvPjxjaXJjbGUgY3g9IjgwIiBjeT0iNTUiIHI9IjI4IiBmaWxsPSIjZmZkNTdlIi8+PHJlY3QgeT0iOTIiIHdpZHRoPSIxNjAiIGhlaWdodD0iMjgiIGZpbGw9IiMzYTRmYjAiLz48dGV4dCB4PSI4MCIgeT0iMTExIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+ZGlhZ3JhbS5zdmc8L3RleHQ+PC9zdmc+",
),
Document::text(
"doc-report",
"report.md",
"# Telemetry report\n\n- Error rate: 0.14 (was 0.20)\n- Latency p95: stable\n- Window: last 24h",
),
Document::pdf("doc-pdf", "report.pdf", "https://example.com/report.pdf").with_image(
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMjAwIj48cmVjdCB3aWR0aD0iMTYwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZGJkYmRiIi8+PHJlY3QgeD0iMTYiIHk9IjIwIiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyIiBmaWxsPSIjZjE0NjY4Ii8+PHJlY3QgeD0iMTYiIHk9IjQ4IiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjgiIGZpbGw9IiNkYmRiZGIiLz48cmVjdCB4PSIxNiIgeT0iNjQiIHdpZHRoPSIxMTAiIGhlaWdodD0iOCIgZmlsbD0iI2RiZGJkYiIvPjxyZWN0IHg9IjE2IiB5PSI4MCIgd2lkdGg9IjEyMCIgaGVpZ2h0PSI4IiBmaWxsPSIjZGJkYmRiIi8+PHRleHQgeD0iODAiIHk9IjE3MCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiNmMTQ2NjgiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlBERjwvdGV4dD48L3N2Zz4=",
),
Document::custom(
"doc-loc",
"location.geo",
serde_json::json!({ "coords": "47.6062° N, 122.3321° W" }),
),
]),
);
transcript.push(
ChatRole::Assistant,
ChatMessagePayload::Controls(vec![
InlineControl::Button {
id: "accept".to_string(),
label: "Keep summary".to_string(),
style: ControlStyle::Primary,
disabled: false,
},
InlineControl::Button {
id: "retry".to_string(),
label: "Regenerate".to_string(),
style: ControlStyle::Neutral,
disabled: false,
},
InlineControl::Select {
id: "detail".to_string(),
label: Some("Detail".to_string()),
options: vec![
SelectOption::new("brief", "Brief"),
SelectOption::new("normal", "Normal"),
SelectOption::new("verbose", "Verbose"),
],
selected: Some("normal".to_string()),
},
InlineControl::Toggle {
id: "cite_sources".to_string(),
label: "Cite sources".to_string(),
value: true,
},
]),
);
transcript
}
#[cfg(test)]
mod tests {
use super::*;
#[cfg(feature = "genai")]
use genai::chat::ChatRole as GenAiRole;
use pretty_assertions::assert_eq;
#[test]
fn chat_controls_default_to_enabled() {
let controls = ChatControls::default();
assert!(controls.show_input);
assert!(controls.show_send_button);
assert!(controls.show_stop_button);
assert!(controls.show_retry_button);
assert!(controls.show_clear_button);
assert!(controls.input_enabled);
assert_eq!(controls.placeholder, "Ask anything, or invoke a tool...");
}
#[cfg(feature = "genai")]
#[test]
fn transcript_to_genai_request_maps_roles_and_tool_events() {
let mut transcript = ChatTranscript::default();
transcript.push(
ChatRole::System,
ChatMessagePayload::Text("Be concise".to_string()),
);
transcript.push(
ChatRole::User,
ChatMessagePayload::Text("Hello".to_string()),
);
transcript.push(
ChatRole::Assistant,
ChatMessagePayload::Text("Hi".to_string()),
);
transcript.push(
ChatRole::Assistant,
ChatMessagePayload::ToolCall(ToolCall {
name: "lookup".to_string(),
arguments: serde_json::json!({"q": "status"}),
status: ToolCallStatus::Completed,
}),
);
transcript.push(
ChatRole::Tool,
ChatMessagePayload::ToolResult {
name: "lookup".to_string(),
content: "All systems healthy".to_string(),
},
);
transcript.push(
ChatRole::Tool,
ChatMessagePayload::Progress(ProgressState {
label: "Unused in request".to_string(),
percent: 50.0,
}),
);
let request = transcript.to_genai_request();
assert_eq!(request.system, Some("Be concise".to_string()));
assert_eq!(request.messages.len(), 4);
assert!(matches!(request.messages[0].role, GenAiRole::User));
assert!(matches!(request.messages[1].role, GenAiRole::Assistant));
assert!(matches!(request.messages[2].role, GenAiRole::Assistant));
assert!(matches!(request.messages[3].role, GenAiRole::Tool));
}
#[test]
fn sample_transcript_includes_tooling_and_progress() {
let transcript = sample_transcript();
assert!(
transcript
.messages
.iter()
.any(|m| matches!(m.payload, ChatMessagePayload::ToolCall(_)))
);
assert!(
transcript
.messages
.iter()
.any(|m| matches!(m.payload, ChatMessagePayload::Progress(_)))
);
assert!(
transcript
.messages
.iter()
.any(|m| matches!(m.payload, ChatMessagePayload::ToolResult { .. }))
);
}
}