From 808d64c8115ca058665805d02a937f146c375531 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] site: use gordon for ask ai

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 assets/css/style.css              |   1 +
 assets/js/src/alpine.js           |  80 ++++-
 hugo.yaml                         |   3 +
 hugo_stats.json                   |  64 ++++
 layouts/_default/baseof.html      |   6 +-
 layouts/index.html                |   1 +
 layouts/partials/gordon-chat.html | 538 ++++++++++++++++++++++++++++++
 layouts/partials/head.html        |  53 ---
 layouts/partials/header.html      |   5 +-
 layouts/partials/search-bar.html  |   7 +-
 package-lock.json                 |  23 ++
 package.json                      |   2 +
 12 files changed, 723 insertions(+), 60 deletions(-)
 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/assets/js/src/alpine.js b/assets/js/src/alpine.js
index cdcdfeb93055..0e2f57e0b6d0 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).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 956b5ef633d4..304662b32459 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 2af0050fd096..2f4d5925775f 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -174,6 +174,11 @@
       "admonition-tip",
       "admonition-title",
       "admonition-warning",
+      "align-middle",
+      "align-text-bottom",
+      "animate-bounce",
+      "animate-pulse",
+      "animate-spin",
       "aspect-video",
       "bake-action",
       "bg-amber-500",
@@ -181,9 +186,12 @@
       "bg-black/100",
       "bg-black/50",
       "bg-blue",
+      "bg-blue-100",
       "bg-blue-400",
+      "bg-blue-50",
       "bg-blue-500",
       "bg-blue-600",
+      "bg-current",
       "bg-gradient-to-br",
       "bg-gray-100",
       "bg-gray-400",
@@ -195,6 +203,7 @@
       "bg-pattern-blue",
       "bg-pattern-purple",
       "bg-pattern-verde",
+      "bg-red-50",
       "bg-red-500",
       "bg-violet-500",
       "bg-white",
@@ -214,10 +223,12 @@
       "border-l-2",
       "border-l-magenta-light",
       "border-none",
+      "border-red-200",
       "border-t",
       "border-transparent",
       "bottom-0",
       "breadcrumbs",
+      "break-words",
       "build-push-action",
       "button",
       "card",
@@ -234,6 +245,7 @@
       "cls-2",
       "col-start-2",
       "containerd-image-store",
+      "cursor-not-allowed",
       "cursor-pointer",
       "dark:bg-amber-400",
       "dark:bg-background-dark",
@@ -242,6 +254,7 @@
       "dark:bg-blue-400",
       "dark:bg-blue-500",
       "dark:bg-blue-800",
+      "dark:bg-blue-900",
       "dark:bg-gray-300",
       "dark:bg-gray-500",
       "dark:bg-gray-800",
@@ -251,6 +264,7 @@
       "dark:bg-green-dark-400",
       "dark:bg-navbar-bg-dark",
       "dark:bg-red-400",
+      "dark:bg-red-900/20",
       "dark:bg-violet-400",
       "dark:block",
       "dark:border-b-blue-600",
@@ -260,6 +274,8 @@
       "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:from-blue-300",
       "dark:hidden",
@@ -267,6 +283,7 @@
       "dark:hover:bg-blue-500",
       "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",
@@ -275,24 +292,32 @@
       "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",
+      "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-magenta-dark",
+      "dark:text-red-400",
       "dark:text-white",
       "dark:to-blue-400",
+      "disabled:cursor-not-allowed",
+      "disabled:opacity-50",
       "docker/bake-action",
       "docker/build-push-action",
       "download-links",
       "download-links-subcontainer",
       "drop-shadow",
       "dropdown-base",
+      "duration-200",
       "duration-300",
+      "ease-in",
+      "ease-out",
       "fixed",
       "flex",
       "flex-1",
@@ -304,8 +329,11 @@
       "flex-shrink",
       "flex-shrink-0",
       "flex-wrap",
+      "focus:border-blue-500",
       "focus:outline-none",
+      "focus:ring-2",
       "focus:ring-3-blue-light",
+      "focus:ring-blue-500/20",
       "font-bold",
       "font-medium",
       "font-normal",
@@ -334,6 +362,7 @@
       "h-16",
       "h-2",
       "h-32",
+      "h-4",
       "h-48",
       "h-5",
       "h-6",
@@ -348,6 +377,7 @@
       "highlight",
       "hover:bg-blue-400",
       "hover:bg-blue-500",
+      "hover:bg-blue-700",
       "hover:bg-gray-100",
       "hover:bg-gray-200",
       "hover:bg-gray-50",
@@ -358,6 +388,7 @@
       "hover:opacity-80",
       "hover:opacity-90",
       "hover:text-blue",
+      "hover:text-white",
       "hover:underline",
       "icon-lg",
       "icon-sm",
@@ -375,6 +406,7 @@
       "justify-between",
       "justify-center",
       "justify-end",
+      "justify-start",
       "leading-none",
       "leading-snug",
       "leading-tight",
@@ -402,8 +434,10 @@
       "max-w-4xl",
       "max-w-56",
       "max-w-[1920px]",
+      "max-w-[85%]",
       "max-w-full",
       "max-w-none",
+      "max-w-sm",
       "mb-1",
       "mb-1.5",
       "mb-2",
@@ -413,26 +447,38 @@
       "md-dropdown",
       "md:block",
       "md:border-none",
+      "md:bottom-2",
       "md:flex",
       "md:flex-nowrap",
       "md:flex-row",
       "md:grid-cols-2",
       "md:h-[334px]",
+      "md:h-[600px]",
+      "md:h-[calc(100vh-1rem)]",
       "md:h-[calc(100vh-64px)]",
       "md:hidden",
       "md:max-w-[66%]",
+      "md:right-2",
       "md:scale-100",
       "md:sticky",
       "md:text-base",
       "md:text-sm",
       "md:top-16",
+      "md:top-2",
+      "md:top-auto",
       "md:w-[300px]",
       "md:w-[320px]",
+      "md:w-[400px]",
+      "md:w-[500px]",
+      "md:w-[clamp(400px,30vw,500px)]",
+      "md:w-[min(500px,30vw)]",
+      "md:w-[min(900px,90vw)]",
       "md:z-auto",
       "min-h-screen",
       "min-w-0",
       "min-w-48",
       "min-w-52",
+      "ml-0.5",
       "ml-2",
       "ml-3",
       "ml-4",
@@ -442,6 +488,7 @@
       "mt-2",
       "mt-20",
       "mt-4",
+      "mt-6",
       "mt-8",
       "mt-[2px]",
       "mx-1",
@@ -458,6 +505,7 @@
       "no-wrap",
       "not-prose",
       "object-cover",
+      "opacity-50",
       "open-kapa-widget",
       "openSUSE-and-SLES",
       "origin-bottom-right",
@@ -493,16 +541,19 @@
       "pl-5",
       "pr-2",
       "prose",
+      "prose-sm",
       "pt-2",
       "pt-4",
       "px-1",
       "px-2",
       "px-3",
       "px-4",
+      "px-6",
       "py-0.5",
       "py-1",
       "py-2",
       "py-20",
+      "py-3",
       "py-4",
       "py-8",
       "relative",
@@ -515,9 +566,12 @@
       "ring-3-gray-light-200",
       "rotate-45",
       "rounded",
+      "rounded-b-lg",
       "rounded-full",
+      "rounded-lg",
       "rounded-md",
       "rounded-sm",
+      "rounded-t-lg",
       "scale-50",
       "scale-75",
       "scroll-mt-2",
@@ -531,6 +585,7 @@
       "self-center",
       "self-start",
       "shadow",
+      "shadow-2xl",
       "shadow-md",
       "sm:block",
       "sm:flex-row",
@@ -553,7 +608,9 @@
       "text-base",
       "text-black",
       "text-blue",
+      "text-blue-600",
       "text-blue-light",
+      "text-center",
       "text-divider-light",
       "text-gray",
       "text-gray-200",
@@ -563,11 +620,14 @@
       "text-gray-600",
       "text-gray-700",
       "text-gray-800",
+      "text-gray-900",
       "text-left",
       "text-lg",
       "text-magenta-light",
+      "text-red-800",
       "text-sm",
       "text-white",
+      "text-white/80",
       "text-xl",
       "text-xs",
       "to-blue-200",
@@ -579,10 +639,14 @@
       "topbar-button",
       "topbar-button-clear",
       "transition",
+      "transition-all",
       "transition-colors",
       "transition-opacity",
       "transition-transform",
+      "translate-x-0",
+      "translate-x-full",
       "truncate",
+      "w-1",
       "w-2",
       "w-5",
       "w-65",
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 66cdeeff550b..8ddbf7cdcd36 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
@@ -52,8 +53,9 @@
           <!-- Top nav buttons appear here on sm width -->
           <div class="flex flex-col gap-2 md:hidden mb-4">
             <button
-              @click="open = false"
-              class="topbar-button open-kapa-widget w-full flex items-center gap-2"
+              x-data
+              @click="$store.gordon.toggle(); $store.showSidebar = false"
+              class="topbar-button w-full flex items-center gap-2"
             >
               <span>Ask&nbsp;AI</span>
               <span class="icon-svg">
diff --git a/layouts/index.html b/layouts/index.html
index 59b38da9e6be..2362c7733052 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -33,6 +33,7 @@
       </svg>
     </div>
     {{ partial "header.html" . }}
+    {{ partial "gordon-chat.html" . }}
     <main class="flex min-h-screen w-full flex-col items-stretch self-center">
       <div
         class="flex w-full flex-col items-stretch gap-20 self-center px-4 py-20 xl:w-[1200px]"
diff --git a/layouts/partials/gordon-chat.html b/layouts/partials/gordon-chat.html
new file mode 100644
index 000000000000..ef4612679337
--- /dev/null
+++ b/layouts/partials/gordon-chat.html
@@ -0,0 +1,538 @@
+<!-- Gordon AI Chat Panel -->
+<div x-data="{
+    isLoading: false,
+    error: null,
+    messages: [],
+    currentQuestion: '',
+    threadId: $persist(null).as('gordon-threadId'),
+    isMinimized: $persist(false).as('gordon-isMinimized'),
+
+    init() {
+      // Load chat history from session storage
+      const savedMessages = sessionStorage.getItem('gordon-messages')
+      if (savedMessages) {
+        try {
+          this.messages = JSON.parse(savedMessages)
+        } catch (e) {
+          console.error('Failed to load chat history:', e)
+        }
+      }
+
+      // 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 = ''
+      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
+        this.saveChatHistory()
+      }
+    },
+
+    async streamGordonResponse(responseIndex) {
+      const getGordonEndpoint = () => {
+        const hostname = window.location.hostname
+        if (hostname === 'docs.docker.com') {
+          return 'https://ai-backend-service.docker.com/public/ask'
+		} else if (hostname === 'localhost') {
+          // use local svc if we're running on localhost... for now.
+          return 'http://localhost:8000/public/ask'
+		}
+        return 'https://ai-backend-service-stage.docker.com/public/ask'
+      }
+
+      const 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
+      }
+
+      // 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: getSessionId(),
+                action: 'AskGordon'
+              }
+            }
+          ]
+        }
+
+        return message
+      })
+
+      const payload = {
+        messages: conversationMessages
+      }
+
+      // Include thread_id if we have one (for continuing conversation)
+      if (this.threadId) {
+        payload.thread_id = this.threadId
+      }
+
+      const response = await fetch(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)
+
+            if (parsed.thread_id) {
+              this.threadId = 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 = []
+        this.threadId = null
+        this.error = null
+        sessionStorage.removeItem('gordon-messages')
+      }
+    },
+
+    saveChatHistory() {
+      try {
+        const messagesToSave = this.messages.filter(m => !m.isStreaming)
+        sessionStorage.setItem('gordon-messages', JSON.stringify(messagesToSave))
+      } catch (e) {
+        console.error('Failed to save chat history:', e)
+      }
+    },
+
+    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
+      }
+
+      // Allow changing feedback (API should be idempotent)
+      if (message.feedback === feedbackType) {
+        return
+      }
+
+      const getFeedbackEndpoint = () => {
+        const hostname = window.location.hostname
+        if (hostname === 'docs.docker.com') {
+          return 'https://ai-backend-service.docker.com/feedback'
+        } else if (hostname === 'localhost') {
+          return 'http://localhost:8000/feedback'
+        }
+        return 'https://ai-backend-service-stage.docker.com/feedback'
+      }
+
+      try {
+        const response = await fetch(getFeedbackEndpoint(), {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            id: message.questionAnswerId,
+            feedback: feedbackType
+          })
+        })
+
+        if (response.ok) {
+          message.feedback = feedbackType
+          this.saveChatHistory()
+        } 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 && !isMinimized" x-transition.opacity.duration.300ms @click="isMinimized = true"
+		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="isMinimized ? 'md:w-[clamp(400px,30vw,500px)] md:h-[600px] md:top-auto md:bottom-2 md:right-2' : 'md:w-[min(900px,90vw)] md:h-[calc(100vh-1rem)] md:top-2 md:right-2'"
+		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 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">
+				<span class="icon-svg text-white">
+					{{ partialCached "icon" "icons/sparkle.svg" "icons/sparkle.svg" }}
+				</span>
+				<h2 class="text-lg font-semibold text-white">Ask AI</h2>
+			</div>
+			<div class="flex items-center gap-2">
+				<button @click="isMinimized = !isMinimized" :title="isMinimized ? 'Expand' : 'Minimize'"
+					class="cursor-pointer rounded p-2 text-white/80 transition-colors hover:bg-blue-500 hover:text-white">
+					<span x-show="isMinimized" class="icon-svg">
+						{{ partialCached "icon" "fullscreen" "fullscreen" }}
+					</span>
+					<span x-show="!isMinimized" class="icon-svg">
+						{{ partialCached "icon" "fullscreen_exit" "fullscreen_exit" }}
+					</span>
+				</button>
+				<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-[85%] 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 gap-2">
+				<input x-ref="input" x-model="currentQuestion" type="text" placeholder="Ask a question about Docker..."
+					:disabled="isLoading"
+					class="flex-1 rounded-lg border border-gray-300 px-4 py-3 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" />
+				<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 7338b1e12f4f..0be30c178630 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -49,8 +49,9 @@
       <!-- Hide on small screens, show on md+ -->
       <div class="hidden md:flex items-center gap-3">
         <button
-          @click="open = false"
-          class="topbar-button open-kapa-widget"
+          x-data
+          @click="$store.gordon.toggle()"
+          class="topbar-button"
         >
           <span class="hidden lg:inline">Ask&nbsp;AI</span>
           <span class="icon-svg">
diff --git a/layouts/partials/search-bar.html b/layouts/partials/search-bar.html
index 5d571e051c5a..760ef8a674fa 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": {