@stainless-api/docs-ui 0.1.0-beta.29 → 0.1.0-beta.30

package/src/components/breadcrumbs.tsx

@@ -1,94 +0,0 @@
-import type * as SDKJSON from '@stainless/sdk-json';
-import { Languages } from '../routing';
-import { ChevronRight } from 'lucide-react';
-import style from '../style';
-import { Join } from './primitives';
-
-type Breadcrumb = { title: string; href: string };
-
-type BreadcrumbConfig = {
-  includeCurrentPage?: boolean;
-};
-
-function generateApiBreadcrumbs(fullPath: string, spec: any, basePath: string): Breadcrumb[] | null {
-  // Normalize paths. Mostly for basePath since it's configurable and may have trailing slashes
-  const cleanBasePath = basePath.replace(/\/+$/, '');
-  const cleanPath = fullPath.replace(/\/+$/, '');
-
-  if (!cleanPath.startsWith(cleanBasePath)) return null;
-
-  // Slice off the basePath
-  const rest = cleanPath.slice(cleanBasePath.length).split('/').filter(Boolean);
-
-  const breadcrumbs: Breadcrumb[] = [];
-  let href = cleanBasePath;
-  let i = 0;
-
-  // Handle sdk language prefix
-  if (Languages.includes(rest[0] as (typeof Languages)[number])) {
-    href += `/${rest[0]}`;
-    i++;
-  }
-
-  // Always start with API Reference
-  breadcrumbs.push({ title: 'API Reference', href });
-
-  let currentSpec = spec;
-
-  while (i < rest.length) {
-    const idType = rest[i];
-    const idValue = rest[i + 1];
-    if (!idType || !idValue || !currentSpec?.[idType]?.[idValue]) break;
-
-    currentSpec = currentSpec[idType][idValue];
-    href += `/${idType}/${idValue}`;
-
-    // This should always exist, but just in case fallback to the raw url value
-    const title = (idType === 'methods' ? currentSpec.summary : currentSpec.title) ?? idValue;
-
-    breadcrumbs.push({
-      title,
-      href,
-    });
-
-    i += 2;
-  }
-
-  return breadcrumbs;
-}
-
-export function SDKBreadcrumbs({
-  spec,
-  currentPath,
-  basePath = '/api',
-  config = { includeCurrentPage: false },
-}: {
-  spec: SDKJSON.Spec;
-  currentPath: string;
-  basePath?: string;
-  config?: BreadcrumbConfig | null;
-}) {
-  const breadcrumbs = generateApiBreadcrumbs(currentPath, spec, basePath);
-
-  if (!breadcrumbs || breadcrumbs.length === 0) return null;
-
-  if (!config?.includeCurrentPage && breadcrumbs.length > 1) {
-    breadcrumbs.pop();
-  }
-
-  const items = breadcrumbs.map((crumb, index) => (
-    <div key={index} className={style.BreadcrumbsItem}>
-      <a href={crumb.href} className={style.BreadcrumbsLink}>
-        {crumb.title}
-      </a>
-    </div>
-  ));
-
-  return (
-    <div className={style.Breadcrumbs}>
-      <Join limit={breadcrumbs.length} items={items}>
-        <ChevronRight />
-      </Join>
-    </div>
-  );
-}

package/src/components/chat.tsx

@@ -1,157 +0,0 @@
-import * as React from 'react';
-import { useChat } from 'ai/react';
-import { ArrowUpIcon, BotMessageSquareIcon, LoaderCircleIcon, SquareIcon, TrashIcon } from 'lucide-react';
-import { useLanguage, useSearchContext } from '../contexts';
-import { Markdown } from './primitives';
-import type { SearchSettings } from '../search/types';
-import type { Message, UIMessage } from 'ai';
-import style from '../style';
-
-const BASEURL = 'https://askai.algolia.com';
-
-function buildFetch({ appId, searchKey, indexName, assistant }: SearchSettings) {
-  const headers: Record<string, string> = {
-    'X-Algolia-Application-Id': appId,
-    'X-Algolia-API-Key': searchKey,
-    'X-Algolia-Index-Name': `${indexName}-chat`,
-  };
-  if (assistant) {
-    headers['X-Algolia-Assistant-Id'] = assistant;
-  }
-
-  return async (input: RequestInfo | URL, init: RequestInit | undefined) => {
-    const response = await fetch(`${BASEURL}/chat/token`, { method: 'POST', headers });
-    const data = (await response.json()) as Record<string, unknown>;
-    const reqHeaders = new Headers(init?.headers);
-    reqHeaders.set('Authorization', `TOKEN ${data['token']}`);
-    for (const name in headers) {
-      reqHeaders.set(name, headers[name]!);
-    }
-    return fetch(input, {
-      ...init,
-      headers: reqHeaders,
-    });
-  };
-}
-
-function RenderMessage({ message }: { message: UIMessage }) {
-  return message.parts
-    .filter((part) => part.type === 'text')
-    .map((part, key) => <Markdown key={key} content={part['text']} />);
-}
-
-export function Chat() {
-  const language = useLanguage();
-  const { settings } = useSearchContext();
-  const messageListRef = React.useRef<HTMLDivElement>(null);
-
-  const { messages, setMessages, status, input, setInput, append, stop } = useChat({
-    body: { searchParameters: { filters: `language:${language ?? 'http'}` } },
-    sendExtraMessageFields: true,
-    fetch: buildFetch(settings),
-    api: `${BASEURL}/chat`,
-  });
-
-  React.useEffect(() => {
-    const content = sessionStorage.getItem('stldocs-chat-messages');
-    if (!content) return;
-
-    setMessages(JSON.parse(content) as Message[]);
-    setTimeout(() => {
-      if (!messageListRef.current) return;
-      messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
-    }, 10);
-  }, [setMessages]);
-
-  React.useEffect(() => {
-    if (status !== 'submitted' || !messageListRef.current) return;
-    const messageElements = messageListRef.current.querySelectorAll('[data-stldocs-chat-message]');
-    [...messageElements].at(-1)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }, [status]);
-
-  React.useEffect(() => {
-    sessionStorage.setItem('stldocs-chat-messages', JSON.stringify(messages));
-  }, [messages]);
-
-  function handleSend() {
-    append({ role: 'user', content: input });
-    setInput('');
-  }
-
-  function handleKeyUp(ev: React.KeyboardEvent) {
-    if (ev.key === 'Enter' && !ev.shiftKey) {
-      ev.preventDefault();
-      handleSend();
-    }
-  }
-
-  return (
-    <>
-      <div className={style.ChatMessages} ref={messageListRef}>
-        {messages.map((message) => (
-          <div key={message.id} className={style.ChatMessage} data-stldocs-chat-message={message.role}>
-            <RenderMessage message={message} />
-          </div>
-        ))}
-
-        {status === 'submitted' && (
-          <div className={style.LoadingSpinner}>
-            <LoaderCircleIcon />
-          </div>
-        )}
-
-        {['submitted', 'streaming'].includes(status) && <div style={{ height: '800px' }}></div>}
-      </div>
-      <div className={style.ChatInput}>
-        <textarea
-          value={input}
-          placeholder="Ask a question"
-          onKeyUp={handleKeyUp}
-          onChange={(ev) => setInput(ev.target.value)}
-          autoFocus
-        />
-
-        <div className={style.ChatInputButtons}>
-          {status === 'submitted' ? (
-            <button onClick={stop}>
-              <SquareIcon />
-            </button>
-          ) : (
-            <button onClick={handleSend} disabled={input.length < 1}>
-              <ArrowUpIcon />
-            </button>
-          )}
-
-          <button onClick={() => setMessages([])}>
-            <TrashIcon />
-          </button>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export type ChatModalProps = {
-  id?: string;
-  open?: boolean;
-};
-
-export function ChatModal({ id, open: isOpen }: ChatModalProps) {
-  const [open, setOpen] = React.useState<boolean>(isOpen ?? false);
-
-  return (
-    <div
-      id={id}
-      onToggle={(ev) => setOpen(ev.newState === 'open')}
-      className={style.SearchModal}
-      popover="auto"
-      data-stldocs-modal-open={open}
-    >
-      <div className={style.ChatHeader}>
-        <BotMessageSquareIcon />
-        <h5>Docs Assistant</h5>
-      </div>
-      {open && <Chat />}
-    </div>
-  );
-}