@stainless-api/docs-ai-chat 0.1.0-beta.6 → 0.1.0-beta.60

package/src/components/ChatLog.tsx

@@ -1,42 +0,0 @@
-import type { ChatMessage } from '../hook';
-import Message from './ChatMessage';
-import ToolCall from './ToolCall';
-
-import { motion } from 'motion/react';
-
-import styles from '../AiChat.module.css';
-
-export default function ChatLog({ messages }: { messages: ChatMessage[] }) {
-  return (
-    <motion.ul
-      layout
-      role="log"
-      aria-live="polite"
-      className={styles['message-log']}
-      initial={{ opacity: 0, filter: `blur(4px)` }}
-      animate={{ opacity: 1, filter: `blur(0px)` }}
-    >
-      {messages.map((msg) => {
-        if (msg.role === 'user') {
-          return (
-            <Message key={msg.id} role="user">
-              {msg.content}
-            </Message>
-          );
-        }
-
-        if (msg.role === 'assistant' && msg.messageType === 'text') {
-          return (
-            <Message key={msg.id} role={msg.role} isMarkdown isStreaming={!msg.isComplete}>
-              {msg.content}
-            </Message>
-          );
-        }
-
-        if (msg.role === 'assistant' && msg.messageType === 'tool_use') {
-          return <ToolCall key={msg.id} message={msg} />;
-        }
-      })}
-    </motion.ul>
-  );
-}

package/src/components/ChatMessage.tsx

@@ -1,43 +0,0 @@
-import remend from 'remend';
-import Markdown from 'react-markdown';
-import { motion } from 'motion/react';
-
-import highlightCodeComponent from './CodeBlock';
-
-import clsx from 'clsx';
-import styles from '../AiChat.module.css';
-
-export default function ChatMessage({
-  children,
-  role,
-  isStreaming = false,
-  isMarkdown = false,
-}: {
-  children: string;
-  role: 'user' | 'assistant';
-  isStreaming?: boolean;
-  isMarkdown?: boolean;
-}) {
-  return (
-    <motion.li
-      layout="position"
-      data-message-role={role}
-      className={clsx(styles['chat-message'], 'stl-ui-prose', 'smaller-headings')}
-      style={{ borderRadius: 16 }}
-    >
-      {/* inner div provides scale correction while outer container transforms */}
-      {isMarkdown ? (
-        <Markdown
-          components={{
-            ...highlightCodeComponent,
-          }}
-        >
-          {/* repair incomplete markdown syntax during streaming to ensure proper rendering */}
-          {isStreaming ? remend(children) : children}
-        </Markdown>
-      ) : (
-        <p>{children}</p>
-      )}
-    </motion.li>
-  );
-}

package/src/components/CodeBlock.tsx

@@ -1,29 +0,0 @@
-import { Fragment } from 'react';
-
-import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
-
-import type { Components } from 'react-markdown';
-import clsx from 'clsx';
-import './hljs-github.css';
-
-export default {
-  code(props) {
-    const { children, className, ref, style, ...rest } = props;
-    const match = /language-(\w+)/.exec(className || '');
-    return match ? (
-      <SyntaxHighlighter
-        {...rest}
-        PreTag={Fragment}
-        language={match[1]}
-        useInlineStyles
-        codeTagProps={{ className: clsx(className, 'hljs-github') }}
-      >
-        {String(children).replace(/\n$/, '')}
-      </SyntaxHighlighter>
-    ) : (
-      <code {...rest} className={className}>
-        {children}
-      </code>
-    );
-  },
-} satisfies Components;

package/src/components/ToolCall.tsx

@@ -1,36 +0,0 @@
-import { motion } from 'motion/react';
-import z from 'zod';
-
-import type { ChatMessage } from '../hook';
-
-import styles from '../AiChat.module.css';
-import clsx from 'clsx';
-
-type ToolUseMessage = Extract<ChatMessage, { role: 'assistant'; messageType: 'tool_use' }>;
-
-export default function ToolCall({
-  message,
-}: {
-  message: Pick<ToolUseMessage, 'id' | 'toolName' | 'input'>;
-}) {
-  // Render docs searches
-  if (message.toolName.endsWith('search_docs')) {
-    const parsed = z.object({ query: z.string() }).safeParse(message.input);
-    if (parsed.success) {
-      return (
-        <motion.li
-          layout="position"
-          data-message-role="assistant"
-          className={clsx(styles['chat-message'], styles['tool-use'])}
-        >
-          <p>
-            Searched for <em>{parsed.data.query}</em>
-          </p>
-        </motion.li>
-      );
-    }
-  }
-
-  // No other tool renderers yet
-  return null;
-}

package/src/components/hljs-github.css

@@ -1,81 +0,0 @@
-.hljs-github {
-  /* color: light-dark(#24292e, #c9d1d9); */
-  /* background: light-dark(#ffffff, #0d1117); */
-
-  .hljs-doctag,
-  .hljs-keyword,
-  .hljs-meta .hljs-keyword,
-  .hljs-template-tag,
-  .hljs-template-variable,
-  .hljs-type,
-  .hljs-variable.language_ {
-    color: light-dark(#d73a49, #ff7b72);
-  }
-
-  .hljs-title,
-  .hljs-title.class_,
-  .hljs-title.class_.inherited__,
-  .hljs-title.function_ {
-    color: light-dark(#6f42c1, #d2a8ff);
-  }
-
-  .hljs-attr,
-  .hljs-attribute,
-  .hljs-literal,
-  .hljs-meta,
-  .hljs-number,
-  .hljs-operator,
-  .hljs-variable,
-  .hljs-selector-attr,
-  .hljs-selector-class,
-  .hljs-selector-id {
-    color: light-dark(#005cc5, #79c0ff);
-  }
-
-  .hljs-regexp,
-  .hljs-string,
-  .hljs-meta .hljs-string {
-    color: light-dark(#032f62, #a5d6ff);
-  }
-
-  .hljs-built_in,
-  .hljs-symbol {
-    color: light-dark(#e36209, #ffa657);
-  }
-
-  .hljs-comment,
-  .hljs-code,
-  .hljs-formula {
-    color: light-dark(#6a737d, #8b949e);
-  }
-
-  .hljs-name,
-  .hljs-quote,
-  .hljs-selector-tag,
-  .hljs-selector-pseudo {
-    color: light-dark(#22863a, #7ee787);
-  }
-
-  .hljs-subst {
-    color: light-dark(#24292e, #c9d1d9);
-  }
-
-  .hljs-section {
-    color: light-dark(#005cc5, #1f6feb);
-    font-weight: bold;
-  }
-
-  .hljs-bullet {
-    color: light-dark(#735c0f, #f2cc60);
-  }
-
-  .hljs-emphasis {
-    color: light-dark(#24292e, #c9d1d9);
-    font-style: italic;
-  }
-
-  .hljs-strong {
-    color: light-dark(#24292e, #c9d1d9);
-    font-weight: bold;
-  }
-}