docs: added kapa logo + link to mcp server (#14005)

www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Footer/index.tsx

@@ -1,27 +1,36 @@
 import React from "react"
 import clsx from "clsx"
 import { Kbd } from "../../../Kbd"
+import { KapaIcon } from "../../../Icons/Kapa"
+import { Tooltip } from "../../../Tooltip"
 
 export const AiAssistantChatWindowFooter = () => {
   return (
     <div
       className={clsx(
         "bg-medusa-bg-component border-t border-medusa-border-base",
-        "flex items-center justify-end gap-docs_0.75 text-compact-x-small",
+        "flex items-center justify-between gap-docs_0.75 text-compact-x-small",
         "py-docs_0.75 px-docs_1"
       )}
     >
-      <span className="text-medusa-fg-muted">Chat is cleared on refresh</span>
-      <span className="h-docs_0.75 w-px bg-medusa-border-base"></span>
-      <div className="flex items-center gap-docs_0.5">
-        <span className="text-medusa-fg-subtle">Line break</span>
-        <div className="flex items-center gap-[5px]">
-          <Kbd className="bg-medusa-bg-field-component border-medusa-border-strong w-[18px] h-[18px] inline-block p-0">
-            ⇧
-          </Kbd>
-          <Kbd className="bg-medusa-bg-field-component border-medusa-border-strong w-[18px] h-[18px] inline-block p-0">
-            ↵
-          </Kbd>
+      <Tooltip text="Powered by Kapa.ai">
+        <a href="https://kapa.ai" target="_blank" rel="noreferrer">
+          <KapaIcon className="text-medusa-fg-disabled hover:text-medusa-fg-muted transition-colors" />
+        </a>
+      </Tooltip>
+      <div className="flex items-center justify-end gap-docs_0.75">
+        <span className="text-medusa-fg-muted">Chat is cleared on refresh</span>
+        <span className="h-docs_0.75 w-px bg-medusa-border-base"></span>
+        <div className="flex items-center gap-docs_0.5">
+          <span className="text-medusa-fg-subtle">Line break</span>
+          <div className="flex items-center gap-[5px]">
+            <Kbd className="bg-medusa-bg-field-component border-medusa-border-strong w-[18px] h-[18px] inline-block p-0">
+              ⇧
+            </Kbd>
+            <Kbd className="bg-medusa-bg-field-component border-medusa-border-strong w-[18px] h-[18px] inline-block p-0">
+              ↵
+            </Kbd>
+          </div>
         </div>
       </div>
     </div>

www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Input/index.tsx

@@ -158,7 +158,7 @@ export const AiAssistantChatWindowInput = ({
           placeholder="Ask me a question about Medusa..."
           disabled={loading}
         />
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-end gap-docs_1">
           <Tooltip
             tooltipChildren={
               <span>

www/packages/docs-ui/src/components/AiAssistant/Suggestions/index.tsx

@@ -5,10 +5,15 @@ import { SearchSuggestionType } from "../../Search/Suggestions"
 import { SearchHitGroupName } from "../../Search/Hits/GroupName"
 import { SearchSuggestionItem } from "../../Search/Suggestions/Item"
 import { useChat } from "@kapaai/react-sdk"
+import { Link } from "../../Link"
+import { useSiteConfig } from "../../../providers"
 
 type AiAssistantSuggestionsProps = React.AllHTMLAttributes<HTMLDivElement>
 
 export const AiAssistantSuggestions = (props: AiAssistantSuggestionsProps) => {
+  const {
+    config: { baseUrl },
+  } = useSiteConfig()
   const { submitQuery } = useChat()
   const suggestions: SearchSuggestionType[] = [
     {
@@ -34,6 +39,18 @@ export const AiAssistantSuggestions = (props: AiAssistantSuggestionsProps) => {
 
   return (
     <div {...props}>
+      <span className="text-medusa-fg-muted text-compact-small px-docs_0.5 py-docs_0.75 block">
+        Ask any questions about Medusa. Get help with your development.
+        <br />
+        You can also use the{" "}
+        <Link
+          href={`${baseUrl}/learn/introduction/build-with-llms-ai#mcp-remote-server`}
+          variant="content"
+        >
+          Medusa MCP server
+        </Link>{" "}
+        in Cursor, VSCode, etc...
+      </span>
       {suggestions.map((suggestion, index) => (
         <React.Fragment key={index}>
           <SearchHitGroupName name={suggestion.title} />

www/packages/docs-ui/src/components/Icons/Kapa/index.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const KapaIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20 5C20 2.23857 17.7614 0 15 0H5C2.23857 0 0 2.23857 0 5V15C0 17.7614 2.23857 20 5 20H15C17.7614 20 20 17.7614 20 15V5ZM8.39555 15.0667C8.4692 15.0667 8.5289 15.007 8.5289 14.9334V11.9801C8.5289 11.9064 8.5886 11.8467 8.66225 11.8467H9.7944C9.8414 11.8467 9.88495 11.8714 9.909 11.9118L11.7477 15.0015C11.7717 15.0419 11.8152 15.0667 11.8622 15.0667H14.5443C14.6486 15.0667 14.7125 14.9525 14.658 14.8637L11.9881 10.5123C11.9608 10.4677 11.962 10.4112 11.9914 10.3679L14.6593 6.42415C14.7192 6.3356 14.6558 6.2161 14.5489 6.2161H11.8788C11.8322 6.2161 11.7891 6.24045 11.7649 6.28025L9.8569 9.42475C9.8327 9.46455 9.7895 9.4889 9.7429 9.4889H8.66225C8.5886 9.4889 8.5289 9.4292 8.5289 9.35555V4.4667C8.5289 4.39307 8.4692 4.33337 8.39555 4.33337H6.0667C5.99305 4.33337 5.93335 4.39307 5.93335 4.4667V14.9334C5.93335 15.007 5.99305 15.0667 6.0667 15.0667H8.39555Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}