feat: frame visualization tool results with Shiny Chat

js/build.mjs

@@ -24,14 +24,6 @@ const jsTargets = [
     source: "src/viz.ts",
     output: "../pkg-r/inst/htmldep/viz.js",
   },
-  {
-    source: "src/schema-display.js",
-    output: "../pkg-py/src/querychat/static/js/schema-display.js",
-  },
-  {
-    source: "src/schema-display.js",
-    output: "../pkg-r/inst/htmldep/schema-display.js",
-  },
 ];
 
 const cssTargets = [

js/src/viz.css

@@ -35,8 +35,8 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 2px 8px;
-  height: 28px;
+  padding: 1px 0.25rem;
+  height: 24px;
   border: none;
   border-radius: var(--bs-border-radius, 4px);
   background: transparent;
@@ -53,24 +53,36 @@
 }
 
 .querychat-query-chevron {
-  font-size: 0.625rem;
-  transition: transform 150ms;
-  display: inline-block;
+  display: grid;
+  place-items: center;
+  width: 0.9em;
+  height: 0.9em;
+  flex: none;
+  opacity: var(--_activity-opacity-muted, 0.65);
+  transform: rotate(-90deg);
+  transition: transform 300ms ease-in-out;
+}
+
+.querychat-query-chevron svg {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
 .querychat-query-chevron--expanded {
-  transform: rotate(90deg);
+  transform: rotate(0);
 }
 
 .querychat-icon {
-  width: 14px;
-  height: 14px;
+  width: 1em;
+  height: 1em;
 }
 
 .querychat-dropdown-chevron {
-  width: 12px;
-  height: 12px;
+  width: 0.9em;
+  height: 0.9em;
   margin-left: 2px;
+  opacity: var(--_activity-opacity-muted, 0.65);
 }
 
 .querychat-save-dropdown {
@@ -116,7 +128,8 @@
   display: none;
   position: relative;
   border-top: 1px solid var(--bs-border-color, #dee2e6);
-  margin: 8px -16px -8px;
+  margin: 0.25rem calc(-1 * var(--_querychat-footer-pad-x))
+    calc(-1 * var(--_querychat-footer-pad-y));
 }
 
 .querychat-query-section--visible {
@@ -128,10 +141,30 @@
 .shiny-tool-card:has(.querychat-viz-container) {
   max-height: 700px;
   overflow: hidden;
+  opacity: 1;
 }
 
-.shiny-tool-card:has(.querychat-viz-container) > .card-footer {
+/* shinychat dims tool activity (opacity: .7); the framed viz group header
+   should stay fully opaque like the card body it introduces */
+.shiny-chat-tool-group--framed:has(.querychat-viz-container)
+  > .shiny-chat-tool-group__row {
+  opacity: 1;
+}
+
+.shiny-tool-card:has(.querychat-viz-container) > .card-footer,
+/* Match (and beat, via load order) the specificity of shinychat's framed
+   group footer rule, which would otherwise force card-cap padding */
+.shiny-chat-tool-group--framed
+  > .shiny-chat-tool-call-row__detail
+  > .shiny-tool-card:has(.querychat-viz-container)
+  > .card-footer {
+  --_querychat-footer-pad-y: 0.125rem;
+  --_querychat-footer-pad-x: calc(var(--_row-pad, 0.4rem) - 0.25rem);
+
   flex: 0 0 auto;
+  padding: var(--_querychat-footer-pad-y) var(--_querychat-footer-pad-x);
+  border-top: var(--bs-border-width, 1px) solid
+    var(--bs-border-color, #dee2e6);
 }
 
 .shiny-tool-card[fullscreen]:has(.querychat-viz-container) {

pkg-py/examples/10-viz-app.py

@@ -16,4 +16,4 @@
 
 qc.ui()
 
-ui.page_opts(fillable=True, title="QueryChat Visualization Demo")
+ui.page_opts(fillable=True, title="QueryChat Visualization Demo")

pkg-py/src/querychat/_querychat_core.py

@@ -101,8 +101,10 @@ def format_chunk(chunk: Union[str, Content]) -> str:
 def format_tool_result(result: ContentToolResult) -> str:
     """Extract displayable text from a tool result."""
     display_info = result.extra.get("display") if result.extra else None
-    if display_info and hasattr(display_info, "markdown"):
-        return display_info.markdown
+    if display_info:
+        markdown = getattr(display_info, "markdown", None)
+        if markdown is not None:
+            return markdown
     if result.value is not None:
         return str(result.value)
     return ""

pkg-py/src/querychat/_viz_tools.py

@@ -141,6 +141,7 @@ def __init__(
                 full_screen=True,
                 icon=bs_icon("graph-up"),
                 footer=footer,
+                open_style="framed",
             ),
         }
 
@@ -319,7 +320,7 @@ def build_viz_footer(
                     "data-querychat-action": "show-query",
                     "data-target": query_section_id,
                 },
-                tags.span({"class": "querychat-query-chevron"}, "\u25b6"),
+                bs_icon("chevron-down", cls="querychat-query-chevron"),
                 tags.span({"class": "querychat-query-label"}, "Show Query"),
             ),
         ),