From fbe5065ba0cf364fafcdf2ab764fd75403202280 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 1/8] 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 +
 hugo_stats.json                               |  91 ++-
 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 +
 13 files changed, 764 insertions(+), 59 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 d0d6c5d26204..ab988a04240b 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/hugo_stats.json b/hugo_stats.json
index 88e02b5a3862..e2709a5a2bf5 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -4,9 +4,11 @@
     "classes": [
       "--mount",
       "--tmpfs",
+      "-bottom-3",
       "-mt-8",
       "-top-10",
       "-top-16",
+      "-translate-y-1/2",
       "-v",
       "-z-10",
       ".NET",
@@ -92,7 +94,6 @@
       "JavaScript",
       "Jenkins",
       "Latest",
-      "Legacy-Docker-plans",
       "Legacy-Docker-subscription",
       "Linux",
       "Local-or-Hub-storage",
@@ -179,27 +180,38 @@
       "admonition-tip",
       "admonition-title",
       "admonition-warning",
+      "animate-bounce",
+      "animate-spin",
       "aspect-video",
+      "assistant",
       "bake-action",
       "bg-amber-500",
       "bg-background-toc",
       "bg-black/100",
       "bg-black/50",
       "bg-blue",
+      "bg-blue-100",
       "bg-blue-400",
+      "bg-blue-50",
       "bg-blue-500",
       "bg-blue-600",
       "bg-blue-700",
+      "bg-current",
       "bg-gray-100",
+      "bg-gray-200",
       "bg-gray-400",
       "bg-gray-50",
       "bg-gray-500",
       "bg-gray-700",
+      "bg-gray-900",
+      "bg-green-200",
       "bg-green-400",
       "bg-green-500",
       "bg-navbar-bg",
       "bg-pattern-blue",
       "bg-pattern-purple",
+      "bg-red-200",
+      "bg-red-50",
       "bg-red-500",
       "bg-violet-500",
       "bg-white",
@@ -219,10 +231,13 @@
       "border-green-400",
       "border-l-2",
       "border-l-magenta-light",
+      "border-red-200",
       "border-t",
       "border-transparent",
       "bottom-0",
+      "bottom-full",
       "breadcrumbs",
+      "break-words",
       "build-push-action",
       "button",
       "card",
@@ -239,6 +254,7 @@
       "cls-2",
       "col-start-2",
       "containerd-image-store",
+      "cursor-not-allowed",
       "cursor-pointer",
       "dark:bg-amber-400",
       "dark:bg-background-dark",
@@ -246,16 +262,22 @@
       "dark:bg-blue-400",
       "dark:bg-blue-500",
       "dark:bg-blue-800",
+      "dark:bg-blue-900",
+      "dark:bg-blue-900/50",
       "dark:bg-gray-300",
       "dark:bg-gray-400",
       "dark:bg-gray-500",
+      "dark:bg-gray-700",
       "dark:bg-gray-800",
       "dark:bg-gray-900",
       "dark:bg-gray-950",
       "dark:bg-green-700",
+      "dark:bg-green-900/50",
       "dark:bg-green-dark-400",
       "dark:bg-navbar-bg-dark",
       "dark:bg-red-400",
+      "dark:bg-red-900/20",
+      "dark:bg-red-900/50",
       "dark:bg-violet-400",
       "dark:block",
       "dark:border-b-blue-600",
@@ -265,11 +287,14 @@
       "dark:border-gray-700",
       "dark:border-green-400",
       "dark:border-l-magenta-dark",
+      "dark:border-red-800",
+      "dark:focus:border-blue-400",
       "dark:focus:ring-3-blue-dark",
       "dark:hidden",
       "dark:hover:bg-blue-400",
       "dark:hover:bg-blue-700",
       "dark:hover:bg-gray-600",
+      "dark:hover:bg-gray-700",
       "dark:hover:bg-gray-900",
       "dark:hover:text-blue",
       "dark:outline-gray-800",
@@ -278,23 +303,34 @@
       "dark:ring-3-gray-dark-400",
       "dark:syntax-dark",
       "dark:text-blue",
+      "dark:text-blue-400",
       "dark:text-blue-700",
       "dark:text-divider-dark",
+      "dark:text-gray-100",
       "dark:text-gray-200",
       "dark:text-gray-300",
       "dark:text-gray-400",
       "dark:text-gray-500",
       "dark:text-gray-600",
       "dark:text-gray-800",
+      "dark:text-green-400",
       "dark:text-magenta-dark",
+      "dark:text-red-400",
       "dark:text-white",
+      "disabled:cursor-not-allowed",
+      "disabled:opacity-50",
       "docker/bake-action",
       "docker/build-push-action",
       "download-links",
       "download-links-subcontainer",
       "drop-shadow",
       "dropdown-base",
+      "duration-100",
+      "duration-200",
       "duration-300",
+      "duration-75",
+      "ease-in",
+      "ease-out",
       "fixed",
       "flex",
       "flex-1",
@@ -306,10 +342,13 @@
       "flex-shrink",
       "flex-shrink-0",
       "flex-wrap",
+      "focus:border-blue-500",
       "focus:outline-none",
       "focus:ring",
+      "focus:ring-2",
       "focus:ring-3-blue-light",
       "focus:ring-blue-400",
+      "focus:ring-blue-500/20",
       "font-bold",
       "font-medium",
       "font-normal",
@@ -351,6 +390,7 @@
       "hover:bg-blue-400",
       "hover:bg-blue-500",
       "hover:bg-blue-600",
+      "hover:bg-blue-700",
       "hover:bg-blue-800",
       "hover:bg-gray-100",
       "hover:bg-gray-200",
@@ -360,12 +400,16 @@
       "hover:dark:bg-gray-800",
       "hover:dark:text-blue-400",
       "hover:dark:text-blue-700",
+      "hover:opacity-70",
+      "hover:opacity-80",
       "hover:opacity-90",
       "hover:text-blue",
+      "hover:text-white",
       "hover:underline",
       "icon-lg",
       "icon-sm",
       "icon-svg",
+      "icon-xs",
       "inline",
       "inline-block",
       "inline-flex",
@@ -378,7 +422,9 @@
       "justify-between",
       "justify-center",
       "justify-end",
+      "justify-start",
       "leading-none",
+      "leading-normal",
       "leading-snug",
       "leading-tight",
       "left-0",
@@ -410,6 +456,7 @@
       "max-w-[1920px]",
       "max-w-full",
       "max-w-none",
+      "max-w-sm",
       "mb-1",
       "mb-1.5",
       "mb-2",
@@ -424,16 +471,21 @@
       "md:flex-row",
       "md:grid-cols-2",
       "md:h-[334px]",
+      "md:h-[calc(100vh-1rem)]",
       "md:h-[calc(100vh-64px)]",
       "md:hidden",
       "md:max-w-[66%]",
+      "md:right-2",
       "md:sticky",
       "md:text-base",
       "md:text-sm",
       "md:top-16",
+      "md:top-2",
       "md:w-[300px]",
       "md:w-[320px]",
+      "md:w-[min(70ch,90vw)]",
       "md:z-auto",
+      "min-h-[3rem]",
       "min-h-screen",
       "min-w-0",
       "min-w-48",
@@ -460,10 +512,14 @@
       "navbar-font",
       "navbar-group",
       "navbar-group-font-title",
+      "negative",
       "no-underline",
       "no-wrap",
       "not-prose",
       "object-cover",
+      "opacity-0",
+      "opacity-100",
+      "opacity-50",
       "open-kapa-widget",
       "openSUSE-and-SLES",
       "origin-bottom-right",
@@ -481,7 +537,9 @@
       "overflow-x-hidden",
       "overflow-y-auto",
       "p-1",
+      "p-1.5",
       "p-2",
+      "p-2.5",
       "p-3",
       "p-4",
       "p-6",
@@ -497,8 +555,11 @@
       "pl-4",
       "pl-5",
       "placeholder-blue-300",
+      "positive",
       "pr-2",
+      "pr-24",
       "prose",
+      "prose-sm",
       "pt-2",
       "pt-20",
       "pt-4",
@@ -511,12 +572,16 @@
       "py-0.5",
       "py-1",
       "py-2",
+      "py-2.5",
+      "py-3",
       "py-4",
       "py-8",
       "py-[0.5625rem]",
       "relative",
+      "resize-none",
       "right-0",
       "right-2",
+      "right-4",
       "right-8",
       "ring-3-2",
       "ring-3-[1.5px]",
@@ -524,11 +589,15 @@
       "ring-3-gray-light-200",
       "rotate-45",
       "rounded",
+      "rounded-b-lg",
       "rounded-full",
       "rounded-lg",
       "rounded-md",
       "rounded-sm",
+      "rounded-t-lg",
+      "scale-100",
       "scale-50",
+      "scale-95",
       "scroll-mt-2",
       "scroll-mt-20",
       "scroll-mt-36",
@@ -539,12 +608,16 @@
       "select-none",
       "self-center",
       "self-start",
+      "self-stretch",
       "shadow",
+      "shadow-2xl",
+      "shadow-lg",
       "shadow-md",
       "shimmer",
       "sm:block",
       "sm:flex-row",
       "sm:hidden",
+      "sm:inline",
       "sm:items-center",
       "social",
       "space-y-2",
@@ -563,7 +636,9 @@
       "text-base",
       "text-black",
       "text-blue",
+      "text-blue-600",
       "text-blue-light",
+      "text-center",
       "text-divider-light",
       "text-gray-200",
       "text-gray-300",
@@ -572,26 +647,38 @@
       "text-gray-600",
       "text-gray-700",
       "text-gray-800",
+      "text-gray-900",
+      "text-green-600",
+      "text-green-700",
       "text-left",
       "text-lg",
       "text-magenta-light",
-      "text-md",
+      "text-red-700",
+      "text-red-800",
       "text-sm",
       "text-white",
+      "text-white/80",
       "text-xl",
       "text-xs",
       "toc",
       "top-0",
       "top-1",
+      "top-1/2",
       "top-16",
       "top-6",
       "topbar-button",
       "transition",
+      "transition-all",
       "transition-colors",
+      "transition-opacity",
       "transition-transform",
+      "translate-x-0",
+      "translate-x-full",
       "truncate",
+      "user",
       "w-2",
       "w-5",
+      "w-56",
       "w-64",
       "w-65",
       "w-8",
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 32062fd611e754b4315f860779f93b15449dad9d 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 2/8] 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 35832a0d6e32d1dbc3b8dd0eb768da7e5bf7eeda 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 3/8] 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 ceafb32bada19459d758ff7b53a1903ff54fc6f8 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 4/8] 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>
---
 hugo_stats.json                   |  5 +----
 layouts/partials/gordon-chat.html | 11 ++++-------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/hugo_stats.json b/hugo_stats.json
index e2709a5a2bf5..49502bf989e3 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -183,7 +183,6 @@
       "animate-bounce",
       "animate-spin",
       "aspect-video",
-      "assistant",
       "bake-action",
       "bg-amber-500",
       "bg-background-toc",
@@ -237,7 +236,6 @@
       "bottom-0",
       "bottom-full",
       "breadcrumbs",
-      "break-words",
       "build-push-action",
       "button",
       "card",
@@ -306,7 +304,6 @@
       "dark:text-blue-400",
       "dark:text-blue-700",
       "dark:text-divider-dark",
-      "dark:text-gray-100",
       "dark:text-gray-200",
       "dark:text-gray-300",
       "dark:text-gray-400",
@@ -483,7 +480,7 @@
       "md:top-2",
       "md:w-[300px]",
       "md:w-[320px]",
-      "md:w-[min(70ch,90vw)]",
+      "md:w-[min(80ch,90vw)]",
       "md:z-auto",
       "min-h-[3rem]",
       "min-h-screen",
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 dd6e5462000b33a1c1f63aad55e2db0b51c2dfd8 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 5/8] 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 046867b4ab187ac3555966bb7f9952d72141cdb0 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 6/8] site(gordon): make page context switch prettier

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 hugo_stats.json                   |  9 ++---
 layouts/partials/gordon-chat.html | 61 ++++++++++++++++---------------
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/hugo_stats.json b/hugo_stats.json
index 49502bf989e3..5a08dd78a53e 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -8,7 +8,6 @@
       "-mt-8",
       "-top-10",
       "-top-16",
-      "-translate-y-1/2",
       "-v",
       "-z-10",
       ".NET",
@@ -261,7 +260,6 @@
       "dark:bg-blue-500",
       "dark:bg-blue-800",
       "dark:bg-blue-900",
-      "dark:bg-blue-900/50",
       "dark:bg-gray-300",
       "dark:bg-gray-400",
       "dark:bg-gray-500",
@@ -301,6 +299,7 @@
       "dark:ring-3-gray-dark-400",
       "dark:syntax-dark",
       "dark:text-blue",
+      "dark:text-blue-200",
       "dark:text-blue-400",
       "dark:text-blue-700",
       "dark:text-divider-dark",
@@ -406,6 +405,7 @@
       "icon-lg",
       "icon-sm",
       "icon-svg",
+      "icon-svg-stroke",
       "icon-xs",
       "inline",
       "inline-block",
@@ -425,6 +425,7 @@
       "leading-snug",
       "leading-tight",
       "left-0",
+      "left-4",
       "lg:absolute",
       "lg:block",
       "lg:border-none",
@@ -554,7 +555,6 @@
       "placeholder-blue-300",
       "positive",
       "pr-2",
-      "pr-24",
       "prose",
       "prose-sm",
       "pt-2",
@@ -578,7 +578,6 @@
       "resize-none",
       "right-0",
       "right-2",
-      "right-4",
       "right-8",
       "ring-3-2",
       "ring-3-[1.5px]",
@@ -614,7 +613,6 @@
       "sm:block",
       "sm:flex-row",
       "sm:hidden",
-      "sm:inline",
       "sm:items-center",
       "social",
       "space-y-2",
@@ -660,7 +658,6 @@
       "toc",
       "top-0",
       "top-1",
-      "top-1/2",
       "top-16",
       "top-6",
       "topbar-button",
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 3fb0787b9fcaa1a5a90f7d25b8d5250b64942544 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 7/8] 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 39571c3cf168024c5170059265030b312d0ac926 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 8/8] site(gordon): always show message actions, add error
 handling

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 hugo_stats.json                   |  2 +-
 layouts/partials/gordon-chat.html | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/hugo_stats.json b/hugo_stats.json
index 5a08dd78a53e..e9c345e66876 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -405,7 +405,6 @@
       "icon-lg",
       "icon-sm",
       "icon-svg",
-      "icon-svg-stroke",
       "icon-xs",
       "inline",
       "inline-block",
@@ -648,6 +647,7 @@
       "text-left",
       "text-lg",
       "text-magenta-light",
+      "text-red-600",
       "text-red-700",
       "text-red-800",
       "text-sm",
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>