From a172cde44ceda48a27fa5946768aff602b53fa8b Mon Sep 17 00:00:00 2001
From: collegeman <aaron@collegeman.net>
Date: Fri, 15 May 2026 12:05:44 -0400
Subject: [PATCH] Style agent links + fix dock toggle and popup chrome via CSS
 capability queries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three related chat-widget issues, fixed without a JS-tracked isMobile
flag (which never populated — the iframe route read $request->isMobile
for a query named `mobile`, so the store flag was permanently false,
and Tailwind sm: breakpoints query the 375px iframe, not the host
device).

Dock toggle + popup chrome: gate visibility/rounding on
@media (hover: hover) and (pointer: fine) instead of viewport width.
Pointer/hover media queries inside an iframe report the host device's
input capabilities, so the dock-as-sidebar control shows on
mouse-driven devices and hides on touch, and the popup gets its
rounded corners/border back on desktop. New .sbm-fine-pointer-only /
.sbm-popup-chrome / .sbm-header-chrome.sbm-undocked classes carry this;
the dead isMobile config path is removed from routes/web.php.

Agent-emitted links: add configurable theme settings (linkColor,
linkUnderline) wired through CSS custom properties on the bot-message
body, so links render with a visible color + underline instead of
default black. Host apps override the color to match brand.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 config/config.php                       | 10 ++++++++++
 resources/css/common.css                | 23 +++++++++++++++++++++++
 resources/js/components/Chat.vue        |  7 +------
 resources/js/components/ChatHeader.vue  | 10 ++++------
 resources/js/components/ChatMessage.vue |  6 +++++-
 routes/web.php                          |  9 ++++-----
 6 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/config/config.php b/config/config.php
index ca6ee9d..921ecc1 100644
--- a/config/config.php
+++ b/config/config.php
@@ -74,6 +74,16 @@
     // The label color for the beacon.
     'beaconLabelColor' => '#ffffff',
 
+    // Color applied to links the agent emits in chat. Defaults to a
+    // traditional blue (Tailwind blue-600) that reads well on the
+    // white message background; host apps typically override this in
+    // their published config to match brand color.
+    'linkColor' => '#2563eb',
+
+    // Whether agent-emitted links render with an underline. Combined
+    // with `linkColor` to give a familiar "this is a link" cue.
+    'linkUnderline' => true,
+
     // Height to use for embedded videos.
     'videoHeight' => 160,
 
diff --git a/resources/css/common.css b/resources/css/common.css
index ac86c2f..7eb27dc 100644
--- a/resources/css/common.css
+++ b/resources/css/common.css
@@ -12,6 +12,22 @@
     height: 100%;
 }
 
+.sbm-fine-pointer-only {
+    display: none;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .sbm-fine-pointer-only {
+        display: block;
+    }
+    .sbm-popup-chrome {
+        @apply rounded-lg border overflow-hidden;
+    }
+    .sbm-header-chrome.sbm-undocked {
+        @apply rounded-t-lg;
+    }
+}
+
 @layer components {
     .message-text {
         @apply min-w-0;
@@ -80,5 +96,12 @@
         tbody tr:nth-child(even) td {
             @apply bg-gray-50;
         }
+        a {
+            color: var(--sbm-link-color, #2563eb);
+            text-decoration: var(--sbm-link-decoration, underline);
+        }
+        a:hover {
+            opacity: 0.85;
+        }
     }
 }
\ No newline at end of file
diff --git a/resources/js/components/Chat.vue b/resources/js/components/Chat.vue
index 521c9b8..5a70a49 100644
--- a/resources/js/components/Chat.vue
+++ b/resources/js/components/Chat.vue
@@ -1,11 +1,6 @@
 <template>
     <div
-        :class="[
-            'flex flex-col bg-gray-100 border-gray-200 p-0 h-screen',
-            {
-                'rounded-lg border overflow-hidden': !$store.state.config.isMobile
-            }
-        ]"
+        class="flex flex-col bg-gray-100 border-gray-200 p-0 h-dvh sbm-popup-chrome"
     >
         <ChatHeader 
             @back="onBack"
diff --git a/resources/js/components/ChatHeader.vue b/resources/js/components/ChatHeader.vue
index 9c2cd82..9e53d97 100644
--- a/resources/js/components/ChatHeader.vue
+++ b/resources/js/components/ChatHeader.vue
@@ -1,10 +1,8 @@
 <template>
     <div
         :class="[
-            'shrink-0 p-2 relative',
-            {
-                'rounded-t-lg': !$store.state.config.isMobile && !$store.state.docked
-            }
+            'shrink-0 p-2 relative sbm-header-chrome',
+            { 'sbm-undocked': !$store.state.docked }
         ]"
         :style="{
             backgroundColor: $store.state.config.mainColor
@@ -27,7 +25,7 @@
         </button>
         <button
             v-if="$store.state.docked"
-            class="absolute right-8 top-1/2 -translate-y-1/2 outline-none text-white text-sm"
+            class="sbm-fine-pointer-only absolute right-8 top-1/2 -translate-y-1/2 outline-none text-white text-sm"
             @click.prevent="emitMessage('chat.undock')"
             title="Switch to windowed mode"
         >
@@ -39,7 +37,7 @@
         </button>
         <button
             v-if="!$store.state.docked"
-            class="absolute right-8 top-1/2 -translate-y-1/2 outline-none text-white text-sm"
+            class="sbm-fine-pointer-only absolute right-8 top-1/2 -translate-y-1/2 outline-none text-white text-sm"
             @click.prevent="emitMessage('chat.dock')"
             title="Dock as sidebar"
         >
diff --git a/resources/js/components/ChatMessage.vue b/resources/js/components/ChatMessage.vue
index 505cf15..ca0c227 100644
--- a/resources/js/components/ChatMessage.vue
+++ b/resources/js/components/ChatMessage.vue
@@ -40,7 +40,7 @@
         >
             <div class="my-1 w-3 h-3 rounded-full bg-black animate-pulse"></div>
         </div>
-        <div 
+        <div
             v-else-if="props.message.from === 'chatbot'"
             :class="[
                 'message-text py-2 px-4 rounded-lg text-sm',
@@ -49,6 +49,10 @@
                     'bg-white': props.message.from !== 'visitor',
                 }
             ]"
+            :style="{
+                '--sbm-link-color': store.state.config.linkColor,
+                '--sbm-link-decoration': store.state.config.linkUnderline ? 'underline' : 'none',
+            }"
             v-html="props.message.text"
         ></div>
         <div 
diff --git a/routes/web.php b/routes/web.php
index 5104b72..555e223 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,15 +1,14 @@
 <?php
 
-use Illuminate\Http\Request;
 use OrchestrateXR\SuperBotMan\Facades\SuperBotMan;
 
 Route::middleware('web')->group(function () {
-    Route::get(SuperBotMan::config('frameEndpoint'), function (Request $request) {
-        return SuperBotMan::view('chat', ['config' => ['isMobile' => $request->isMobile]]);
+    Route::get(SuperBotMan::config('frameEndpoint'), function () {
+        return SuperBotMan::view('chat', ['config' => []]);
     })->name('super-botman.chat');
 
-    Route::get(SuperBotMan::config('beaconEndpoint'), function (Request $request) {
-        return SuperBotMan::view('beacon', ['config' => ['isMobile' => $request->isMobile]]);
+    Route::get(SuperBotMan::config('beaconEndpoint'), function () {
+        return SuperBotMan::view('beacon', ['config' => []]);
     })->name('super-botman.beacon');
 
     // Agent endpoint routes and conversation-history routes are