From f19ca55d674d300d35c82de35624a9092c1f68ca Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Mon, 10 Nov 2025 08:56:12 +0100
Subject: [PATCH 01/11] site: use gordon for ask ai

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 assets/css/style.css                          |   1 +
 .../images/ask-ai-logo.svg                    |   0
 assets/js/src/alpine.js                       |  80 ++-
 hugo.yaml                                     |   3 +
 layouts/_default/baseof.html                  |   1 +
 layouts/index.html                            |   1 +
 layouts/partials/gordon-chat.html             | 558 ++++++++++++++++++
 layouts/partials/head.html                    |  53 --
 layouts/partials/header.html                  |   3 +-
 layouts/partials/search-bar.html              |   7 +-
 package-lock.json                             |  23 +
 package.json                                  |   2 +
 12 files changed, 675 insertions(+), 57 deletions(-)
 rename static/assets/images/logo-icon-white.svg => assets/images/ask-ai-logo.svg (100%)
 create mode 100644 layouts/partials/gordon-chat.html

diff --git a/assets/css/style.css b/assets/css/style.css
index d8469b419a5f..8315621f425d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -41,5 +41,6 @@
 @import "syntax-dark.css";
 @import "syntax-light.css";
 @import "components.css";
+@import "highlight-github-dark.css";
 
 @variant dark (&:where(.dark, .dark *));
diff --git a/static/assets/images/logo-icon-white.svg b/assets/images/ask-ai-logo.svg
similarity index 100%
rename from static/assets/images/logo-icon-white.svg
rename to assets/images/ask-ai-logo.svg
diff --git a/assets/js/src/alpine.js b/assets/js/src/alpine.js
index cdcdfeb93055..d023fb11d5b2 100644
--- a/assets/js/src/alpine.js
+++ b/assets/js/src/alpine.js
@@ -2,12 +2,90 @@ import Alpine from 'alpinejs'
 import collapse from '@alpinejs/collapse'
 import persist from '@alpinejs/persist'
 import focus from '@alpinejs/focus'
- 
+import { marked } from 'marked'
+import hljs from 'highlight.js/lib/core'
+// Import languages relevant to Docker docs
+import bash from 'highlight.js/lib/languages/bash'
+import dockerfile from 'highlight.js/lib/languages/dockerfile'
+import yaml from 'highlight.js/lib/languages/yaml'
+import json from 'highlight.js/lib/languages/json'
+import javascript from 'highlight.js/lib/languages/javascript'
+import python from 'highlight.js/lib/languages/python'
+import go from 'highlight.js/lib/languages/go'
+
 window.Alpine = Alpine
 
 Alpine.plugin(collapse)
 Alpine.plugin(persist)
 Alpine.plugin(focus)
+
+// Register highlight.js languages
+hljs.registerLanguage('bash', bash)
+hljs.registerLanguage('sh', bash)
+hljs.registerLanguage('shell', bash)
+hljs.registerLanguage('console', bash)
+hljs.registerLanguage('dockerfile', dockerfile)
+hljs.registerLanguage('yaml', yaml)
+hljs.registerLanguage('yml', yaml)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('js', javascript)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('py', python)
+hljs.registerLanguage('go', go)
+hljs.registerLanguage('golang', go)
+
+// Add $markdown magic for rendering markdown with syntax highlighting
+Alpine.magic('markdown', () => {
+  return (content) => {
+    if (!content) return ''
+    const html = marked(content)
+
+    // Parse and highlight code blocks
+    const div = document.createElement('div')
+    div.innerHTML = html
+
+    // Handle code blocks (pre > code)
+    div.querySelectorAll('pre').forEach((pre) => {
+      // Add not-prose to prevent Tailwind Typography styling
+      pre.classList.add('not-prose')
+      const code = pre.querySelector('code')
+      if (code) {
+        // Preserve the original text with newlines
+        const codeText = code.textContent
+
+        // Clear and set as plain text first to preserve structure
+        code.textContent = codeText
+
+        // Now apply highlight.js which will work with the text nodes
+        hljs.highlightElement(code)
+      }
+    })
+
+    // Handle inline code elements (not in pre blocks)
+    div.querySelectorAll('code:not(pre code)').forEach((code) => {
+      code.classList.add('not-prose')
+    })
+
+    return div.innerHTML
+  }
+})
+
+// Stores
 Alpine.store("showSidebar", false)
+Alpine.store('gordon', {
+  isOpen: Alpine.$persist(false).using(sessionStorage).as('gordon-isOpen'),
+  query: '',
+  toggle() {
+    this.isOpen = !this.isOpen
+  },
+  open(query) {
+    this.isOpen = true
+    if (query) this.query = query
+  },
+  close() {
+    this.isOpen = false
+  }
+})
 
 Alpine.start()
diff --git a/hugo.yaml b/hugo.yaml
index bc4bde92e1d8..e1143ea0518f 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -271,6 +271,9 @@ module:
     # Mount the icon files to assets so we can access them with resources.Get
     - source: node_modules/@material-symbols/svg-400/rounded
       target: assets/icons
+    # Mount highlight.js theme for Gordon chat syntax highlighting
+    - source: node_modules/highlight.js/styles/github-dark.css
+      target: assets/css/highlight-github-dark.css
 
   imports:
 
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 7b06c790c819..946147a21e9c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -8,6 +8,7 @@
     class="dark:bg-navbar-bg-dark bg-navbar-bg flex flex-col items-center text-base text-black dark:text-white"
   >
     {{ partial "header.html" . }}
+    {{ partial "gordon-chat.html" . }}
     <main class="relative flex w-full max-w-[1920px]">
       <!-- Sidebar -->
       <div
diff --git a/layouts/index.html b/layouts/index.html
index 1ce16d3f4cb6..81996c67ac94 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -15,6 +15,7 @@
 		</svg>
 	</div>
 	{{ partial "header.html" . }}
+	{{ partial "gordon-chat.html" . }}
 	<main class="flex w-full flex-col items-stretch gap-20 self-center pt-20">
 		<div class="grid w-full grid-cols-1 items-center gap-20 px-4 lg:grid-cols-2 xl:w-[1200px] self-center">
 			<div class="bg-pattern-blue relative overflow-hidden rounded-sm drop-shadow">
diff --git a/layouts/partials/gordon-chat.html b/layouts/partials/gordon-chat.html
new file mode 100644
index 000000000000..e62b895f0588
--- /dev/null
+++ b/layouts/partials/gordon-chat.html
@@ -0,0 +1,558 @@
+<!-- Gordon AI Chat Panel -->
+<div x-data="{
+    isLoading: false,
+    error: null,
+    messages: $persist([]).using(sessionStorage).as('gordon-messages'),
+    currentQuestion: '',
+    threadId: $persist(null).using(sessionStorage).as('gordon-threadId'),
+    includePageContext: $persist(true).using(sessionStorage).as('gordon-includePageContext'),
+
+    init() {
+      // Clean up any streaming messages that might be persisted
+      this.messages = this.messages.filter(m => !m.isStreaming)
+
+      // Watch for store changes to focus input
+      this.$watch('$store.gordon.isOpen', (isOpen) => {
+        if (isOpen) {
+          this.$nextTick(() => {
+            this.$refs.input?.focus()
+          })
+        }
+      })
+
+      // Watch for query from store and populate input
+      this.$watch('$store.gordon.query', (query) => {
+        if (query) {
+          this.currentQuestion = query
+          this.$nextTick(() => {
+            this.$refs.input?.focus()
+            this.$refs.input?.select()
+          })
+          // Clear the store query after using it
+          this.$store.gordon.query = ''
+        }
+      })
+    },
+
+    async askQuestion() {
+      const question = this.currentQuestion.trim()
+      if (!question || this.isLoading) {
+        return
+      }
+
+      // Add user message to UI
+      this.messages.push({
+        role: 'user',
+        content: question
+      })
+
+      this.currentQuestion = ''
+      // Reset textarea height
+      this.$nextTick(() => {
+        if (this.$refs.input) {
+          this.$refs.input.style.height = 'auto'
+        }
+      })
+      this.isLoading = true
+      this.error = null
+
+      // Add placeholder for assistant response
+      const responseIndex = this.messages.length
+      this.messages.push({
+        role: 'assistant',
+        content: '',
+        isStreaming: true,
+        questionAnswerId: null,
+        feedback: null,
+        copied: false
+      })
+
+      this.$nextTick(() => {
+        this.$refs.messagesContainer?.scrollTo({
+          top: this.$refs.messagesContainer.scrollHeight,
+          behavior: 'smooth'
+        })
+      })
+
+      try {
+        await this.streamGordonResponse(responseIndex)
+      } catch (err) {
+        // Only set error if messages weren't cleared
+        if (this.messages.length > 0) {
+          this.error = 'Failed to get response. Please try again.'
+        }
+        console.error('Gordon API error:', err)
+        // Only try to remove message if it still exists
+        if (this.messages[responseIndex]) {
+          this.messages.splice(responseIndex, 1)
+        }
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    getGordonEndpoint() {
+      const endpoints = {
+        'docs.docker.com': 'https://ai-backend-service.docker.com/public/ask',
+        'localhost': 'http://localhost:8000/public/ask'
+      }
+      return endpoints[window.location.hostname] || 'https://ai-backend-service-stage.docker.com/public/ask'
+    },
+
+    getSessionId() {
+      let sessionId = sessionStorage.getItem('gordon-session-id')
+      if (!sessionId) {
+        sessionId = `docs-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+        sessionStorage.setItem('gordon-session-id', sessionId)
+      }
+      return sessionId
+    },
+
+    getFeedbackEndpoint() {
+      const endpoints = {
+        'docs.docker.com': 'https://ai-backend-service.docker.com/feedback',
+        'localhost': 'http://localhost:8000/feedback'
+      }
+      return endpoints[window.location.hostname] || 'https://ai-backend-service-stage.docker.com/feedback'
+    },
+
+    async streamGordonResponse(responseIndex) {
+
+      // Build API request from messages, excluding the streaming placeholder
+      // The placeholder is at responseIndex, so we take everything before it
+      const conversationMessages = this.messages.slice(0, responseIndex).map((msg, i) => {
+        const message = {
+          role: msg.role,
+          content: msg.content
+        }
+
+        // Add copilot_references to the last message (most recent user question)
+        if (i === responseIndex - 1) {
+          message.copilot_references = [
+            {
+              data: {
+                origin: 'docs-website',
+                email: 'docs@docker.com',
+                uuid: this.getSessionId(),
+                action: 'AskGordon',
+                ...(this.includePageContext && {
+                  page_url: window.location.href,
+                  {{ with .Title }}page_title: {{ . | jsonify }}{{ end }}
+                })
+              }
+            }
+          ]
+        }
+
+        return message
+      })
+
+      const isNewConversation = !this.threadId
+      const payload = {
+        messages: conversationMessages,
+        ...(this.threadId && { thread_uuid: this.threadId })
+      }
+
+      const response = await fetch(this.getGordonEndpoint(), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      // Capture question_answer_id from response headers
+      const questionAnswerId = response.headers.get('DOCKER-AI-QUESTION-ANSWER-ID')
+      if (questionAnswerId) {
+        this.messages[responseIndex].questionAnswerId = questionAnswerId
+      }
+
+      const reader = response.body.getReader()
+      const decoder = new TextDecoder()
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        const chunk = decoder.decode(value, { stream: true })
+        const lines = chunk.split('\n')
+
+        for (const line of lines) {
+          if (!line.trim() || !line.startsWith('data: ')) continue
+
+          const data = line.slice(6)
+          if (data === '[DONE]') continue
+
+          try {
+            const parsed = JSON.parse(data)
+
+            // Capture thread_id for new conversations
+            if (parsed.thread_id) {
+              if (isNewConversation) {
+                this.threadId = parsed.thread_id  // $persist auto-saves to sessionStorage
+              } else if (parsed.thread_id !== this.threadId) {
+                console.warn('Backend returned unexpected thread_id:', parsed.thread_id)
+              }
+              continue
+            }
+
+            if (parsed.choices && parsed.choices[0]?.delta?.content) {
+              const content = parsed.choices[0].delta.content
+              this.messages[responseIndex].content += content
+
+              this.$nextTick(() => {
+                const container = this.$refs.messagesContainer
+                if (container) {
+                  const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 100
+                  if (isNearBottom) {
+                    container.scrollTop = container.scrollHeight
+                  }
+                }
+              })
+            }
+          } catch (e) {
+            console.error('Failed to parse SSE data:', e)
+          }
+        }
+      }
+
+      this.messages[responseIndex].isStreaming = false
+    },
+
+    clearChat() {
+      if (confirm('Clear all messages?')) {
+        this.messages = []      // $persist auto-saves empty array
+        this.threadId = null    // $persist auto-removes from sessionStorage
+        this.error = null
+      }
+    },
+
+    formatMessageContent(content) {
+      return this.$markdown(content)
+    },
+
+    async submitFeedback(messageIndex, feedbackType) {
+      const message = this.messages[messageIndex]
+
+      if (!message.questionAnswerId) {
+        console.error('No question_answer_id available for feedback')
+        return
+      }
+
+      if (message.feedback === feedbackType) {
+        return
+      }
+
+      try {
+        const response = await fetch(this.getFeedbackEndpoint(), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            id: message.questionAnswerId,
+            feedback: feedbackType
+          })
+        })
+
+        if (response.ok) {
+          message.feedback = feedbackType  // $persist auto-saves
+        } else {
+          console.error('Failed to submit feedback:', response.status, response.statusText)
+        }
+      } catch (err) {
+        console.error('Error submitting feedback:', err)
+      }
+    },
+
+    async copyAnswer(messageIndex) {
+      const message = this.messages[messageIndex]
+      if (!message.content) return
+
+      try {
+        await navigator.clipboard.writeText(message.content)
+        message.copied = true
+        this.$nextTick(() => {
+          setTimeout(() => {
+            message.copied = false
+          }, 2000)
+        })
+      } catch (err) {
+        console.error('Failed to copy:', err)
+      }
+    }
+  }" x-cloak @keydown.escape.window="$store.gordon.close()">
+	<!-- Overlay backdrop -->
+	<div x-show="$store.gordon.isOpen" x-transition.opacity.duration.300ms @click="$store.gordon.close()"
+		class="fixed inset-0 z-40 bg-black/50"></div>
+
+	<!-- Chat panel sliding in from right -->
+	<div id="gordon-chat" x-show="$store.gordon.isOpen" x-transition:enter="transition ease-out duration-200"
+		x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
+		x-transition:leave="transition ease-in duration-200" x-transition:leave-start="translate-x-0"
+		x-transition:leave-end="translate-x-full"
+		class="fixed top-0 right-0 z-50 flex h-screen w-full flex-col overflow-hidden rounded-lg bg-white shadow-2xl transition-all duration-200 md:w-[min(70ch,90vw)] md:h-[calc(100vh-1rem)] md:top-2 md:right-2 dark:bg-gray-900">
+		<!-- Header -->
+		<div
+			class="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-blue-600 px-6 py-3 dark:border-gray-700">
+			<div class="flex items-center gap-3">
+				{{ partial "utils/svg.html" "images/ask-ai-logo.svg" }}
+			</div>
+			<div class="flex items-center gap-2">
+				<button @click="clearChat()" title="Clear chat"
+					class="cursor-pointer rounded p-2 text-white/80 transition-colors hover:bg-blue-500 hover:text-white"
+					:disabled="messages.length === 0"
+					:class="{ 'opacity-50 cursor-not-allowed': messages.length === 0 }">
+					<span class="icon-svg">
+						{{ partialCached "icon" "refresh" "refresh" }}
+					</span>
+				</button>
+				<button @click="$store.gordon.close()"
+					class="cursor-pointer rounded p-2 text-white/80 transition-colors hover:bg-blue-500 hover:text-white"
+					title="Close chat" aria-label="Close chat">
+					<span class="icon-svg">
+						{{ partialCached "icon" "close" "close" }}
+					</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Messages container -->
+		<div x-ref="messagesContainer" class="flex-1 space-y-4 p-6" :class="{ 'overflow-y-auto': messages.length > 0 }">
+			<!-- Welcome message when empty -->
+			<template x-if="messages.length === 0">
+				<div class="flex h-full flex-col items-center justify-center text-center">
+					<div class="mb-4 rounded-full bg-blue-100 p-4 dark:bg-blue-900">
+						<span class="icon-svg text-blue-600 dark:text-blue-400">
+							{{ partialCached "icon" "icons/sparkle.svg" "icons/sparkle.svg" }}
+						</span>
+					</div>
+					<h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+						Ask me about Docker
+					</h3>
+					<p class="max-w-sm text-gray-600 dark:text-gray-400">
+						Get instant answers to your Docker questions. I can help with
+						commands, concepts, troubleshooting, and best practices.
+					</p>
+					<div class="mt-8 flex flex-col items-center gap-3 text-sm">
+						<p class="mb-1 text-gray-500 dark:text-gray-400">Try asking:</p>
+						<button @click="currentQuestion = 'What is the Docker MCP toolkit?'; askQuestion()"
+							class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+							What is the Docker MCP toolkit?
+						</button>
+						<button @click="currentQuestion = 'How do hardened Docker images work?'; askQuestion()"
+							class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+							How do hardened Docker images work?
+						</button>
+						<button @click="currentQuestion = 'How do I use Docker Debug?'; askQuestion()"
+							class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+							How do I use Docker Debug?
+						</button>
+					</div>
+				</div>
+			</template>
+
+			<!-- Messages -->
+			<template x-for="(message, index) in messages" :key="index">
+				<div :class="message.role === 'user' ? 'flex justify-end' : 'flex justify-start'">
+					<div class="flex flex-col gap-2">
+						<div :class="message.role === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'" class="rounded-lg px-4 py-3">
+							<template x-if="!message.content && message.isStreaming">
+								<div class="flex gap-1">
+									<span class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
+										style="animation-delay: 0ms"></span>
+									<span class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
+										style="animation-delay: 150ms"></span>
+									<span class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
+										style="animation-delay: 300ms"></span>
+								</div>
+							</template>
+							<template x-if="message.content">
+								<div>
+									<div x-html="formatMessageContent(message.content)"
+										:class="message.role === 'assistant' ? 'prose prose-sm dark:prose-invert max-w-none break-words' : 'max-w-none break-words'"></div>
+								</div>
+							</template>
+						</div>
+						<!-- Feedback buttons for assistant messages -->
+						<template x-if="message.role === 'assistant' && !message.isStreaming && message.questionAnswerId">
+							<div class="flex items-center gap-2 text-xs">
+								<div class="flex items-center gap-1">
+									<!-- Copy button -->
+									<button @click="copyAnswer(index)"
+										class="cursor-pointer rounded bg-gray-100 p-1.5 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+										:title="message.copied ? 'Copied!' : 'Copy answer'">
+										<span x-show="message.copied !== true" class="icon-svg icon-sm">
+											{{ partialCached "icon" "content_copy" "content_copy" }}
+										</span>
+										<span x-show="message.copied === true" class="icon-svg icon-sm">
+											{{ partialCached "icon" "check_circle" "check_circle" }}
+										</span>
+									</button>
+									<!-- Thumbs up -->
+									<button @click="submitFeedback(index, 'positive')"
+										:class="message.feedback === 'positive'
+											? 'bg-green-200 text-green-700 dark:bg-green-900/50 dark:text-green-400'
+											: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'"
+										class="cursor-pointer rounded p-1.5"
+										title="Helpful">
+										<span class="icon-svg icon-sm">
+											{{ partialCached "icon" "thumb_up" "thumb_up" }}
+										</span>
+									</button>
+									<!-- Thumbs down -->
+									<button @click="submitFeedback(index, 'negative')"
+										:class="message.feedback === 'negative'
+											? 'bg-red-200 text-red-700 dark:bg-red-900/50 dark:text-red-400'
+											: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'"
+										class="cursor-pointer rounded p-1.5"
+										title="Not helpful">
+										<span class="icon-svg icon-sm">
+											{{ partialCached "icon" "thumb_down" "thumb_down" }}
+										</span>
+									</button>
+								</div>
+								<template x-if="message.feedback">
+									<span :class="message.feedback === 'positive' ? 'text-green-600 dark:text-green-400' : 'text-gray-600 dark:text-gray-400'">
+										Thanks for your feedback!
+									</span>
+								</template>
+							</div>
+						</template>
+					</div>
+				</div>
+			</template>
+
+			<!-- Error message -->
+			<template x-if="error">
+				<div
+					class="rounded-lg border border-red-200 bg-red-50 p-4 text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400">
+					<p class="text-sm" x-text="error"></p>
+				</div>
+			</template>
+		</div>
+
+		<!-- Input area -->
+		<div class="border-t border-gray-200 p-4 dark:border-gray-700">
+			<form @submit.prevent="askQuestion()" class="flex items-center gap-2">
+				<div class="relative flex-1 self-stretch">
+					<textarea x-ref="input" x-model="currentQuestion"
+						@input="$el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px'"
+						@keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); askQuestion() }"
+						placeholder="Ask a question about Docker..."
+						rows="1"
+						:disabled="isLoading"
+						class="block w-full resize-none rounded-lg border border-gray-300 p-3 pr-24 leading-normal min-h-[3rem] focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-blue-400"></textarea>
+					<!-- Page context toggle chip inside input -->
+					<div class="absolute right-2 top-1/2 -translate-y-1/2" x-data="{ showTooltip: false }">
+						<button
+							@click="includePageContext = !includePageContext"
+							@mouseenter="showTooltip = true"
+							@mouseleave="showTooltip = false"
+							type="button"
+							:class="includePageContext
+								? 'bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400'
+								: 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'"
+							class="cursor-pointer rounded-md px-2 py-1 text-xs font-medium transition-colors hover:opacity-80">
+							<span class="flex items-center gap-1">
+								<template x-if="includePageContext">
+									<span class="icon-svg icon-xs">
+										{{ partialCached "icon" "link" "link" }}
+									</span>
+								</template>
+								<template x-if="!includePageContext">
+									<span class="icon-svg icon-xs">
+										{{ partialCached "icon" "link_off" "link_off" }}
+									</span>
+								</template>
+								<span class="hidden sm:inline">Context</span>
+							</span>
+						</button>
+						<!-- Tooltip -->
+						<div
+							x-show="showTooltip"
+							x-transition:enter="transition ease-out duration-100"
+							x-transition:enter-start="opacity-0 scale-95"
+							x-transition:enter-end="opacity-100 scale-100"
+							x-transition:leave="transition ease-in duration-75"
+							x-transition:leave-start="opacity-100 scale-100"
+							x-transition:leave-end="opacity-0 scale-95"
+							class="absolute bottom-full right-0 mb-2 w-56 rounded-lg bg-gray-900 p-2.5 text-xs text-white shadow-lg dark:bg-gray-700"
+							style="display: none;">
+							<div class="relative">
+								<p>When enabled, Gordon considers the current page you're viewing to provide more relevant answers.</p>
+								<!-- Arrow -->
+								<div class="absolute -bottom-3 right-4 h-2 w-2 rotate-45 bg-gray-900 dark:bg-gray-700"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<button type="submit" :disabled="!currentQuestion.trim() || isLoading"
+					:title="isLoading ? 'Sending...' : 'Send question'"
+					class="cursor-pointer rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50">
+					<template x-if="!isLoading">
+						<span class="icon-svg">
+							{{ partialCached "icon" "send" "send" }}
+						</span>
+					</template>
+					<template x-if="isLoading">
+						<span class="icon-svg animate-spin">
+							{{ partialCached "icon" "progress_activity" "progress_activity" }}
+						</span>
+					</template>
+				</button>
+			</form>
+		</div>
+
+		<!-- Disclaimer -->
+		<div
+			class="rounded-b-lg border-t border-gray-200 bg-blue-50 px-4 py-3 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">
+			This is a custom LLM for answering questions about Docker. Answers are
+			based on the documentation.
+		</div>
+	</div>
+</div>
+
+<!-- Styles for Gordon chat -->
+<style>
+	/* Code block styles */
+	#gordon-chat pre {
+		background: #0d1117;
+		border-radius: 0.25rem;
+		padding: 0;
+		margin: 0.5rem 0;
+		overflow-x: auto;
+		white-space: pre;
+	}
+
+	#gordon-chat pre code {
+		background: #0d1117;
+		color: #c9d1d9;
+		padding: 1rem;
+		display: block;
+		font-family: "Roboto Mono", monospace;
+		font-size: 0.875rem;
+		line-height: 1.5;
+		white-space: pre;
+		overflow-x: auto;
+	}
+
+	#gordon-chat pre code * {
+		white-space: pre;
+	}
+
+	/* Inline code styling (not in pre blocks) */
+	#gordon-chat .prose code.not-prose {
+		background-color: rgb(229 231 235);
+		color: rgb(17 24 39);
+		padding: 0.2em 0.4em;
+		border-radius: 0.25rem;
+		font-family: "Roboto Mono", monospace;
+		font-size: 0.875em;
+	}
+
+	.dark #gordon-chat .prose code.not-prose {
+		background-color: rgb(55 65 81);
+		color: rgb(229 231 235);
+	}
+</style>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 4c1455512c37..af9892537126 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -51,59 +51,6 @@
   })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
   </script>
 {{ end }}
-{{/* kapa.ai widget */}}
-<script
-  async
-  src="https://widget.kapa.ai/kapa-widget.bundle.js"
-  data-button-hide="true"
-  data-font-family="Roboto Flex,sans-serif"
-  data-modal-disclaimer-bg-color="#e5f2fc"
-  data-modal-disclaimer-text-color="#086dd7"
-  data-modal-disclaimer="This is a custom LLM for answering questions about Docker. Answers are based on the contents of the documentation. Rate the answers to let us know what you think!"
-  data-kapa-branding-text="powered by [kapa.ai](https://www.kapa.ai) and Docker"
-  data-modal-header-bg-color="#1d63ed"
-  data-modal-image-height="25px"
-  data-modal-image-width="181px"
-  data-modal-title="​"
-  data-modal-override-open-class="open-kapa-widget"
-  data-modal-ask-ai-input-placeholder="Ask me a question about Docker…"
-  data-modal-title-color="#fff"
-  data-project-color="#1d63ed"
-  data-project-logo="/assets/images/logo-icon-white.svg"
-  data-project-name="Docker"
-  data-user-analytics-fingerprint-enabled="true"
-  data-bot-protection-mechanism="hcaptcha"
-  data-website-id="{{ site.Params.kapa.id }}"
-  data-modal-open-on-command-k="true"
-  data-modal-border-radius="6px"
-></script>
- <script>
-    // Define askAI function to work with search-page-input
-    window.askAI = function(inputId = "search-page-input") {
-      const searchInput = document.querySelector("#" + inputId);
-      const query = searchInput ? searchInput.value.trim() : "";
-
-      if (query && window.Kapa) {
-        window.Kapa.open({
-          mode: "ai",
-          query: query,
-          submit: false
-        });
-      } else if (window.Kapa) {
-        window.Kapa.open({
-          mode: "ai"
-        });
-      }
-    };
-
-    // Add event listener for the Ask AI button
-    document.addEventListener('click', function(event) {
-      if (event.target.closest('.open-kapa-widget')) {
-        event.preventDefault();
-        window.askAI("search-page-input");
-      }
-    });
-  </script>
 {{/* preload Roboto Flex as it's a critical font: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload */}}
 <link
   href="/assets/fonts/RobotoFlex.woff2"
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 6460e14e77ca..f3877261c628 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -48,7 +48,8 @@
     <div id="buttons" class="flex min-w-0 items-center justify-end flex-shrink-0">
       <div class="flex items-center gap-2">
         <button
-          @click="open = false"
+          x-data
+          @click="$store.gordon.toggle()"
           class="cursor-pointer flex items-center gap-2 p-2 rounded-lg bg-blue-700 border border-blue-500 text-white transition-colors focus:outline-none focus:ring focus:ring-blue-400 shimmer open-kapa-widget"
         >
           <span class="icon-svg">
diff --git a/layouts/partials/search-bar.html b/layouts/partials/search-bar.html
index 1fafcbadd8f9..2087e9a17246 100644
--- a/layouts/partials/search-bar.html
+++ b/layouts/partials/search-bar.html
@@ -70,8 +70,11 @@
       {{- $emptyState := `
       <div>
         Start typing to search or try
-        <button onclick="askAI('search-bar-input')" class="link">Ask AI</button
-        >.
+        <button @click="
+          $store.gordon.open($refs.searchBarInput.value.trim());
+          $refs.searchBarInput.value = '';
+          open = false;
+        " class="link">Ask AI</button>.
       </div>
       ` }} {{- $emptyState | safe.HTML }}
       <!-- results -->
diff --git a/package-lock.json b/package-lock.json
index 4aefc775b6d7..3b7316c8b938 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,8 @@
         "@tailwindcss/cli": "^4.1.6",
         "@tailwindcss/typography": "^0.5.15",
         "alpinejs": "^3.14.3",
+        "highlight.js": "^11.11.1",
+        "marked": "^17.0.0",
         "tailwindcss": "^4.1.6"
       },
       "devDependencies": {
@@ -976,6 +978,15 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
@@ -1367,6 +1378,18 @@
         "url": "https://github.com/sponsors/DavidAnson"
       }
     },
+    "node_modules/marked": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.0.tgz",
+      "integrity": "sha512-KkDYEWEEiYJw/KC+DVm1zzlpMQSMIu6YRltkcCvwheCp8HWPXCk9JwOmHJKBlGfzcpzcIt6x3sMnTsRm/51oDg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/micromark": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
diff --git a/package.json b/package.json
index de8098b00b20..795ed12561b4 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
     "@tailwindcss/cli": "^4.1.6",
     "@tailwindcss/typography": "^0.5.15",
     "alpinejs": "^3.14.3",
+    "highlight.js": "^11.11.1",
+    "marked": "^17.0.0",
     "tailwindcss": "^4.1.6"
   },
   "devDependencies": {

From 482ea6d3ed2ece97bdb30bee2875c164b41eb13a Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 18 Dec 2025 11:36:43 +0100
Subject: [PATCH 02/11] site(gordon): show error message when rate limited

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/gordon-chat.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/layouts/partials/gordon-chat.html b/layouts/partials/gordon-chat.html
index e62b895f0588..69882299e4a4 100644
--- a/layouts/partials/gordon-chat.html
+++ b/layouts/partials/gordon-chat.html
@@ -79,7 +79,11 @@
       } catch (err) {
         // Only set error if messages weren't cleared
         if (this.messages.length > 0) {
-          this.error = 'Failed to get response. Please try again.'
+          if (err.message === 'RATE_LIMIT_EXCEEDED') {
+            this.error = 'You\'ve exceeded your question quota for the day. Please come back tomorrow.'
+          } else {
+            this.error = 'Failed to get response. Please try again.'
+          }
         }
         console.error('Gordon API error:', err)
         // Only try to remove message if it still exists
@@ -160,6 +164,9 @@
       })
 
       if (!response.ok) {
+        if (response.status === 429) {
+          throw new Error('RATE_LIMIT_EXCEEDED')
+        }
         throw new Error(`HTTP ${response.status}: ${response.statusText}`)
       }
 

From 7c95a40893c28831d3d1ca9bf9d1efc84ad3389b Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 18 Dec 2025 11:47:26 +0100
Subject: [PATCH 03/11] site(gordon): configure hostname with
 HUGO_USE_LOCAL_GORDON

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/gordon-chat.html | 29 +++++++++++------------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/layouts/partials/gordon-chat.html b/layouts/partials/gordon-chat.html
index 69882299e4a4..5fc5c6378440 100644
--- a/layouts/partials/gordon-chat.html
+++ b/layouts/partials/gordon-chat.html
@@ -1,4 +1,13 @@
 <!-- Gordon AI Chat Panel -->
+<script>
+  window.GORDON_BASE_URL = {{ if eq hugo.Environment "production" -}}
+    'https://ai-backend-service.docker.com'
+  {{- else if getenv "HUGO_GORDON_URL" -}}
+    '{{ getenv "HUGO_GORDON_URL" }}'
+  {{- else -}}
+    'https://ai-backend-service-stage.docker.com'
+  {{- end }};
+</script>
 <div x-data="{
     isLoading: false,
     error: null,
@@ -95,14 +104,6 @@
       }
     },
 
-    getGordonEndpoint() {
-      const endpoints = {
-        'docs.docker.com': 'https://ai-backend-service.docker.com/public/ask',
-        'localhost': 'http://localhost:8000/public/ask'
-      }
-      return endpoints[window.location.hostname] || 'https://ai-backend-service-stage.docker.com/public/ask'
-    },
-
     getSessionId() {
       let sessionId = sessionStorage.getItem('gordon-session-id')
       if (!sessionId) {
@@ -112,14 +113,6 @@
       return sessionId
     },
 
-    getFeedbackEndpoint() {
-      const endpoints = {
-        'docs.docker.com': 'https://ai-backend-service.docker.com/feedback',
-        'localhost': 'http://localhost:8000/feedback'
-      }
-      return endpoints[window.location.hostname] || 'https://ai-backend-service-stage.docker.com/feedback'
-    },
-
     async streamGordonResponse(responseIndex) {
 
       // Build API request from messages, excluding the streaming placeholder
@@ -157,7 +150,7 @@
         ...(this.threadId && { thread_uuid: this.threadId })
       }
 
-      const response = await fetch(this.getGordonEndpoint(), {
+      const response = await fetch(window.GORDON_BASE_URL + '/public/ask', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(payload)
@@ -253,7 +246,7 @@
       }
 
       try {
-        const response = await fetch(this.getFeedbackEndpoint(), {
+        const response = await fetch(window.GORDON_BASE_URL + '/feedback', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({

From e1699fbf7ba5a872dd9a491166094e476da383c8 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 18 Dec 2025 12:37:52 +0100
Subject: [PATCH 04/11] site(gordon): update message window styles

- Increase chat panel width from 70ch to 80ch
- Update user message background colors for better contrast
- Add prose styling to messages for consistent typography
- Simplify message rendering template structure

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/gordon-chat.html | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/layouts/partials/gordon-chat.html b/layouts/partials/gordon-chat.html
index 5fc5c6378440..bcf10f6629d9 100644
--- a/layouts/partials/gordon-chat.html
+++ b/layouts/partials/gordon-chat.html
@@ -291,7 +291,7 @@
 		x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
 		x-transition:leave="transition ease-in duration-200" x-transition:leave-start="translate-x-0"
 		x-transition:leave-end="translate-x-full"
-		class="fixed top-0 right-0 z-50 flex h-screen w-full flex-col overflow-hidden rounded-lg bg-white shadow-2xl transition-all duration-200 md:w-[min(70ch,90vw)] md:h-[calc(100vh-1rem)] md:top-2 md:right-2 dark:bg-gray-900">
+		class="fixed top-0 right-0 z-50 flex h-screen w-full flex-col overflow-hidden rounded-lg bg-white shadow-2xl transition-all duration-200 md:w-[min(80ch,90vw)] md:h-[calc(100vh-1rem)] md:top-2 md:right-2 dark:bg-gray-900">
 		<!-- Header -->
 		<div
 			class="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-blue-600 px-6 py-3 dark:border-gray-700">
@@ -355,8 +355,8 @@ <h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
 			<!-- Messages -->
 			<template x-for="(message, index) in messages" :key="index">
 				<div :class="message.role === 'user' ? 'flex justify-end' : 'flex justify-start'">
-					<div class="flex flex-col gap-2">
-						<div :class="message.role === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'" class="rounded-lg px-4 py-3">
+					<div class="flex flex-col gap-2 max-w-full">
+						<div :class="message.role === 'user' ? 'bg-blue-500 dark:bg-blue-800 text-white' : 'max-w-none bg-gray-100 dark:bg-gray-800'" class="prose prose-sm dark:prose-invert rounded-lg px-4">
 							<template x-if="!message.content && message.isStreaming">
 								<div class="flex gap-1">
 									<span class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
@@ -368,10 +368,7 @@ <h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
 								</div>
 							</template>
 							<template x-if="message.content">
-								<div>
-									<div x-html="formatMessageContent(message.content)"
-										:class="message.role === 'assistant' ? 'prose prose-sm dark:prose-invert max-w-none break-words' : 'max-w-none break-words'"></div>
-								</div>
+								<div x-html="formatMessageContent(message.content)"></div>
 							</template>
 						</div>
 						<!-- Feedback buttons for assistant messages -->

From 2b84e6a852dc0844e1c1b0750d16623384dba349 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 18 Dec 2025 12:38:05 +0100
Subject: [PATCH 05/11] site(gordon): escape HTML in markdown text to preserve
 angle brackets

Configure marked.js to escape HTML entities in text tokens while
preserving code blocks. This allows angle brackets like <target-name>
to display correctly in regular text without being interpreted as HTML
tags, while keeping code examples intact.

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 assets/js/src/alpine.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/assets/js/src/alpine.js b/assets/js/src/alpine.js
index d023fb11d5b2..f9d2ec796a2a 100644
--- a/assets/js/src/alpine.js
+++ b/assets/js/src/alpine.js
@@ -35,6 +35,22 @@ hljs.registerLanguage('py', python)
 hljs.registerLanguage('go', go)
 hljs.registerLanguage('golang', go)
 
+// Configure marked to escape HTML in text tokens only (not code blocks)
+marked.use({
+  walkTokens(token) {
+    // Escape HTML in text and HTML tokens, preserve code blocks
+    if (token.type === 'text' || token.type === 'html') {
+      const text = token.text || token.raw
+      const escaped = text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+      if (token.text) token.text = escaped
+      if (token.raw) token.raw = escaped
+    }
+  }
+})
+
 // Add $markdown magic for rendering markdown with syntax highlighting
 Alpine.magic('markdown', () => {
   return (content) => {

From d89bec2483c090d95d1035c2aa70ef01a17d92a8 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 18 Dec 2025 12:48:22 +0100
Subject: [PATCH 06/11] site(gordon): make page context switch prettier

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/gordon-chat.html | 61 ++++++++++++++++---------------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/layouts/partials/gordon-chat.html b/layouts/partials/gordon-chat.html
index bcf10f6629d9..daefbd78afc7 100644
--- a/layouts/partials/gordon-chat.html
+++ b/layouts/partials/gordon-chat.html
@@ -431,24 +431,41 @@ <h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
 
 		<!-- Input area -->
 		<div class="border-t border-gray-200 p-4 dark:border-gray-700">
-			<form @submit.prevent="askQuestion()" class="flex items-center gap-2">
-				<div class="relative flex-1 self-stretch">
-					<textarea x-ref="input" x-model="currentQuestion"
-						@input="$el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px'"
-						@keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); askQuestion() }"
-						placeholder="Ask a question about Docker..."
-						rows="1"
-						:disabled="isLoading"
-						class="block w-full resize-none rounded-lg border border-gray-300 p-3 pr-24 leading-normal min-h-[3rem] focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-blue-400"></textarea>
-					<!-- Page context toggle chip inside input -->
-					<div class="absolute right-2 top-1/2 -translate-y-1/2" x-data="{ showTooltip: false }">
+			<form @submit.prevent="askQuestion()" class="space-y-2">
+				<div class="flex items-center gap-2">
+					<div class="relative flex-1 self-stretch">
+						<textarea x-ref="input" x-model="currentQuestion"
+							@input="$el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px'"
+							@keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); askQuestion() }"
+							placeholder="Ask a question about Docker..."
+							rows="1"
+							:disabled="isLoading"
+							class="block w-full resize-none rounded-lg border border-gray-300 p-3 leading-normal min-h-[3rem] focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-blue-400"></textarea>
+					</div>
+					<button type="submit" :disabled="!currentQuestion.trim() || isLoading"
+						:title="isLoading ? 'Sending...' : 'Send question'"
+						class="cursor-pointer rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50">
+						<template x-if="!isLoading">
+							<span class="icon-svg">
+								{{ partialCached "icon" "send" "send" }}
+							</span>
+						</template>
+						<template x-if="isLoading">
+							<span class="icon-svg animate-spin">
+								{{ partialCached "icon" "progress_activity" "progress_activity" }}
+							</span>
+						</template>
+					</button>
+				</div>
+				<div class="flex items-center" x-data="{ showTooltip: false }">
+					<div class="relative">
 						<button
 							@click="includePageContext = !includePageContext"
 							@mouseenter="showTooltip = true"
 							@mouseleave="showTooltip = false"
 							type="button"
 							:class="includePageContext
-								? 'bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400'
+								? 'bg-blue-100 text-blue-600 dark:bg-blue-800 dark:text-blue-200'
 								: 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'"
 							class="cursor-pointer rounded-md px-2 py-1 text-xs font-medium transition-colors hover:opacity-80">
 							<span class="flex items-center gap-1">
@@ -462,7 +479,7 @@ <h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
 										{{ partialCached "icon" "link_off" "link_off" }}
 									</span>
 								</template>
-								<span class="hidden sm:inline">Context</span>
+								<span>Context</span>
 							</span>
 						</button>
 						<!-- Tooltip -->
@@ -474,30 +491,16 @@ <h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
 							x-transition:leave="transition ease-in duration-75"
 							x-transition:leave-start="opacity-100 scale-100"
 							x-transition:leave-end="opacity-0 scale-95"
-							class="absolute bottom-full right-0 mb-2 w-56 rounded-lg bg-gray-900 p-2.5 text-xs text-white shadow-lg dark:bg-gray-700"
+							class="absolute bottom-full left-0 mb-2 w-56 rounded-lg bg-gray-900 p-2.5 text-xs text-white shadow-lg dark:bg-gray-700"
 							style="display: none;">
 							<div class="relative">
 								<p>When enabled, Gordon considers the current page you're viewing to provide more relevant answers.</p>
 								<!-- Arrow -->
-								<div class="absolute -bottom-3 right-4 h-2 w-2 rotate-45 bg-gray-900 dark:bg-gray-700"></div>
+								<div class="absolute -bottom-3 left-4 h-2 w-2 rotate-45 bg-gray-900 dark:bg-gray-700"></div>
 							</div>
 						</div>
 					</div>
 				</div>
-				<button type="submit" :disabled="!currentQuestion.trim() || isLoading"
-					:title="isLoading ? 'Sending...' : 'Send question'"
-					class="cursor-pointer rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50">
-					<template x-if="!isLoading">
-						<span class="icon-svg">
-							{{ partialCached "icon" "send" "send" }}
-						</span>
-					</template>
-					<template x-if="isLoading">
-						<span class="icon-svg animate-spin">
-							{{ partialCached "icon" "progress_activity" "progress_activity" }}
-						</span>
-					</template>
-				</button>
 			</form>
 		</div>
 

From 0b2d4d96fe5ac6a8bfdad8e77ebf02fe767b1d6a Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 18 Dec 2025 12:54:26 +0100
Subject: [PATCH 07/11] site(gordon): add y padding for response in loading
 state

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/gordon-chat.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/partials/gordon-chat.html b/layouts/partials/gordon-chat.html
index daefbd78afc7..d641c9b41c2d 100644
--- a/layouts/partials/gordon-chat.html
+++ b/layouts/partials/gordon-chat.html
@@ -358,7 +358,7 @@ <h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
 					<div class="flex flex-col gap-2 max-w-full">
 						<div :class="message.role === 'user' ? 'bg-blue-500 dark:bg-blue-800 text-white' : 'max-w-none bg-gray-100 dark:bg-gray-800'" class="prose prose-sm dark:prose-invert rounded-lg px-4">
 							<template x-if="!message.content && message.isStreaming">
-								<div class="flex gap-1">
+								<div class="flex gap-1 py-3">
 									<span class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
 										style="animation-delay: 0ms"></span>
 									<span class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"

From 70023f457be7c3a7a1e498ded944032a1a748a56 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 18 Dec 2025 13:09:36 +0100
Subject: [PATCH 08/11] site(gordon): always show message actions, add error
 handling

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/gordon-chat.html | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/layouts/partials/gordon-chat.html b/layouts/partials/gordon-chat.html
index d641c9b41c2d..35df300f1bb1 100644
--- a/layouts/partials/gordon-chat.html
+++ b/layouts/partials/gordon-chat.html
@@ -236,12 +236,16 @@
     async submitFeedback(messageIndex, feedbackType) {
       const message = this.messages[messageIndex]
 
-      if (!message.questionAnswerId) {
-        console.error('No question_answer_id available for feedback')
+      if (message.feedback === feedbackType) {
         return
       }
 
-      if (message.feedback === feedbackType) {
+      // Clear any previous error
+      message.feedbackError = null
+
+      if (!message.questionAnswerId) {
+        message.feedbackError = 'Unable to submit feedback'
+        console.error('No question_answer_id available for feedback')
         return
       }
 
@@ -258,9 +262,11 @@
         if (response.ok) {
           message.feedback = feedbackType  // $persist auto-saves
         } else {
+          message.feedbackError = 'Unable to submit feedback'
           console.error('Failed to submit feedback:', response.status, response.statusText)
         }
       } catch (err) {
+        message.feedbackError = 'Unable to submit feedback'
         console.error('Error submitting feedback:', err)
       }
     },
@@ -372,7 +378,7 @@ <h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
 							</template>
 						</div>
 						<!-- Feedback buttons for assistant messages -->
-						<template x-if="message.role === 'assistant' && !message.isStreaming && message.questionAnswerId">
+						<template x-if="message.role === 'assistant' && !message.isStreaming">
 							<div class="flex items-center gap-2 text-xs">
 								<div class="flex items-center gap-1">
 									<!-- Copy button -->
@@ -414,6 +420,9 @@ <h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
 										Thanks for your feedback!
 									</span>
 								</template>
+								<template x-if="message.feedbackError">
+									<span class="text-red-600 dark:text-red-400" x-text="message.feedbackError"></span>
+								</template>
 							</div>
 						</template>
 					</div>

From 6ccced9872a21f1f25ccd5351c0c8174b52d52f9 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Fri, 19 Dec 2025 14:03:28 +0100
Subject: [PATCH 09/11] site(gordon): get qa ID from stream chunk

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/gordon-chat.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/layouts/partials/gordon-chat.html b/layouts/partials/gordon-chat.html
index 35df300f1bb1..4117c2bdad72 100644
--- a/layouts/partials/gordon-chat.html
+++ b/layouts/partials/gordon-chat.html
@@ -163,12 +163,6 @@
         throw new Error(`HTTP ${response.status}: ${response.statusText}`)
       }
 
-      // Capture question_answer_id from response headers
-      const questionAnswerId = response.headers.get('DOCKER-AI-QUESTION-ANSWER-ID')
-      if (questionAnswerId) {
-        this.messages[responseIndex].questionAnswerId = questionAnswerId
-      }
-
       const reader = response.body.getReader()
       const decoder = new TextDecoder()
 
@@ -198,6 +192,12 @@
               continue
             }
 
+            // Capture question_answer_id for feedback
+            if (parsed.question_answer_id) {
+              this.messages[responseIndex].questionAnswerId = parsed.question_answer_id
+              continue
+            }
+
             if (parsed.choices && parsed.choices[0]?.delta?.content) {
               const content = parsed.choices[0].delta.content
               this.messages[responseIndex].content += content

From 25def314e7de70b30882ecf5fcd8263e39ba86b4 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Fri, 19 Dec 2025 15:26:26 +0100
Subject: [PATCH 10/11] site(gordon): do not persist open state

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 assets/js/src/alpine.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/src/alpine.js b/assets/js/src/alpine.js
index f9d2ec796a2a..7249a31def29 100644
--- a/assets/js/src/alpine.js
+++ b/assets/js/src/alpine.js
@@ -90,7 +90,7 @@ Alpine.magic('markdown', () => {
 // Stores
 Alpine.store("showSidebar", false)
 Alpine.store('gordon', {
-  isOpen: Alpine.$persist(false).using(sessionStorage).as('gordon-isOpen'),
+  isOpen: false,
   query: '',
   toggle() {
     this.isOpen = !this.isOpen

From c00b2b5ee765241c2cc843f5d21f939d9453b272 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Wed, 7 Jan 2026 12:57:48 +0100
Subject: [PATCH 11/11] site(gordon): add turn limit (10 messages)

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/gordon-chat.html | 669 ++++++++++++++++++------------
 1 file changed, 400 insertions(+), 269 deletions(-)

diff --git a/layouts/partials/gordon-chat.html b/layouts/partials/gordon-chat.html
index 4117c2bdad72..f44dd86e2fc2 100644
--- a/layouts/partials/gordon-chat.html
+++ b/layouts/partials/gordon-chat.html
@@ -8,13 +8,15 @@
     'https://ai-backend-service-stage.docker.com'
   {{- end }};
 </script>
-<div x-data="{
+<div
+  x-data="{
     isLoading: false,
     error: null,
     messages: $persist([]).using(sessionStorage).as('gordon-messages'),
     currentQuestion: '',
     threadId: $persist(null).using(sessionStorage).as('gordon-threadId'),
     includePageContext: $persist(true).using(sessionStorage).as('gordon-includePageContext'),
+    maxTurnsPerThread: 10,
 
     init() {
       // Clean up any streaming messages that might be persisted
@@ -43,9 +45,26 @@
       })
     },
 
+    getTurnCount() {
+      return this.messages.filter(m => m.role === 'user').length
+    },
+
+    getRemainingTurns() {
+      return this.maxTurnsPerThread - this.getTurnCount()
+    },
+
+    isThreadLimitReached() {
+      return this.getTurnCount() >= this.maxTurnsPerThread
+    },
+
+    shouldShowCountdown() {
+      const remaining = this.getRemainingTurns()
+      return remaining > 0 && remaining <= 3
+    },
+
     async askQuestion() {
       const question = this.currentQuestion.trim()
-      if (!question || this.isLoading) {
+      if (!question || this.isLoading || this.isThreadLimitReached()) {
         return
       }
 
@@ -287,281 +306,393 @@
         console.error('Failed to copy:', err)
       }
     }
-  }" x-cloak @keydown.escape.window="$store.gordon.close()">
-	<!-- Overlay backdrop -->
-	<div x-show="$store.gordon.isOpen" x-transition.opacity.duration.300ms @click="$store.gordon.close()"
-		class="fixed inset-0 z-40 bg-black/50"></div>
-
-	<!-- Chat panel sliding in from right -->
-	<div id="gordon-chat" x-show="$store.gordon.isOpen" x-transition:enter="transition ease-out duration-200"
-		x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
-		x-transition:leave="transition ease-in duration-200" x-transition:leave-start="translate-x-0"
-		x-transition:leave-end="translate-x-full"
-		class="fixed top-0 right-0 z-50 flex h-screen w-full flex-col overflow-hidden rounded-lg bg-white shadow-2xl transition-all duration-200 md:w-[min(80ch,90vw)] md:h-[calc(100vh-1rem)] md:top-2 md:right-2 dark:bg-gray-900">
-		<!-- Header -->
-		<div
-			class="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-blue-600 px-6 py-3 dark:border-gray-700">
-			<div class="flex items-center gap-3">
-				{{ partial "utils/svg.html" "images/ask-ai-logo.svg" }}
-			</div>
-			<div class="flex items-center gap-2">
-				<button @click="clearChat()" title="Clear chat"
-					class="cursor-pointer rounded p-2 text-white/80 transition-colors hover:bg-blue-500 hover:text-white"
-					:disabled="messages.length === 0"
-					:class="{ 'opacity-50 cursor-not-allowed': messages.length === 0 }">
-					<span class="icon-svg">
-						{{ partialCached "icon" "refresh" "refresh" }}
-					</span>
-				</button>
-				<button @click="$store.gordon.close()"
-					class="cursor-pointer rounded p-2 text-white/80 transition-colors hover:bg-blue-500 hover:text-white"
-					title="Close chat" aria-label="Close chat">
-					<span class="icon-svg">
-						{{ partialCached "icon" "close" "close" }}
-					</span>
-				</button>
-			</div>
-		</div>
-
-		<!-- Messages container -->
-		<div x-ref="messagesContainer" class="flex-1 space-y-4 p-6" :class="{ 'overflow-y-auto': messages.length > 0 }">
-			<!-- Welcome message when empty -->
-			<template x-if="messages.length === 0">
-				<div class="flex h-full flex-col items-center justify-center text-center">
-					<div class="mb-4 rounded-full bg-blue-100 p-4 dark:bg-blue-900">
-						<span class="icon-svg text-blue-600 dark:text-blue-400">
-							{{ partialCached "icon" "icons/sparkle.svg" "icons/sparkle.svg" }}
-						</span>
-					</div>
-					<h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
-						Ask me about Docker
-					</h3>
-					<p class="max-w-sm text-gray-600 dark:text-gray-400">
-						Get instant answers to your Docker questions. I can help with
-						commands, concepts, troubleshooting, and best practices.
-					</p>
-					<div class="mt-8 flex flex-col items-center gap-3 text-sm">
-						<p class="mb-1 text-gray-500 dark:text-gray-400">Try asking:</p>
-						<button @click="currentQuestion = 'What is the Docker MCP toolkit?'; askQuestion()"
-							class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
-							What is the Docker MCP toolkit?
-						</button>
-						<button @click="currentQuestion = 'How do hardened Docker images work?'; askQuestion()"
-							class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
-							How do hardened Docker images work?
-						</button>
-						<button @click="currentQuestion = 'How do I use Docker Debug?'; askQuestion()"
-							class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
-							How do I use Docker Debug?
-						</button>
-					</div>
-				</div>
-			</template>
-
-			<!-- Messages -->
-			<template x-for="(message, index) in messages" :key="index">
-				<div :class="message.role === 'user' ? 'flex justify-end' : 'flex justify-start'">
-					<div class="flex flex-col gap-2 max-w-full">
-						<div :class="message.role === 'user' ? 'bg-blue-500 dark:bg-blue-800 text-white' : 'max-w-none bg-gray-100 dark:bg-gray-800'" class="prose prose-sm dark:prose-invert rounded-lg px-4">
-							<template x-if="!message.content && message.isStreaming">
-								<div class="flex gap-1 py-3">
-									<span class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
-										style="animation-delay: 0ms"></span>
-									<span class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
-										style="animation-delay: 150ms"></span>
-									<span class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
-										style="animation-delay: 300ms"></span>
-								</div>
-							</template>
-							<template x-if="message.content">
-								<div x-html="formatMessageContent(message.content)"></div>
-							</template>
-						</div>
-						<!-- Feedback buttons for assistant messages -->
-						<template x-if="message.role === 'assistant' && !message.isStreaming">
-							<div class="flex items-center gap-2 text-xs">
-								<div class="flex items-center gap-1">
-									<!-- Copy button -->
-									<button @click="copyAnswer(index)"
-										class="cursor-pointer rounded bg-gray-100 p-1.5 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
-										:title="message.copied ? 'Copied!' : 'Copy answer'">
-										<span x-show="message.copied !== true" class="icon-svg icon-sm">
-											{{ partialCached "icon" "content_copy" "content_copy" }}
-										</span>
-										<span x-show="message.copied === true" class="icon-svg icon-sm">
-											{{ partialCached "icon" "check_circle" "check_circle" }}
-										</span>
-									</button>
-									<!-- Thumbs up -->
-									<button @click="submitFeedback(index, 'positive')"
-										:class="message.feedback === 'positive'
+  }"
+  x-cloak
+  @keydown.escape.window="$store.gordon.close()"
+>
+  <!-- Overlay backdrop -->
+  <div
+    x-show="$store.gordon.isOpen"
+    x-transition.opacity.duration.300ms
+    @click="$store.gordon.close()"
+    class="fixed inset-0 z-40 bg-black/50"
+  ></div>
+
+  <!-- Chat panel sliding in from right -->
+  <div
+    id="gordon-chat"
+    x-show="$store.gordon.isOpen"
+    x-transition:enter="transition ease-out duration-200"
+    x-transition:enter-start="translate-x-full"
+    x-transition:enter-end="translate-x-0"
+    x-transition:leave="transition ease-in duration-200"
+    x-transition:leave-start="translate-x-0"
+    x-transition:leave-end="translate-x-full"
+    class="fixed top-0 right-0 z-50 flex h-screen w-full flex-col overflow-hidden rounded-lg bg-white shadow-2xl transition-all duration-200 md:top-2 md:right-2 md:h-[calc(100vh-1rem)] md:w-[min(80ch,90vw)] dark:bg-gray-900"
+  >
+    <!-- Header -->
+    <div
+      class="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-blue-600 px-6 py-3 dark:border-gray-700"
+    >
+      <div class="flex items-center gap-3">
+        {{ partial "utils/svg.html" "images/ask-ai-logo.svg" }}
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          @click="clearChat()"
+          title="Clear chat"
+          class="cursor-pointer rounded p-2 text-white/80 transition-colors hover:bg-blue-500 hover:text-white"
+          :disabled="messages.length === 0"
+          :class="{ 'opacity-50 cursor-not-allowed': messages.length === 0 }"
+        >
+          <span class="icon-svg">
+            {{ partialCached "icon" "refresh" "refresh" }}
+          </span>
+        </button>
+        <button
+          @click="$store.gordon.close()"
+          class="cursor-pointer rounded p-2 text-white/80 transition-colors hover:bg-blue-500 hover:text-white"
+          title="Close chat"
+          aria-label="Close chat"
+        >
+          <span class="icon-svg">
+            {{ partialCached "icon" "close" "close" }}
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Messages container -->
+    <div
+      x-ref="messagesContainer"
+      class="flex-1 space-y-4 p-6"
+      :class="{ 'overflow-y-auto': messages.length > 0 }"
+    >
+      <!-- Welcome message when empty -->
+      <template x-if="messages.length === 0">
+        <div
+          class="flex h-full flex-col items-center justify-center text-center"
+        >
+          <div class="mb-4 rounded-full bg-blue-100 p-4 dark:bg-blue-900">
+            <span class="icon-svg text-blue-600 dark:text-blue-400">
+              {{ partialCached "icon" "icons/sparkle.svg" "icons/sparkle.svg" }}
+            </span>
+          </div>
+          <h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
+            Ask me about Docker
+          </h3>
+          <p class="max-w-sm text-gray-600 dark:text-gray-400">
+            Get instant answers to your Docker questions. I can help with
+            commands, concepts, troubleshooting, and best practices.
+          </p>
+          <div class="mt-8 flex flex-col items-center gap-3 text-sm">
+            <p class="mb-1 text-gray-500 dark:text-gray-400">Try asking:</p>
+            <button
+              @click="currentQuestion = 'What is the Docker MCP toolkit?'; askQuestion()"
+              class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
+            >
+              What is the Docker MCP toolkit?
+            </button>
+            <button
+              @click="currentQuestion = 'How do hardened Docker images work?'; askQuestion()"
+              class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
+            >
+              How do hardened Docker images work?
+            </button>
+            <button
+              @click="currentQuestion = 'How do I use Docker Debug?'; askQuestion()"
+              class="cursor-pointer rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-gray-700 transition-opacity hover:opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
+            >
+              How do I use Docker Debug?
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <!-- Messages -->
+      <template x-for="(message, index) in messages" :key="index">
+        <div
+          :class="message.role === 'user' ? 'flex justify-end' : 'flex justify-start'"
+        >
+          <div class="flex max-w-full flex-col gap-2">
+            <div
+              :class="message.role === 'user' ? 'bg-blue-500 dark:bg-blue-800 text-white' : 'max-w-none bg-gray-100 dark:bg-gray-800'"
+              class="prose prose-sm dark:prose-invert rounded-lg px-4"
+            >
+              <template x-if="!message.content && message.isStreaming">
+                <div class="flex gap-1 py-3">
+                  <span
+                    class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
+                    style="animation-delay: 0ms"
+                  ></span>
+                  <span
+                    class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
+                    style="animation-delay: 150ms"
+                  ></span>
+                  <span
+                    class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
+                    style="animation-delay: 300ms"
+                  ></span>
+                </div>
+              </template>
+              <template x-if="message.content">
+                <div x-html="formatMessageContent(message.content)"></div>
+              </template>
+            </div>
+            <!-- Feedback buttons for assistant messages -->
+            <template
+              x-if="message.role === 'assistant' && !message.isStreaming"
+            >
+              <div class="flex items-center gap-2 text-xs">
+                <div class="flex items-center gap-1">
+                  <!-- Copy button -->
+                  <button
+                    @click="copyAnswer(index)"
+                    class="cursor-pointer rounded bg-gray-100 p-1.5 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                    :title="message.copied ? 'Copied!' : 'Copy answer'"
+                  >
+                    <span
+                      x-show="message.copied !== true"
+                      class="icon-svg icon-sm"
+                    >
+                      {{ partialCached "icon" "content_copy" "content_copy" }}
+                    </span>
+                    <span
+                      x-show="message.copied === true"
+                      class="icon-svg icon-sm"
+                    >
+                      {{ partialCached "icon" "check_circle" "check_circle" }}
+                    </span>
+                  </button>
+                  <!-- Thumbs up -->
+                  <button
+                    @click="submitFeedback(index, 'positive')"
+                    :class="message.feedback === 'positive'
 											? 'bg-green-200 text-green-700 dark:bg-green-900/50 dark:text-green-400'
 											: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'"
-										class="cursor-pointer rounded p-1.5"
-										title="Helpful">
-										<span class="icon-svg icon-sm">
-											{{ partialCached "icon" "thumb_up" "thumb_up" }}
-										</span>
-									</button>
-									<!-- Thumbs down -->
-									<button @click="submitFeedback(index, 'negative')"
-										:class="message.feedback === 'negative'
+                    class="cursor-pointer rounded p-1.5"
+                    title="Helpful"
+                  >
+                    <span class="icon-svg icon-sm">
+                      {{ partialCached "icon" "thumb_up" "thumb_up" }}
+                    </span>
+                  </button>
+                  <!-- Thumbs down -->
+                  <button
+                    @click="submitFeedback(index, 'negative')"
+                    :class="message.feedback === 'negative'
 											? 'bg-red-200 text-red-700 dark:bg-red-900/50 dark:text-red-400'
 											: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'"
-										class="cursor-pointer rounded p-1.5"
-										title="Not helpful">
-										<span class="icon-svg icon-sm">
-											{{ partialCached "icon" "thumb_down" "thumb_down" }}
-										</span>
-									</button>
-								</div>
-								<template x-if="message.feedback">
-									<span :class="message.feedback === 'positive' ? 'text-green-600 dark:text-green-400' : 'text-gray-600 dark:text-gray-400'">
-										Thanks for your feedback!
-									</span>
-								</template>
-								<template x-if="message.feedbackError">
-									<span class="text-red-600 dark:text-red-400" x-text="message.feedbackError"></span>
-								</template>
-							</div>
-						</template>
-					</div>
-				</div>
-			</template>
-
-			<!-- Error message -->
-			<template x-if="error">
-				<div
-					class="rounded-lg border border-red-200 bg-red-50 p-4 text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400">
-					<p class="text-sm" x-text="error"></p>
-				</div>
-			</template>
-		</div>
-
-		<!-- Input area -->
-		<div class="border-t border-gray-200 p-4 dark:border-gray-700">
-			<form @submit.prevent="askQuestion()" class="space-y-2">
-				<div class="flex items-center gap-2">
-					<div class="relative flex-1 self-stretch">
-						<textarea x-ref="input" x-model="currentQuestion"
-							@input="$el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px'"
-							@keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); askQuestion() }"
-							placeholder="Ask a question about Docker..."
-							rows="1"
-							:disabled="isLoading"
-							class="block w-full resize-none rounded-lg border border-gray-300 p-3 leading-normal min-h-[3rem] focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-blue-400"></textarea>
-					</div>
-					<button type="submit" :disabled="!currentQuestion.trim() || isLoading"
-						:title="isLoading ? 'Sending...' : 'Send question'"
-						class="cursor-pointer rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50">
-						<template x-if="!isLoading">
-							<span class="icon-svg">
-								{{ partialCached "icon" "send" "send" }}
-							</span>
-						</template>
-						<template x-if="isLoading">
-							<span class="icon-svg animate-spin">
-								{{ partialCached "icon" "progress_activity" "progress_activity" }}
-							</span>
-						</template>
-					</button>
-				</div>
-				<div class="flex items-center" x-data="{ showTooltip: false }">
-					<div class="relative">
-						<button
-							@click="includePageContext = !includePageContext"
-							@mouseenter="showTooltip = true"
-							@mouseleave="showTooltip = false"
-							type="button"
-							:class="includePageContext
+                    class="cursor-pointer rounded p-1.5"
+                    title="Not helpful"
+                  >
+                    <span class="icon-svg icon-sm">
+                      {{ partialCached "icon" "thumb_down" "thumb_down" }}
+                    </span>
+                  </button>
+                </div>
+                <template x-if="message.feedback">
+                  <span
+                    :class="message.feedback === 'positive' ? 'text-green-600 dark:text-green-400' : 'text-gray-600 dark:text-gray-400'"
+                  >
+                    Thanks for your feedback!
+                  </span>
+                </template>
+                <template x-if="message.feedbackError">
+                  <span
+                    class="text-red-600 dark:text-red-400"
+                    x-text="message.feedbackError"
+                  ></span>
+                </template>
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+
+      <!-- Error message -->
+      <template x-if="error">
+        <div
+          class="rounded-lg border border-red-200 bg-red-50 p-4 text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400"
+        >
+          <p class="text-sm" x-text="error"></p>
+        </div>
+      </template>
+
+      <!-- Countdown warning when approaching limit -->
+      <template x-if="shouldShowCountdown()">
+        <div
+          class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400"
+        >
+          <p class="text-sm">
+            <span x-text="getRemainingTurns()"></span>
+            <span
+              x-text="getRemainingTurns() === 1 ? 'question' : 'questions'"
+            ></span>
+            remaining in this thread.
+          </p>
+        </div>
+      </template>
+
+      <!-- Thread limit warning -->
+      <template x-if="isThreadLimitReached()">
+        <div
+          class="rounded-lg border border-blue-200 bg-blue-50 p-4 text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
+        >
+          <p class="mb-3 text-sm">
+            You've reached the maximum of
+            <span x-text="maxTurnsPerThread"></span> questions per thread. For
+            better answer quality, start a new thread.
+          </p>
+          <button
+            @click="clearChat()"
+            class="cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
+          >
+            Start a new thread
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- Input area -->
+    <div class="border-t border-gray-200 p-4 dark:border-gray-700">
+      <form @submit.prevent="askQuestion()" class="space-y-2">
+        <div class="flex items-center gap-2">
+          <div class="relative flex-1 self-stretch">
+            <textarea
+              x-ref="input"
+              x-model="currentQuestion"
+              @input="$el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px'"
+              @keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); askQuestion() }"
+              placeholder="Ask a question about Docker..."
+              rows="1"
+              :disabled="isLoading || isThreadLimitReached()"
+              class="block min-h-[3rem] w-full resize-none rounded-lg border border-gray-300 p-3 leading-normal focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-blue-400"
+              :class="{ 'cursor-not-allowed': isThreadLimitReached() }"
+            ></textarea>
+          </div>
+          <button
+            type="submit"
+            :disabled="!currentQuestion.trim() || isLoading || isThreadLimitReached()"
+            :title="isLoading ? 'Sending...' : (isThreadLimitReached() ? 'Thread limit reached. Start a new thread.' : 'Send question')"
+            class="cursor-pointer rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <template x-if="!isLoading">
+              <span class="icon-svg">
+                {{ partialCached "icon" "send" "send" }}
+              </span>
+            </template>
+            <template x-if="isLoading">
+              <span class="icon-svg animate-spin">
+                {{ partialCached "icon" "progress_activity" "progress_activity" }}
+              </span>
+            </template>
+          </button>
+        </div>
+        <div class="flex items-center" x-data="{ showTooltip: false }">
+          <div class="relative">
+            <button
+              @click="includePageContext = !includePageContext"
+              @mouseenter="showTooltip = true"
+              @mouseleave="showTooltip = false"
+              type="button"
+              :class="includePageContext
 								? 'bg-blue-100 text-blue-600 dark:bg-blue-800 dark:text-blue-200'
 								: 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'"
-							class="cursor-pointer rounded-md px-2 py-1 text-xs font-medium transition-colors hover:opacity-80">
-							<span class="flex items-center gap-1">
-								<template x-if="includePageContext">
-									<span class="icon-svg icon-xs">
-										{{ partialCached "icon" "link" "link" }}
-									</span>
-								</template>
-								<template x-if="!includePageContext">
-									<span class="icon-svg icon-xs">
-										{{ partialCached "icon" "link_off" "link_off" }}
-									</span>
-								</template>
-								<span>Context</span>
-							</span>
-						</button>
-						<!-- Tooltip -->
-						<div
-							x-show="showTooltip"
-							x-transition:enter="transition ease-out duration-100"
-							x-transition:enter-start="opacity-0 scale-95"
-							x-transition:enter-end="opacity-100 scale-100"
-							x-transition:leave="transition ease-in duration-75"
-							x-transition:leave-start="opacity-100 scale-100"
-							x-transition:leave-end="opacity-0 scale-95"
-							class="absolute bottom-full left-0 mb-2 w-56 rounded-lg bg-gray-900 p-2.5 text-xs text-white shadow-lg dark:bg-gray-700"
-							style="display: none;">
-							<div class="relative">
-								<p>When enabled, Gordon considers the current page you're viewing to provide more relevant answers.</p>
-								<!-- Arrow -->
-								<div class="absolute -bottom-3 left-4 h-2 w-2 rotate-45 bg-gray-900 dark:bg-gray-700"></div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</form>
-		</div>
-
-		<!-- Disclaimer -->
-		<div
-			class="rounded-b-lg border-t border-gray-200 bg-blue-50 px-4 py-3 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">
-			This is a custom LLM for answering questions about Docker. Answers are
-			based on the documentation.
-		</div>
-	</div>
+              class="cursor-pointer rounded-md px-2 py-1 text-xs font-medium transition-colors hover:opacity-80"
+            >
+              <span class="flex items-center gap-1">
+                <template x-if="includePageContext">
+                  <span class="icon-svg icon-xs">
+                    {{ partialCached "icon" "link" "link" }}
+                  </span>
+                </template>
+                <template x-if="!includePageContext">
+                  <span class="icon-svg icon-xs">
+                    {{ partialCached "icon" "link_off" "link_off" }}
+                  </span>
+                </template>
+                <span>Context</span>
+              </span>
+            </button>
+            <!-- Tooltip -->
+            <div
+              x-show="showTooltip"
+              x-transition:enter="transition ease-out duration-100"
+              x-transition:enter-start="opacity-0 scale-95"
+              x-transition:enter-end="opacity-100 scale-100"
+              x-transition:leave="transition ease-in duration-75"
+              x-transition:leave-start="opacity-100 scale-100"
+              x-transition:leave-end="opacity-0 scale-95"
+              class="absolute bottom-full left-0 mb-2 w-56 rounded-lg bg-gray-900 p-2.5 text-xs text-white shadow-lg dark:bg-gray-700"
+              style="display: none;"
+            >
+              <div class="relative">
+                <p>
+                  When enabled, Gordon considers the current page you're viewing
+                  to provide more relevant answers.
+                </p>
+                <!-- Arrow -->
+                <div
+                  class="absolute -bottom-3 left-4 h-2 w-2 rotate-45 bg-gray-900 dark:bg-gray-700"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+
+    <!-- Disclaimer -->
+    <div
+      class="rounded-b-lg border-t border-gray-200 bg-blue-50 px-4 py-3 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
+    >
+      This is a custom LLM for answering questions about Docker. Answers are
+      based on the documentation.
+    </div>
+  </div>
 </div>
 
 <!-- Styles for Gordon chat -->
 <style>
-	/* Code block styles */
-	#gordon-chat pre {
-		background: #0d1117;
-		border-radius: 0.25rem;
-		padding: 0;
-		margin: 0.5rem 0;
-		overflow-x: auto;
-		white-space: pre;
-	}
-
-	#gordon-chat pre code {
-		background: #0d1117;
-		color: #c9d1d9;
-		padding: 1rem;
-		display: block;
-		font-family: "Roboto Mono", monospace;
-		font-size: 0.875rem;
-		line-height: 1.5;
-		white-space: pre;
-		overflow-x: auto;
-	}
-
-	#gordon-chat pre code * {
-		white-space: pre;
-	}
-
-	/* Inline code styling (not in pre blocks) */
-	#gordon-chat .prose code.not-prose {
-		background-color: rgb(229 231 235);
-		color: rgb(17 24 39);
-		padding: 0.2em 0.4em;
-		border-radius: 0.25rem;
-		font-family: "Roboto Mono", monospace;
-		font-size: 0.875em;
-	}
-
-	.dark #gordon-chat .prose code.not-prose {
-		background-color: rgb(55 65 81);
-		color: rgb(229 231 235);
-	}
+  /* Code block styles */
+  #gordon-chat pre {
+    background: #0d1117;
+    border-radius: 0.25rem;
+    padding: 0;
+    margin: 0.5rem 0;
+    overflow-x: auto;
+    white-space: pre;
+  }
+
+  #gordon-chat pre code {
+    background: #0d1117;
+    color: #c9d1d9;
+    padding: 1rem;
+    display: block;
+    font-family: "Roboto Mono", monospace;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    white-space: pre;
+    overflow-x: auto;
+  }
+
+  #gordon-chat pre code * {
+    white-space: pre;
+  }
+
+  /* Inline code styling (not in pre blocks) */
+  #gordon-chat .prose code.not-prose {
+    background-color: rgb(229 231 235);
+    color: rgb(17 24 39);
+    padding: 0.2em 0.4em;
+    border-radius: 0.25rem;
+    font-family: "Roboto Mono", monospace;
+    font-size: 0.875em;
+  }
+
+  .dark #gordon-chat .prose code.not-prose {
+    background-color: rgb(55 65 81);
+    color: rgb(229 231 235);
+  }
 </style>