Skip to content

feat(copilot): render assistant replies as markdown (themed, safe) #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arigatoexpress merged 1 commit into from
Jun 15, 2026
Merged

feat(copilot): render assistant replies as markdown (themed, safe) #197

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions frontend/src/pages/OpsCopilot.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,15 @@
import React, { useState, useRef, useEffect, useCallback } from 'react';
import { Bot, Send, Loader2, Lock, User, Sparkles } from 'lucide-react';
import adminFetch from '../adminFetch';
import SafeMarkdown from '../components/SafeMarkdown';

// Map the prose typography colors onto the app theme tokens so markdown stays
// readable in both light and dark mode (prose otherwise hardcodes gray text,
// which is unreadable on the dark assistant bubble).
const MD_THEME =
'[--tw-prose-body:var(--cp-text)] [--tw-prose-headings:var(--cp-text)] ' +
'[--tw-prose-bold:var(--cp-text)] [--tw-prose-bullets:var(--cp-muted)] ' +
'[--tw-prose-counters:var(--cp-muted)] [--tw-prose-links:var(--cp-accent)]';

const SUGGESTIONS = [
'How many new leads do we have?',
Expand All @@ -34,13 +43,19 @@ function Bubble({ role, content }) {
)}
</div>
<div
className={`max-w-[80%] rounded-2xl px-4 py-3 text-[15px] leading-relaxed whitespace-pre-wrap ${
className={`max-w-[80%] rounded-2xl px-4 py-3 text-[15px] leading-relaxed ${
isUser
? 'bg-[var(--cp-accent)] text-white rounded-tr-sm'
? 'bg-[var(--cp-accent)] text-white rounded-tr-sm whitespace-pre-wrap'
: 'bg-[var(--cp-panel)] text-[var(--cp-text)] border border-[var(--cp-border)] rounded-tl-sm'
}`}
>
{content}
{isUser ? (
content
) : (
<div className={MD_THEME}>
<SafeMarkdown content={content} />

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Disable property cards or pass compare handlers

When Ops Copilot returns an inventory answer containing a fenced json, property, or json-property block, SafeMarkdown converts it into a PropertyCard; this usage only passes content, but PropertyCard always renders the Compare button and its click handler calls onToggleCompare(property). In this admin inventory/copilot context, staff clicking that visible Compare action will hit TypeError: onToggleCompare is not a function, so either suppress property-card rendering here or pass a safe handler.

Useful? React with 👍 / 👎.

</div>
)}
</div>
</div>
);
Expand Down
Loading