mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-24 20:09:02 +00:00
fix: restore ai/search component, purge orama deps, use HANZO_PUBLISHABLE_KEY
- Restore pre-merge components/ai/search.tsx (Hanzo native AI search) - Fix layout imports back to @/components/ai/search - Remove @orama/core and @orama/orama from deps - Replace HANZO_API_KEY with HANZO_PUBLISHABLE_KEY (client-safe) - Update registry: ai/inkeep → ai/hanzo - Keep GITHUB_APP_* for build-time static data
This commit is contained in:
@@ -2,7 +2,7 @@ import { DocsLayout } from '@hanzo/docs-base-ui/layouts/docs';
|
||||
import { baseOptions, linkItems, logo } from '@/components/layouts/shared';
|
||||
import { source } from '@/lib/source';
|
||||
import { getSection } from '@/lib/source/navigation';
|
||||
import { AISearch, AISearchPanel, AISearchTrigger } from '@/components/inkeep/search';
|
||||
import { AISearch, AISearchPanel, AISearchTrigger } from '@/components/ai/search';
|
||||
import { MessageCircleIcon } from 'lucide-react';
|
||||
import { cn } from '@/lib/cn';
|
||||
import { buttonVariants } from '@hanzo/docs-base-ui/components/ui/button';
|
||||
|
||||
@@ -0,0 +1,462 @@
|
||||
'use client';
|
||||
import {
|
||||
type ComponentProps,
|
||||
createContext,
|
||||
type ReactNode,
|
||||
type SyntheticEvent,
|
||||
use,
|
||||
useEffect,
|
||||
useEffectEvent,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { Loader2, MessageCircleIcon, RefreshCw, Send, X } from 'lucide-react';
|
||||
import { cn } from '@/lib/cn';
|
||||
import { buttonVariants } from '@hanzo/docs-base-ui/components/ui/button';
|
||||
import Link from '@hanzo/docs-core/link';
|
||||
import { type UIMessage, useChat, type UseChatHelpers } from '@ai-sdk/react';
|
||||
import type { ProvideLinksToolSchema } from '@/lib/chat/inkeep-qa-schema';
|
||||
import type { z } from 'zod';
|
||||
import { DefaultChatTransport } from 'ai';
|
||||
import { Markdown } from './markdown';
|
||||
import { Presence } from '@radix-ui/react-presence';
|
||||
|
||||
const Context = createContext<{
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
chat: UseChatHelpers<UIMessage>;
|
||||
} | null>(null);
|
||||
|
||||
export function AISearchPanelHeader({ className, ...props }: ComponentProps<'div'>) {
|
||||
const { setOpen } = useAISearchContext();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'sticky top-0 flex items-start gap-2 border rounded-xl bg-fd-secondary text-fd-secondary-foreground shadow-sm',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="px-3 py-2 flex-1">
|
||||
<p className="text-sm font-medium mb-2">AI Chat</p>
|
||||
<p className="text-xs text-fd-muted-foreground">
|
||||
Powered by{' '}
|
||||
<a href="https://hanzo.ai" target="_blank" rel="noreferrer noopener">
|
||||
Hanzo AI
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
aria-label="Close"
|
||||
tabIndex={-1}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
size: 'icon-sm',
|
||||
color: 'ghost',
|
||||
className: 'text-fd-muted-foreground rounded-full',
|
||||
}),
|
||||
)}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<X />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AISearchInputActions() {
|
||||
const { messages, status, setMessages, regenerate } = useChatContext();
|
||||
const isLoading = status === 'streaming';
|
||||
|
||||
if (messages.length === 0) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{!isLoading && messages.at(-1)?.role === 'assistant' && (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
color: 'secondary',
|
||||
size: 'sm',
|
||||
className: 'rounded-full gap-1.5',
|
||||
}),
|
||||
)}
|
||||
onClick={() => regenerate()}
|
||||
>
|
||||
<RefreshCw className="size-4" />
|
||||
Retry
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
color: 'secondary',
|
||||
size: 'sm',
|
||||
className: 'rounded-full',
|
||||
}),
|
||||
)}
|
||||
onClick={() => setMessages([])}
|
||||
>
|
||||
Clear Chat
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const StorageKeyInput = '__ai_search_input';
|
||||
export function AISearchInput(props: ComponentProps<'form'>) {
|
||||
const { status, sendMessage, stop } = useChatContext();
|
||||
const [input, setInput] = useState(() => localStorage.getItem(StorageKeyInput) ?? '');
|
||||
const isLoading = status === 'streaming' || status === 'submitted';
|
||||
const onStart = (e?: SyntheticEvent) => {
|
||||
e?.preventDefault();
|
||||
void sendMessage({ text: input });
|
||||
setInput('');
|
||||
};
|
||||
|
||||
localStorage.setItem(StorageKeyInput, input);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoading) document.getElementById('nd-ai-input')?.focus();
|
||||
}, [isLoading]);
|
||||
|
||||
return (
|
||||
<form {...props} className={cn('flex items-start pe-2', props.className)} onSubmit={onStart}>
|
||||
<Input
|
||||
value={input}
|
||||
placeholder={isLoading ? 'AI is answering...' : 'Ask a question'}
|
||||
autoFocus
|
||||
className="p-3"
|
||||
disabled={status === 'streaming' || status === 'submitted'}
|
||||
onChange={(e) => {
|
||||
setInput(e.target.value);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (!event.shiftKey && event.key === 'Enter') {
|
||||
onStart(event);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{isLoading ? (
|
||||
<button
|
||||
key="bn"
|
||||
type="button"
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
color: 'secondary',
|
||||
className: 'transition-all rounded-full mt-2 gap-2',
|
||||
}),
|
||||
)}
|
||||
onClick={stop}
|
||||
>
|
||||
<Loader2 className="size-4 animate-spin text-fd-muted-foreground" />
|
||||
Abort Answer
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
key="bn"
|
||||
type="submit"
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
color: 'primary',
|
||||
className: 'transition-all rounded-full mt-2',
|
||||
}),
|
||||
)}
|
||||
disabled={input.length === 0}
|
||||
>
|
||||
<Send className="size-4" />
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function List(props: Omit<ComponentProps<'div'>, 'dir'>) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
function callback() {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: 'instant',
|
||||
});
|
||||
}
|
||||
|
||||
const observer = new ResizeObserver(callback);
|
||||
callback();
|
||||
|
||||
const element = containerRef.current?.firstElementChild;
|
||||
|
||||
if (element) {
|
||||
observer.observe(element);
|
||||
}
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
{...props}
|
||||
className={cn('fd-scroll-container overflow-y-auto min-w-0 flex flex-col', props.className)}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Input(props: ComponentProps<'textarea'>) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const shared = cn('col-start-1 row-start-1', props.className);
|
||||
|
||||
return (
|
||||
<div className="grid flex-1">
|
||||
<textarea
|
||||
id="nd-ai-input"
|
||||
{...props}
|
||||
className={cn(
|
||||
'resize-none bg-transparent placeholder:text-fd-muted-foreground focus-visible:outline-none',
|
||||
shared,
|
||||
)}
|
||||
/>
|
||||
<div ref={ref} className={cn(shared, 'break-all invisible')}>
|
||||
{`${props.value?.toString() ?? ''}\n`}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const roleName: Record<string, string> = {
|
||||
user: 'you',
|
||||
assistant: 'hanzo-docs',
|
||||
};
|
||||
|
||||
function Message({ message, ...props }: { message: UIMessage } & ComponentProps<'div'>) {
|
||||
let markdown = '';
|
||||
let links: z.infer<typeof ProvideLinksToolSchema>['links'] = [];
|
||||
|
||||
for (const part of message.parts ?? []) {
|
||||
if (part.type === 'text') {
|
||||
markdown += part.text;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (part.type === 'tool-provideLinks' && part.input) {
|
||||
links = (part.input as z.infer<typeof ProvideLinksToolSchema>).links;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div onClick={(e) => e.stopPropagation()} {...props}>
|
||||
<p
|
||||
className={cn(
|
||||
'mb-1 text-sm font-medium text-fd-muted-foreground',
|
||||
message.role === 'assistant' && 'text-fd-primary',
|
||||
)}
|
||||
>
|
||||
{roleName[message.role] ?? 'unknown'}
|
||||
</p>
|
||||
<div className="prose text-sm">
|
||||
<Markdown text={markdown} />
|
||||
</div>
|
||||
{links && links.length > 0 && (
|
||||
<div className="mt-2 flex flex-row flex-wrap items-center gap-1">
|
||||
{links.map((item, i) => (
|
||||
<Link
|
||||
key={i}
|
||||
href={item.url}
|
||||
className="block text-xs rounded-lg border p-3 hover:bg-fd-accent hover:text-fd-accent-foreground"
|
||||
>
|
||||
<p className="font-medium">{item.title}</p>
|
||||
<p className="text-fd-muted-foreground">Reference {item.label}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const chatTransport = new DefaultChatTransport({
|
||||
api: process.env.NEXT_PUBLIC_HANZO_CHAT_ENDPOINT ?? 'https://cloud-api.hanzo.ai/api/chat-docs',
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.NEXT_PUBLIC_HANZO_SEARCH_KEY ?? 'pk-hanzo-docs-search-2026'}`,
|
||||
},
|
||||
});
|
||||
|
||||
const systemPrompt =
|
||||
'You are the documentation assistant for Hanzo AI, a Techstars-backed applied AI lab. ' +
|
||||
'Hanzo is the creator of the Zen open-source family of LLMs (100+ models) and thousands of OSS projects ' +
|
||||
'that make up Hanzo Cloud — a full AI infrastructure platform including Dev (AI-native CLI and coding agents), ' +
|
||||
'Bot (personal AI assistant for desktop, mobile, and messaging), Console (LLM observability and prompt engineering), ' +
|
||||
'Flow (visual AI workflow builder), Search (hybrid fulltext + vector search), Commerce (usage-based billing), ' +
|
||||
'IAM (identity and access management), and more. ' +
|
||||
'Answer confidently and directly — you know what Hanzo is. Never hedge with "appears to be" or "it seems." ' +
|
||||
'Be concise. Use markdown. Include doc links when relevant.';
|
||||
|
||||
export function AISearch({ children }: { children: ReactNode }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const chat = useChat({
|
||||
id: 'search',
|
||||
initialMessages: [{ id: 'system', role: 'system' as const, content: systemPrompt, parts: [] }],
|
||||
transport: chatTransport,
|
||||
});
|
||||
|
||||
return (
|
||||
<Context value={useMemo(() => ({ chat, open, setOpen }), [chat, open])}>{children}</Context>
|
||||
);
|
||||
}
|
||||
|
||||
export function AISearchTrigger({
|
||||
position = 'default',
|
||||
className,
|
||||
...props
|
||||
}: ComponentProps<'button'> & { position?: 'default' | 'float' }) {
|
||||
const { open, setOpen } = useAISearchContext();
|
||||
|
||||
return (
|
||||
<button
|
||||
data-state={open ? 'open' : 'closed'}
|
||||
className={cn(
|
||||
position === 'float' && [
|
||||
'fixed bottom-4 gap-3 w-24 end-[calc(--spacing(4)+var(--removed-body-scroll-bar-size,0px))] shadow-lg z-20 transition-[translate,opacity]',
|
||||
open && 'translate-y-10 opacity-0',
|
||||
],
|
||||
className,
|
||||
)}
|
||||
onClick={() => setOpen(!open)}
|
||||
{...props}
|
||||
>
|
||||
{props.children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function AISearchPanel() {
|
||||
const { open, setOpen } = useAISearchContext();
|
||||
useHotKey();
|
||||
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
@keyframes ask-ai-open {
|
||||
from {
|
||||
translate: 100% 0;
|
||||
}
|
||||
to {
|
||||
translate: 0 0;
|
||||
}
|
||||
}
|
||||
@keyframes ask-ai-close {
|
||||
from {
|
||||
width: var(--ai-chat-width);
|
||||
}
|
||||
to {
|
||||
width: 0px;
|
||||
}
|
||||
}`}
|
||||
</style>
|
||||
<Presence present={open}>
|
||||
<div
|
||||
data-state={open ? 'open' : 'closed'}
|
||||
className="fixed inset-0 z-30 backdrop-blur-xs bg-fd-overlay data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out lg:hidden"
|
||||
onClick={() => setOpen(false)}
|
||||
/>
|
||||
</Presence>
|
||||
<Presence present={open}>
|
||||
<div
|
||||
className={cn(
|
||||
'overflow-hidden z-30 bg-fd-card text-fd-card-foreground [--ai-chat-width:400px] 2xl:[--ai-chat-width:460px]',
|
||||
'max-lg:fixed max-lg:inset-x-2 max-lg:top-4 max-lg:border max-lg:rounded-2xl max-lg:shadow-xl',
|
||||
'lg:sticky lg:top-0 lg:h-dvh lg:border-s lg:ms-auto lg:in-[#nd-docs-layout]:[grid-area:toc] lg:in-[#nd-notebook-layout]:row-span-full lg:in-[#nd-notebook-layout]:col-start-5',
|
||||
open
|
||||
? 'animate-fd-dialog-in lg:animate-[ask-ai-open_200ms]'
|
||||
: 'animate-fd-dialog-out lg:animate-[ask-ai-close_200ms]',
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col size-full p-2 max-lg:max-h-[80dvh] lg:p-3 lg:w-(--ai-chat-width)">
|
||||
<AISearchPanelHeader />
|
||||
<AISearchPanelList className="flex-1" />
|
||||
<div className="rounded-xl border bg-fd-secondary text-fd-secondary-foreground shadow-sm has-focus-visible:shadow-md">
|
||||
<AISearchInput />
|
||||
<div className="flex items-center gap-1.5 p-1 empty:hidden">
|
||||
<AISearchInputActions />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Presence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function AISearchPanelList({ className, style, ...props }: ComponentProps<'div'>) {
|
||||
const chat = useChatContext();
|
||||
const messages = chat.messages.filter((msg) => msg.role !== 'system');
|
||||
|
||||
return (
|
||||
<List
|
||||
className={cn('py-4 overscroll-contain', className)}
|
||||
style={{
|
||||
maskImage:
|
||||
'linear-gradient(to bottom, transparent, white 1rem, white calc(100% - 1rem), transparent 100%)',
|
||||
...style,
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{messages.length === 0 ? (
|
||||
<div className="text-sm text-fd-muted-foreground/80 size-full flex flex-col items-center justify-center text-center gap-2">
|
||||
<MessageCircleIcon fill="currentColor" stroke="none" />
|
||||
<p onClick={(e) => e.stopPropagation()}>Start a new chat below.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col px-3 gap-4">
|
||||
{messages.map((item) => (
|
||||
<Message key={item.id} message={item} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</List>
|
||||
);
|
||||
}
|
||||
|
||||
export function useHotKey() {
|
||||
const { open, setOpen } = useAISearchContext();
|
||||
|
||||
const onKeyPress = useEffectEvent((e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && open) {
|
||||
setOpen(false);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
if (e.key === '/' && (e.metaKey || e.ctrlKey) && !open) {
|
||||
setOpen(true);
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('keydown', onKeyPress);
|
||||
return () => window.removeEventListener('keydown', onKeyPress);
|
||||
}, []);
|
||||
}
|
||||
|
||||
export function useAISearchContext() {
|
||||
return use(Context)!;
|
||||
}
|
||||
|
||||
function useChatContext() {
|
||||
return use(Context)!.chat;
|
||||
}
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
AISearchPanelList,
|
||||
useAISearchContext,
|
||||
useHotKey,
|
||||
} from '@/components/inkeep/search';
|
||||
} from '@/components/ai/search';
|
||||
import { MessageCircleIcon } from 'lucide-react';
|
||||
import { buttonVariants } from '@hanzo/docs-base-ui/components/ui/button';
|
||||
import { cn } from '@/lib/cn';
|
||||
|
||||
@@ -120,25 +120,20 @@ export const registry: Registry = {
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'ai/inkeep',
|
||||
title: 'AI Chat (Next.js + Inkeep AI)',
|
||||
description: 'Ask AI dialog for your docs, requires Inkeep AI',
|
||||
name: 'ai/hanzo',
|
||||
title: 'AI Chat (Next.js + Hanzo AI)',
|
||||
description: 'Ask AI dialog for your docs, powered by Hanzo Cloud',
|
||||
files: [
|
||||
{
|
||||
type: 'components',
|
||||
path: 'components/inkeep/search.tsx',
|
||||
path: 'components/ai/search.tsx',
|
||||
target: '<dir>/ai/search.tsx',
|
||||
},
|
||||
{
|
||||
type: 'route',
|
||||
path: 'lib/inkeep/server.ts',
|
||||
path: 'app/api/chat/route.ts',
|
||||
target: 'app/api/chat/route.ts',
|
||||
},
|
||||
{
|
||||
type: 'lib',
|
||||
path: 'lib/inkeep/inkeep-qa-schema.ts',
|
||||
target: '<dir>/ai/inkeep-qa-schema.ts',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -30,9 +30,7 @@
|
||||
"@hanzo/logo": "^1.0.5",
|
||||
"@mixedbread/sdk": "^0.57.0",
|
||||
"@openrouter/ai-sdk-provider": "^2.3.0",
|
||||
"@orama/core": "^1.2.19",
|
||||
"@orama/orama": "^3.1.18",
|
||||
"@paper-design/shaders-react": "^0.0.71",
|
||||
"@paper-design/shaders-react": "^0.0.71",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-hover-card": "^1.1.15",
|
||||
"@radix-ui/react-presence": "^1.1.5",
|
||||
|
||||
Generated
+15
-12
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"$schema": "https://turbo.build/schema.json",
|
||||
"globalEnv": [
|
||||
"HANZO_API_KEY",
|
||||
"HANZO_PUBLISHABLE_KEY",
|
||||
"GITHUB_APP_PRIVATE_KEY",
|
||||
"GITHUB_APP_ID",
|
||||
"GITHUB_TOKEN"
|
||||
|
||||
Reference in New Issue
Block a user