Style agent links + fix dock toggle and popup rounded corners

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,
 

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;
+        }
     }
 }

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"

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"
         >

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 

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