Add images and visuals to chat documentation

docs/content/docs/chat/bottom-tray.mdx

@@ -20,7 +20,7 @@ export function App() {
 }
 ```
 
-{/* add visual: gif showing the BottomTray widget in collapsed and expanded states */}
+![BottomTray widget in collapsed and expanded states](/docs/images/chat/bottom-tray.gif)
 
 ## Controlled open state
 

docs/content/docs/chat/copilot.mdx

@@ -20,7 +20,7 @@ export function App() {
 }
 ```
 
-{/* add visual: image showing the Copilot sidebar layout next to the main app content */}
+![Copilot sidebar layout example](/docs/images/chat/copilot.png)
 
 ## Common configuration
 

docs/content/docs/chat/fullscreen.mdx

@@ -19,7 +19,7 @@ export function App() {
 }
 ```
 
-{/* add visual: image showing the FullScreen layout with sidebar, thread list, and main conversation area */}
+![FullScreen layout example](/docs/images/chat/fullscreen.png)
 
 ## Common configuration
 

docs/content/docs/chat/genui.mdx

@@ -64,7 +64,16 @@ In this setup:
 
 This is the minimal complete pattern for GenUI in a chat interface. For a non-chat renderer or custom layout, use `openuiLibrary` and `openuiPromptOptions` from the same import path.
 
-{/* add visual: image showing the difference between a plain text assistant response and a GenUI-rendered component response */}
+<div className="grid md:grid-cols-2 gap-6 my-6">
+  <div>
+    <p className="text-sm text-center font-medium mb-2">Plain text response</p>
+    ![Plain text response](/docs/images/chat/genui-text-response.png)
+  </div>
+  <div>
+    <p className="text-sm text-center font-medium mb-2">GenUI response</p>
+    ![GenUI rendered response](/docs/images/chat/genui-response.png)
+  </div>
+</div>
 
 ## Use your own library
 

docs/content/docs/chat/installation.mdx

@@ -76,7 +76,7 @@ export default function Page() {
 
 At this stage, the page should render the layout shell. It will not send working chat requests until you add a backend.
 
-{/* add visual: image showing the expected baseline render after styles are imported and a built-in layout is mounted */}
+![Expected baseline render after styles are imported](/docs/images/chat/fullscreen.png)
 
 ## Related guides
 

docs/content/docs/chat/theming.mdx

@@ -54,7 +54,16 @@ import { FullScreen } from "@openuidev/react-ui";
 
 `disableThemeProvider` only skips the wrapper. It does not remove any chat functionality.
 
-{/* add visual: image showing the default chat theme beside a custom dark theme override */}
+<div className="grid md:grid-cols-2 gap-6 my-6">
+  <div>
+    <p className="text-sm text-center font-medium mb-2">Light (default)</p>
+    ![FullScreen light theme](/docs/images/chat/fullscreen.png)
+  </div>
+  <div>
+    <p className="text-sm text-center font-medium mb-2">Dark</p>
+    ![FullScreen dark theme](/docs/images/chat/fullscreen-dark.png)
+  </div>
+</div>
 
 ## Related guides
 

docs/content/docs/chat/welcome.mdx

@@ -73,7 +73,16 @@ Use `variant="short"` for compact pill buttons or `variant="long"` for more desc
 />
 ```
 
-{/* add visual: image showing the empty state with a welcome message and both short and long conversation starter variants */}
+<div className="grid md:grid-cols-2 gap-6 my-6">
+  <div>
+    <p className="text-sm text-center font-medium mb-2">`"short"` variant</p>
+    ![Short conversation starters](/docs/images/chat/starters-short.png)
+  </div>
+  <div>
+    <p className="text-sm text-center font-medium mb-2">`"long"` variant</p>
+    ![Long conversation starters](/docs/images/chat/starters-long.png)
+  </div>
+</div>
 
 ## Related guides