feat(DATAGO-128261): EXPERIMENTAL - Chat Sharing #3 add shared session visualization, provider, and routing by amir-ghasemi · Pull Request #1203 · SolaceLabs/solace-agent-mesh

amir-ghasemi · 2026-03-18T10:35:37Z

This pull request introduces a "read-only" mode for artifact-related UI components in the frontend, allowing views where file actions like delete and refresh are hidden or disabled. It also adds support for custom download handlers and improves the flexibility of artifact and file message rendering, especially for shared or embedded contexts where the main chat context may not be available.

Key changes include:

Read-only mode support for artifact components:

Added a readOnly prop to ArtifactPanel, ArtifactCard, ArtifactMessage, and FileMessage components to hide or disable editing actions such as delete, refresh, and preview in read-only contexts. This ensures the UI can be safely embedded or shared without exposing destructive actions. [1] [2] [3] [4]

Custom download handler support:

Introduced an onDownloadOverride prop to ArtifactPanel, ArtifactCard, and ArtifactMessage, allowing parent components to supply a custom download function. This is useful for specialized download workflows or integrations. [1] [2] [3]

Context-aware and robust file message rendering:

Updated FileMessage to gracefully handle cases where the chat context is unavailable (e.g., in shared sessions), defaulting to read-only mode and disabling context-dependent actions. [1] [2]

UI and style improvements:

Updated various class names to use semantic color variables and improved empty state messaging for better visual consistency and accessibility. [1] [2] [3] [4]

General code improvements and bug fixes:

Improved artifact download logic to prioritize fetched content and fixed dependency arrays for React hooks to ensure correct behavior. [1] [2]
Ensured delete dialogs only render when necessary, preventing unnecessary DOM nodes in shared contexts.

These changes make the artifact and file UI components more flexible, robust, and suitable for both editable and read-only contexts.

Shared session viewing infrastructure: - SharedChatProvider: minimal ChatContext provider for read-only shared sessions with all write operations as no-ops - SharedFlowChartPanel: standalone flow chart visualization without ChatContext/TaskContext dependencies - SharedVisualizerStepCard: read-only step card for workflow display with agent info, timing, and status indicators - SharedWorkflowPanel: orchestrates workflow visualization from shared task events data - Router: add /share/:shareId (standalone) and /shared-chat/:shareId (in-app) routes for shared session viewing - ChatContext: add isCollaborativeSession and hasSharedEditors flags - ChatProvider/MockChatProvider: provide new context fields - ArtifactPanel/ArtifactCard/ArtifactMessage/FileMessage: add readOnly and onDownloadOverride props for shared views Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…v4 var syntax - Replace React.FC pattern with direct prop destructuring - Use named React imports instead of default import - Convert [var(--foo)] bracket syntax to Tailwind v4 (--foo) syntax - Replace template literal className with cn() in ArtifactCard Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…mpat - SharedChatProvider: import from @/lib/api/share (was @/lib/api/shareApi) - ChatProvider: dynamic imports from @/lib/api/share, use camelCase fields (shareId, accessLevel) matching service layer toCamelCase() - SharedWorkflowPanel: access SharedTaskEvent with camelCase fields (eventType, solaceTopic, sourceEntity, etc.) matching share.ts types Note: tsc fails due to forward dependencies on SharedChatViewPage and SharedSessionPage (defined in PR #4). The full stack builds correctly.

lgh-solace

There are a number of old theme references if you could clean those up? And, if possible, can you share a link to video of the functionality?

lgh-solace · 2026-03-24T17:56:04Z

client/webui/frontend/src/lib/components/chat/artifact/ArtifactCard.tsx

    return (
-        <div className={`${isPreview ? "" : "cursor-pointer transition-all duration-150 hover:bg-(--background-w20)"}`} onClick={handleClick}>
-            <ArtifactMessage status="completed" name={artifact.filename} fileAttachment={fileAttachment} context="list" />
+        <div className={cn(!isPreview && "cursor-pointer transition-all duration-150 hover:bg-(--accent-background)")} onClick={handleClick}>


Use bg-(--background-w20) or another theme reference is not appropriate.

lgh-solace · 2026-03-24T17:57:26Z

client/webui/frontend/src/lib/components/chat/artifact/ArtifactPanel.tsx

                                    {previewArtifact.description && (
                                        <div>
-                                            <span className="text-(--secondary-text-wMain)">Description:</span>
+                                            <span className="text-secondary-foreground">Description:</span>


Revert these theme changes?

lgh-solace · 2026-03-24T17:59:09Z

client/webui/frontend/src/lib/components/chat/file/ArtifactMessage.tsx

-            if (!fileToDownload.uri && fileAttachment?.content) {
-                fileToDownload.content = fileAttachment.content;
+            // If artifact doesn't have URI, try to use content from various sources
+            if (!fileToDownload.uri) {


I think we might have a helper for this, could you check around?

lgh-solace · 2026-03-24T18:01:54Z

client/webui/frontend/src/lib/components/chat/file/ArtifactMessage.tsx

    const artifact = useMemo(() => artifacts.find(art => art.filename === props.name), [artifacts, props.name]);
    const context = props.context || "chat";
    const isStreaming = props.isStreaming;
+    const readOnly = props.readOnly || false;


Would the later logic be simpler if it was something like... ?

const readOnly = props.readOnly || artifact?.source === "project" || false;

lgh-solace · 2026-03-24T18:02:12Z

client/webui/frontend/src/lib/components/chat/file/ArtifactMessage.tsx

    if (isLoading) {
        expandedContent = (
-            <div className="flex h-25 items-center justify-center bg-(--secondary-w10)">
+            <div className="bg-muted flex h-25 items-center justify-center">


Revert chang to bg.

lgh-solace · 2026-03-24T18:12:02Z

client/webui/frontend/src/lib/components/share/SharedVisualizerStepCard.tsx

+    const getStepIcon = () => {
+        switch (step.type) {
+            case "USER_REQUEST":
+                return <User className="mr-2 text-blue-500 dark:text-blue-400" size={18} />;


dark switches need to be removed. Look at solace-agent-mesh/client/webui/frontend/src/lib/components/activities/VisualizerStepCard.tsx to see how steps were mapped to theme colours there, we should be consistent.

Should we have a common function these look almost identical?

lgh-solace · 2026-03-24T18:13:18Z

client/webui/frontend/src/lib/components/share/SharedVisualizerStepCard.tsx

+        // If not expanded, just show a minimal summary
+        if (!expanded) {
+            return (
+                <div className="mt-1.5 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">


Update all theme refs in this file?

lgh-solace · 2026-03-24T18:19:10Z

client/webui/frontend/src/lib/providers/ChatProvider.tsx

+    // Fetch current user info on mount (works in both dev and production mode)
+    useEffect(() => {
+        api.webui
+            .get("/api/v1/auth/me")


How does this endpoint differ from /api/v1/users/me which also returns user information?

lgh-solace · 2026-03-24T18:20:34Z

client/webui/frontend/src/lib/providers/ChatProvider.tsx

+                    // Store owner info from session response (populated by backend for editors)
+                    setSessionOwnerName(session?.ownerDisplayName || sessionOwnerId);
+                    setSessionOwnerEmail(session?.ownerEmail || sessionOwnerId);
+                    console.log(`${log_prefix} Collaborative session detected (owner: ${sessionOwnerId}, ownerName: ${session?.ownerDisplayName}, current user: ${currentUserId})`);


Review usage of console.log? Sometimes they slip in during development and should be removed when merging to main.

lgh-solace · 2026-03-24T18:21:50Z

client/webui/frontend/src/lib/providers/ChatProvider.tsx

    const [messages, setMessages] = useState<MessageFE[]>([]);
    const [isResponding, setIsResponding] = useState<boolean>(false);
+    const [isCollaborativeSession, setIsCollaborativeSession] = useState<boolean>(false);
+    const [hasSharedEditors, setHasSharedEditors] = useState<boolean>(false);


I wonder if some support could be extracted to a hook to try to keep this provider more readable?

amir-ghasemi · 2026-03-26T18:57:40Z

Merged the unified PR.

amir-ghasemi force-pushed the amir/chat-sharing-3-frontend-pages branch 2 times, most recently from 0c6fc66 to 92364d3 Compare March 19, 2026 17:17

amir-ghasemi and others added 2 commits March 19, 2026 14:59

amir-ghasemi force-pushed the amir/chat-sharing-3-frontend-pages branch from 92364d3 to 7faa35e Compare March 19, 2026 19:00

lgh-solace reviewed Mar 24, 2026

View reviewed changes

JKaram approved these changes Mar 25, 2026

View reviewed changes

fix: review feedback

c348aa0

amir-ghasemi closed this Mar 26, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(DATAGO-128261): EXPERIMENTAL - Chat Sharing #3 add shared session visualization, provider, and routing#1203

feat(DATAGO-128261): EXPERIMENTAL - Chat Sharing #3 add shared session visualization, provider, and routing#1203
amir-ghasemi wants to merge 4 commits intoamir/chat-sharing-2-frontend-sharefrom
amir/chat-sharing-3-frontend-pages

amir-ghasemi commented Mar 18, 2026

Uh oh!

lgh-solace left a comment

Uh oh!

lgh-solace Mar 24, 2026

Uh oh!

lgh-solace Mar 24, 2026

Uh oh!

lgh-solace Mar 24, 2026

Uh oh!

lgh-solace Mar 24, 2026

Uh oh!

lgh-solace Mar 24, 2026

Uh oh!

lgh-solace Mar 24, 2026

Uh oh!

lgh-solace Mar 24, 2026

Uh oh!

lgh-solace Mar 24, 2026

Uh oh!

lgh-solace Mar 24, 2026

Uh oh!

lgh-solace Mar 24, 2026

Uh oh!

amir-ghasemi commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

amir-ghasemi commented Mar 18, 2026

Uh oh!

lgh-solace left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amir-ghasemi commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants