reachat 0.0.1 → 1.0.1

package/README.md

@@ -1,41 +1,88 @@
-# reachat
-💬 Building Blocks for LLM UI
-
-## Features
-- Markdown
-- Code block
-- CSV Table
-- JSON Block
-- Dynamic Links ( regex )
-- Source Support
-- Image Preview Support
-- File Upload Support
-- Typeahead
+<div align="center">
+  <img width="650" src=".storybook/logo.png">
+  <br />
+  Building Blocks for LLM UI
+  <br /><br />
+  <a href="https://github.com/reaviz/reachat/actions/workflows/build.yml">
+    <img src="https://github.com/reaviz/reachat/actions/workflows/build.yml/badge.svg" />
+  </a>
+  &nbsp;
+  <a href="https://npm.im/reachat" target="_blank">
+    <img src="https://img.shields.io/npm/v/reachat.svg" />
+  </a>&nbsp;
+  <a href="https://npm.im/reachat" target="_blank">
+    <img src="https://badgen.net/npm/dw/reachat" />
+  </a>&nbsp;
+  <a href="https://github.com/reaviz/reachat/blob/master/LICENSE">
+    <img src="https://badgen.now.sh/badge/license/apache2" />
+  </a>&nbsp;
+  <a href="https://github.com/reaviz/reachat">
+    <img alt="GitHub stars" src="https://img.shields.io/github/stars/reaviz/reachat?style=social" />
+  </a>&nbsp;
+  <a href="https://discord.gg/tt8wGExq35" target="_blank">
+    <img src="https://img.shields.io/discord/773948315037073409?label=discord" />
+  </a>
+</div>
+
+---
+
+reachat is a UI library for building chat experiences. No more manually coding
+all the components required to build LLM uis manually. Customize each component and
+theme via Tailwind.
+
+## 🚀 Quick Links
+- Checkout the [docs and demos](https://reachat.dev)
+- Checkout the [storybook demos](https://storybook.reachat.dev)
+- Learn about updates from the [changelog](CHANGELOG.md)
+
+## 💎 Other Projects
+
+- [Reaflow](https://reaflow.dev?utm=reagraph) - Open-source library for workflow and diagram graphs.
+- [Reablocks](https://reablocks.dev?utm=reagraph) - Open-source component library for React based on Tailwind.
+- [Reaviz](https://reaviz.dev?utm=reagraph) - Open-source library for data visualizations for React. 
+- [Reagraph](https://reagraph.dev?utm=reaviz) - Open-source library for large webgl based network graphs.
+
+## 🪄 Features
+- Console and Companion Modes
+- Markdown Rendering
+  - GFM Styling
+  - Code Highlighting
+  - Tables
+  - JSON
+  - Lists
+  - Embeds ( Youtube )
+  - remark plugin support
+- File Uploads
+- Message Sources
+- Animations
+- Conversation Pagination
+- Smart/Dynamic Grouping of Sessions
 - Keyboard shortcuts
+- Animations via Framer Motion
+- Responsive
 - Tailwind for Themeing
-- Polygot LLM Support - Vercel, OpenAI, Claude, Gemini
-
-## Installation
-TODO
-
-## Themeing
-TODO
-
-## References
-- https://www.chatbotui.com/
-- https://llm-ui.com/
-- https://github.com/huggingface/chat-ui - Amazing clean UI with very good web search, my go to currently. (they added the ability to do it all locally very recently!)
-- https://github.com/oobabooga/text-generation-webui - Best overall, supports any model format and has many extensions
-- https://github.com/ParisNeo/lollms-webui/ - Has PDF, stable diffusion and web search integration
-- https://github.com/h2oai/h2ogpt - Has PDF, Web search, best for files ingestion (supports many file formats)
-- https://github.com/SillyTavern/SillyTavern - Best for custom characters and roleplay
-- https://github.com/NimbleBoxAI/ChainFury - Has great UI and web search (experimental)
-- https://github.com/nomic-ai/gpt4all - Basic UI that replicated ChatGPT
-- https://github.com/imartinez/privateGPT - Basic UI that replicated ChatGPT with PDF integration
-- https://github.com/LostRuins/koboldcpp - Easy to install and simple interface
-- LM Studio - Clean UI, focuses on GGUF format
-- https://github.com/lobehub/lobe-chat - Nice rich UI with the ability to load extensions for web search, TTS and more
-- https://github.com/ollama-webui/ollama-webui - ChatGPT like UI with easy way to download models
-- https://github.com/turboderp/exui - very fast and vram efficient
-- https://github.com/PromtEngineer/localGPT - Focuses on PDF files
-- https://github.com/shinomakoi/AI-Messenger - Supports EXLv2 and LLava
+- Customizable via Slots
+
+## 📦 Install
+
+To use reachat in your project, install it via npm/yarn:
+
+```
+npm i reachat --save
+```
+
+## 🔭 Development
+
+If you want to run reachat locally, its super easy!
+
+- Clone the repository
+- `npm i`
+- `npm start`
+- Browser opens to Storybook page
+
+## ❤️ Contributors & Credits
+
+Thanks to all our contributors!
+
+<a href="https://github.com/reaviz/reaviz/graphs/contributors"><img src="https://opencollective.com/reaviz/contributors.svg?width=890" /></a>
+

package/dist/Chat.d.ts

@@ -0,0 +1,58 @@
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+import { Session } from './types';
+import { ChatTheme } from './theme';
+import { PluggableList } from 'react-markdown/lib';
+
+export interface ChatProps extends PropsWithChildren {
+    /**
+     * The style to apply to the root element.
+     */
+    style?: CSSProperties;
+    /**
+     * The class name to apply to the root element.
+     */
+    className?: string;
+    /**
+     * The type of prompt to display. Companion prompts are smaller and are
+     * meant to be displayed alongside other content. Full prompts are larger
+     * and are meant to be displayed on their own.
+     */
+    viewType?: 'companion' | 'console';
+    /**
+     * The list of sessions to display.
+     */
+    sessions: Session[];
+    /**
+     * The ID of the currently active session.
+     */
+    activeSessionId?: string;
+    /**
+     * Custom theme for the chat.
+     */
+    theme?: ChatTheme;
+    /**
+     * Remark plugins to apply to the request/response.
+     */
+    remarkPlugins?: PluggableList[];
+    /**
+     * Whether to display a loading state.
+     */
+    isLoading?: boolean;
+    /**
+     * Whether to disable the chat.
+     */
+    disabled?: boolean;
+    /**
+     * Callback function to handle when a session is selected.
+     */
+    onSelectSession?: (sessionId: string) => void;
+    /**
+     * Callback function to handle when a session is deleted.
+     */
+    onDeleteSession?: (sessionId: string) => void;
+    /**
+     * Callback function to handle creating a new session.
+     */
+    onNewSession?: () => void;
+}
+export declare const Chat: FC<ChatProps>;

package/dist/ChatContext.d.ts

@@ -0,0 +1,18 @@
+import { Session } from './types';
+import { ChatTheme } from './theme';
+import { PluggableList } from 'react-markdown/lib';
+
+export interface ChatContextProps {
+    sessions: Session[];
+    disabled?: boolean;
+    activeSessionId: string | null;
+    theme?: ChatTheme;
+    isLoading?: boolean;
+    isCompact?: boolean;
+    activeSession?: Session | null;
+    remarkPlugins?: PluggableList[];
+    selectSession?: (sessionId: string) => void;
+    deleteSession?: (sessionId: string) => void;
+    createSession?: () => void;
+}
+export declare const ChatContext: import('react').Context<ChatContextProps>;

package/dist/ChatInput.d.ts

@@ -0,0 +1,42 @@
+import { FC, ReactElement } from 'react';
+
+interface ChatInputProps {
+    /**
+     * Default value for the input field.
+     */
+    defaultValue?: string;
+    /**
+     * Allowed file types for upload.
+     */
+    allowedFiles?: string[];
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Icon to show for send.
+     */
+    sendIcon?: ReactElement;
+    /**
+     * Icon to show for send.
+     */
+    stopIcon?: ReactElement;
+    /**
+     * Icon to show for attach.
+     */
+    attachIcon?: ReactElement;
+    /**
+     * Callback function to handle sending a new message.
+     */
+    onSendMessage?: (message: string) => void;
+    /**
+     * Callback function to handle stopping the current action.
+     */
+    onStopMessage?: () => void;
+    /**
+     * Callback function to handle file upload.
+     */
+    onFileUpload?: (file: File) => void;
+}
+export declare const ChatInput: FC<ChatInputProps>;
+export {};

package/dist/Markdown/CodeHighlighter.d.ts

@@ -0,0 +1,25 @@
+import { FC, PropsWithChildren, ReactElement } from 'react';
+
+export interface CodeHighlighterProps extends PropsWithChildren {
+    /**
+     * The class name to apply to the code block.
+     */
+    className?: string;
+    /**
+     * The language of the code block.
+     */
+    language?: string;
+    /**
+     * The class name to apply to the copy button.
+     */
+    copyClassName?: string;
+    /**
+     * Icon to show for copy.
+     */
+    copyIcon?: ReactElement;
+    /**
+     * The theme to use for the code block.
+     */
+    theme?: Record<string, string>;
+}
+export declare const CodeHighlighter: FC<CodeHighlighterProps>;

package/dist/Markdown/Markdown.d.ts

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from 'react';
+import { PluggableList } from 'react-markdown/lib';
+
+interface MarkdownWrapperProps extends PropsWithChildren {
+    /**
+     * Remark plugins to apply to the markdown content.
+     */
+    remarkPlugins?: PluggableList[];
+}
+export declare const Markdown: FC<MarkdownWrapperProps>;
+export {};

package/dist/Markdown/Table.d.ts

@@ -0,0 +1,5 @@
+import { default as React, FC, PropsWithChildren } from 'react';
+
+export declare const TableComponent: FC<PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>>;
+export declare const TableHeaderCell: FC<PropsWithChildren<React.HTMLAttributes<HTMLTableHeaderCellElement>>>;
+export declare const TableDataCell: FC<PropsWithChildren<React.HTMLAttributes<HTMLTableDataCellElement>>>;

package/dist/Markdown/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Markdown';
+export * from './Table';
+export * from './CodeHighlighter';
+export * from './plugins';
+export * from './themes';

package/dist/Markdown/plugins/index.d.ts

@@ -0,0 +1 @@
+export * from './remarkCve';

package/dist/Markdown/plugins/remarkCve.d.ts

@@ -0,0 +1 @@
+export declare function remarkCve(): (tree: any, _file: any) => void;