From 4d832b956f9f0edc21cdd2fc6d6b80e7b8e2afdd Mon Sep 17 00:00:00 2001 From: Saurav Panda Date: Tue, 10 Dec 2024 23:27:31 -0800 Subject: [PATCH] fix: ai search --- docs/public/context/en_docs.txt | 276 +++++++++---------- docs/src/app/aiSearch/page.tsx | 67 +++-- packages/akiradocs/src/app/aiSearch/page.tsx | 32 ++- 3 files changed, 198 insertions(+), 177 deletions(-) diff --git a/docs/public/context/en_docs.txt b/docs/public/context/en_docs.txt index fb064c6..bd23552 100644 --- a/docs/public/context/en_docs.txt +++ b/docs/public/context/en_docs.txt @@ -474,6 +474,55 @@ Code example: }, } ------------- +[Document: docs/guides/analytics.json] +Title: Analytics Integration +Learn how to add analytics tracking to your documentation +AkiraDocs supports Google Analytics 4 (GA4) out of the box. This guide will help you set up analytics tracking for your documentation. +Setting up Google Analytics +1. Create a Google Analytics 4 property in your [Google Analytics account](https://analytics.google.com/) +2. Get your Measurement ID (starts with "G-") +3. Add the ID to your `akiradocs.config.json`: +Code example: +{ +"analytics": { +"google": { +"measurementId": "G-XXXXXXXXXX", +"enabled": true +}, +"debug": false +} +} +What's Tracked Automatically +Page views +Navigation between pages +Time on page +User language preferences +Device and browser information +Custom Event Tracking +You can track custom events using the `useAnalytics` hook: +Code example: +import { useAnalytics } from '@/hooks/useAnalytics' +function MyComponent() { + const { track } = useAnalytics() + const handleClick = () => { + track('doc_rating', { + rating: 5, + page: 'getting-started', + helpful: true + }) + } + return +} +Debug Mode +Enable debug mode to see analytics events in the console during development: +Code example: +{ +"analytics": { +"debug": true +} +} +This provides a complete analytics integration that's easy for users to set up and extend as needed. +------------- [Document: docs/getting-started/requirements.json] Title: System Requirements Before installing AkiraDocs, ensure your environment meets the following requirements. @@ -582,54 +631,98 @@ Code example: ✓ Docusaurus ✓ ReadTheDocs ------------- -[Document: docs/guides/analytics.json] -Title: Analytics Integration -Learn how to add analytics tracking to your documentation -AkiraDocs supports Google Analytics 4 (GA4) out of the box. This guide will help you set up analytics tracking for your documentation. -Setting up Google Analytics -1. Create a Google Analytics 4 property in your [Google Analytics account](https://analytics.google.com/) -2. Get your Measurement ID (starts with "G-") -3. Add the ID to your `akiradocs.config.json`: +[Document: docs/editor/overview.json] +Title: Editor Overview +AkiraDocs features a modern, Notion-like editor that combines the simplicity of block-based editing with the power of Markdown. +Editor Interface +Main Components +Toolbar: Quick access to formatting options and block types +Content Area: Block-based editing space +Sidebar: Navigation and document structure +Command Palette: Quick commands (Ctrl/Cmd + P) +Block Structure +Each content element is a block that can be: +Dragged and dropped to reorganize +Converted between different types +Duplicated or deleted +Nested within other blocks +Getting Started +Creating Content +1. Click the '+' button or press '/' to add a new block +2. Choose block type from the popup menu +3. Start typing or add content +Basic Operations Code example: -{ -"analytics": { -"google": { -"measurementId": "G-XXXXXXXXXX", -"enabled": true -}, -"debug": false -} -} -What's Tracked Automatically -Page views -Navigation between pages -Time on page -User language preferences -Device and browser information -Custom Event Tracking -You can track custom events using the `useAnalytics` hook: +/ → Open block menu +⌘/Ctrl + P → Command palette +⌘/Ctrl + / → Show keyboard shortcuts +↑↓ → Navigate between blocks +Block Types +Text Blocks +Paragraphs +Headings (H1-H6) +Lists (Bulleted, Numbered) +Quotes +Callouts +Rich Media +Images +Videos +Embeds +Files +Code blocks +Special Blocks +Tables (Coming Soon) +Dividers +Custom components (Coming Soon) +------------- +[Document: docs/editor/features.json] +Title: Editor Features +Detailed overview of AkiraDocs editor capabilities and features. +Block System +Text Formatting +Basic Formatting +Bold, italic, underline +Strikethrough +Highlight +Code inline +Advanced Formatting +Custom colors +Multiple fonts +Text alignment +Indentation +Content Blocks +Rich Text Code example: -import { useAnalytics } from '@/hooks/useAnalytics' -function MyComponent() { - const { track } = useAnalytics() - const handleClick = () => { - track('doc_rating', { - rating: 5, - page: 'getting-started', - helpful: true - }) - } - return -} -Debug Mode -Enable debug mode to see analytics events in the console during development: +# Heading 1 +## Heading 2 +> Blockquote +- Bullet list +1. Numbered list +Code Blocks Code example: -{ -"analytics": { -"debug": true -} -} -This provides a complete analytics integration that's easy for users to set up and extend as needed. +// Syntax highlighting +console.log('Hello World'); +Media Blocks +Image upload and embedding +Video embedding +File attachments +Interactive embeds +AI Features +Content Enhancement +Grammar and style suggestions +Content optimization +SEO recommendations +Translation assistance +Smart Formatting +Auto-formatting +Smart lists +Table formatting +Code block language detection +Collaboration Features +Version Control +Git integration +Change history +Rollback capabilities ------------- [Document: docs/contributing/how-to-contribute.json] Title: Contributing to AkiraDocs @@ -724,99 +817,6 @@ Instances of abusive, harassing, or otherwise unacceptable behavior may be repor Attribution This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. ------------- -[Document: docs/editor/overview.json] -Title: Editor Overview -AkiraDocs features a modern, Notion-like editor that combines the simplicity of block-based editing with the power of Markdown. -Editor Interface -Main Components -Toolbar: Quick access to formatting options and block types -Content Area: Block-based editing space -Sidebar: Navigation and document structure -Command Palette: Quick commands (Ctrl/Cmd + P) -Block Structure -Each content element is a block that can be: -Dragged and dropped to reorganize -Converted between different types -Duplicated or deleted -Nested within other blocks -Getting Started -Creating Content -1. Click the '+' button or press '/' to add a new block -2. Choose block type from the popup menu -3. Start typing or add content -Basic Operations -Code example: -/ → Open block menu -⌘/Ctrl + P → Command palette -⌘/Ctrl + / → Show keyboard shortcuts -↑↓ → Navigate between blocks -Block Types -Text Blocks -Paragraphs -Headings (H1-H6) -Lists (Bulleted, Numbered) -Quotes -Callouts -Rich Media -Images -Videos -Embeds -Files -Code blocks -Special Blocks -Tables (Coming Soon) -Dividers -Custom components (Coming Soon) -------------- -[Document: docs/editor/features.json] -Title: Editor Features -Detailed overview of AkiraDocs editor capabilities and features. -Block System -Text Formatting -Basic Formatting -Bold, italic, underline -Strikethrough -Highlight -Code inline -Advanced Formatting -Custom colors -Multiple fonts -Text alignment -Indentation -Content Blocks -Rich Text -Code example: -# Heading 1 -## Heading 2 -> Blockquote -- Bullet list -1. Numbered list -Code Blocks -Code example: -// Syntax highlighting -console.log('Hello World'); -Media Blocks -Image upload and embedding -Video embedding -File attachments -Interactive embeds -AI Features -Content Enhancement -Grammar and style suggestions -Content optimization -SEO recommendations -Translation assistance -Smart Formatting -Auto-formatting -Smart lists -Table formatting -Code block language detection -Collaboration Features -Version Control -Git integration -Change history -Rollback capabilities -------------- [Document: docs/content-management/creating-pages.json] Title: Creating and Organizing Pages Learn how to create, structure, and organize your documentation pages in AkiraDocs. You can create markdown pages or just use the editor UI. Note in _contents folder, you will only see markdown content created by you. If you use Editor UI, the content will be saved in the compiled folder and will be automatically translated to other languages. diff --git a/docs/src/app/aiSearch/page.tsx b/docs/src/app/aiSearch/page.tsx index 24e4295..1e8ebde 100644 --- a/docs/src/app/aiSearch/page.tsx +++ b/docs/src/app/aiSearch/page.tsx @@ -72,7 +72,8 @@ export default function Home() { setSources([]) // Reset sources try { - // Updated fetch path to use absolute URL + const startEngineTime = performance.now(); + const contextResponse = await fetch('/context/en_docs.txt'); if (!contextResponse.ok) { throw new Error(`Failed to fetch context: ${contextResponse.status}`); @@ -85,47 +86,59 @@ export default function Home() { "Llama-3.2-1B-Instruct-q4f16_1-MLC", { initProgressCallback: (progress: any) => console.log(progress) + }, + { + context_window_size: 100000, } ); + + const engineLoadTime = performance.now() - startEngineTime; + console.log(`Engine initialization took: ${engineLoadTime.toFixed(2)}ms`); // Prepare messages for the chat with context const messages = [ { - role: "system", - content: `You are a technical documentation assistant specialized in providing accurate, concise answers based on the official documentation. - Your responses should be: - 1. Direct and to the point - 2. Based strictly on the provided documentation context - 3. Include relevant code examples when available - 4. Written in a technical but clear style - - Documentation context: ${docsContext}` + role: "system", + content: `You are a technical documentation assistant specialized in providing accurate, concise answers based on the official documentation. + Your responses should be: + 1. Direct and to the point + 2. Based strictly on the provided documentation context + 3. Include relevant code examples when available + 4. Written in a technical but clear style + + Documentation context: ${docsContext}` }, { - role: "user", - content: `Answer the following question using only the provided documentation context. - Question: ${query} - - Requirements for your response: - 1. If the answer isn't clearly supported by the documentation, say "I don't have enough information to answer this question accurately." - 2. Don't make assumptions or provide information not found in the documentation - 3. If relevant, include short code snippets to illustrate your answer. - 4. Only answer questions related to the Documentaion Context. - 5. Try to be concise and to the point. - - After your answer, if you used any sources from the documentation, list them in this format: - ------------- - Sources: - - (<path>)` + role: "user", + content: `Answer the following question using only the provided documentation context. + Question: ${query} + Requirements for your response: + 1. If the answer isn't clearly supported by the documentation and you cant find relevant information in the documentation, say \"I don't have enough information to answer this question accurately.\" + 2. Strictly adhere to the documentation context; do not make assumptions or provide additional commentary. + 3. Include short code snippets if relevant. + 4. Only answer questions related to the Documentation Context. + 5. Be concise and to the point. + After your answer, if you used any sources from the documentation, list them in this format: + ------------- + Sources: + - <title> (<path>) + Example: + Sources: + - Welcome to Akira Docs (articles/welcome.json)` } - ]; + ]; + console.log(messages) + const startChatTime = performance.now(); // Get response from MLC chatbot const reply = await engine.chat.completions.create({ messages: messages as ChatCompletionMessageParam[] }); - const aiContent = reply.choices[0].message.content || ''; + const chatCompletionTime = performance.now() - startChatTime; + console.log(`Chat completion took: ${chatCompletionTime.toFixed(2)}ms`); + const aiContent = reply.choices[0].message.content || ''; + console.log("Response aiContent", aiContent) // Extract sources and clean response const { cleanResponse, sources } = extractSources(aiContent); diff --git a/packages/akiradocs/src/app/aiSearch/page.tsx b/packages/akiradocs/src/app/aiSearch/page.tsx index 24e4295..a620cdf 100644 --- a/packages/akiradocs/src/app/aiSearch/page.tsx +++ b/packages/akiradocs/src/app/aiSearch/page.tsx @@ -69,10 +69,9 @@ export default function Home() { e.preventDefault() setIsLoading(true) setError(null) - setSources([]) // Reset sources + setSources([]) try { - // Updated fetch path to use absolute URL const contextResponse = await fetch('/context/en_docs.txt'); if (!contextResponse.ok) { throw new Error(`Failed to fetch context: ${contextResponse.status}`); @@ -80,15 +79,15 @@ export default function Home() { const contextData = await contextResponse.text(); const docsContext = contextData; - // Initialize MLC Engine const engine = await CreateMLCEngine( "Llama-3.2-1B-Instruct-q4f16_1-MLC", - { - initProgressCallback: (progress: any) => console.log(progress) + { initProgressCallback: (progress: any) => console.log(progress) + }, + { + context_window_size: 100000, } ); - // Prepare messages for the chat with context const messages = [ { role: "system", @@ -120,15 +119,24 @@ export default function Home() { } ]; - console.log(messages) + console.log("messages", messages) + + const chunks = await engine.chat.completions.create({ + messages: messages as ChatCompletionMessageParam[], + stream: true, + stream_options: { include_usage: true } + }); - // Get response from MLC chatbot - const reply = await engine.chat.completions.create({ messages: messages as ChatCompletionMessageParam[] }); - const aiContent = reply.choices[0].message.content || ''; + let aiContent = ""; + for await (const chunk of chunks) { + const newContent = chunk.choices[0]?.delta.content || ""; + aiContent += newContent; + // Update the response in real-time + setAiResponse(aiContent); + } - // Extract sources and clean response + // Extract sources after the full response is received const { cleanResponse, sources } = extractSources(aiContent); - setAiResponse(cleanResponse); setSources(sources);