add AI search (test)

Author: ylxmf2005

docusaurus.config.ts

@@ -8,13 +8,9 @@ const config: Config = {
   title: "Open LLM Vtuber",
   tagline: "与你的专属 Live2D AI 虚拟伴侣进行实时语音互动",
   customFields: {
+    mendableAnonKey: "e9107444-aa01-467d-8ad2-f19b9dff4f83",
     thirdline: "支持所有主流大语言模型，跨平台运行",
-    showcaseImages: [
-      'img/i1.jpg',
-      'img/i2.jpg',
-      'img/i3.jpg',
-      'img/i4.jpg',
-    ],
+    showcaseImages: ["img/i1.jpg", "img/i2.jpg", "img/i3.jpg", "img/i4.jpg"],
   },
   favicon: "img/favicon.ico",
 

package-lock.json

@@ -19,6 +19,7 @@
     "@docusaurus/preset-classic": "^3.7.0",
     "@docusaurus/theme-mermaid": "^3.7.0",
     "@docusaurus/theme-search-algolia": "^3.7.0",
+    "@mendable/search": "^0.0.206",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",

package.json

@@ -28,3 +28,22 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+/* Reduce width on mobile for Mendable Search */
+@media (max-width: 767px) {
+  .mendable-search {
+    width: 200px;
+  }
+}
+
+@media (max-width: 500px) {
+  .mendable-search {
+    width: 150px;
+  }
+}
+
+@media (max-width: 380px) {
+  .mendable-search {
+    width: 140px;
+  }
+}

src/css/custom.css

@@ -0,0 +1,25 @@
+import React, {type ReactNode} from 'react';
+import Footer from '@theme-original/Footer';
+import type FooterType from '@theme/Footer';
+import type {WrapperProps} from '@docusaurus/types';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { MendableFloatingButton } from '@mendable/search';
+
+/**
+ * Footer wrapper component that adds the Mendable floating button
+ * This enables users to access AI chat functionality from any page
+ */
+type Props = WrapperProps<typeof FooterType>;
+
+export default function FooterWrapper(props: Props): ReactNode {
+  const {
+    siteConfig: { customFields },
+  } = useDocusaurusContext();
+
+  return (
+    <>
+      <MendableFloatingButton anon_key={customFields.mendableAnonKey as string} />
+      <Footer {...props} />
+    </>
+  );
+}

src/theme/Footer/index.tsx

@@ -0,0 +1,31 @@
+// By default, the classic theme does not provide any SearchBar implementation
+// If you swizzled this, it is your responsibility to provide an implementation
+// Tip: swizzle the SearchBar from the Algolia theme for inspiration:
+// npm run swizzle @docusaurus/theme-search-algolia SearchBar
+
+import React from 'react';
+import { MendableSearchBar } from '@mendable/search';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+/**
+ * Mendable AI search bar component
+ * This component integrates Mendable's AI-powered search functionality with keyword search
+ * Users can type to see immediate keyword search results or ask AI questions
+ */
+export default function SearchBar(): JSX.Element {
+  const {
+    siteConfig: { customFields },
+  } = useDocusaurusContext();
+
+  return (
+    <div className="mendable-search">
+      <MendableSearchBar
+        anon_key={customFields.mendableAnonKey as string}
+        style={{ accentColor: '#25c2a0', darkMode: false }}
+        placeholder="Search..."
+        dialogPlaceholder="Ask me anything about Open LLM VTuber..."
+        showSimpleSearch={true}
+      />
+    </div>
+  );
+}