reachat 0.0.1 → 1.0.0

package/README.md

@@ -1,41 +1,86 @@
-# 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
+- 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
 - 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/{Sessions.d.ts → Chat.d.ts}

@@ -1,13 +1,23 @@
-import { FC } from 'react';
-import { ResponseTransformer, Session } from './types';
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+import { Session } from './types';
+import { ChatTheme } from './theme';
+import { PluggableList } from 'react-markdown/lib';
 
-export interface SessionsProps {
+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' | 'full';
+    viewType?: 'companion' | 'console';
     /**
      * The list of sessions to display.
      */
@@ -17,17 +27,17 @@ export interface SessionsProps {
      */
     activeSessionId?: string;
     /**
-     * Indicates whether the sessions are currently loading.
+     * Custom theme for the chat.
      */
-    isLoading?: boolean;
+    theme?: ChatTheme;
     /**
-     * Placeholder text for the input field.
+     * Remark plugins to apply to the request/response.
      */
-    inputPlaceholder?: string;
+    remarkPlugins?: PluggableList[];
     /**
-     * Array of transformer functions to apply to the response.
+     * Whether to display a loading state.
      */
-    responseTransformers?: ResponseTransformer[];
+    isLoading?: boolean;
     /**
      * Callback function to handle when a session is selected.
      */
@@ -37,12 +47,8 @@ export interface SessionsProps {
      */
     onDeleteSession?: (sessionId: string) => void;
     /**
-     * Callback function to handle sending a new message.
-     */
-    onSendMessage?: (message: string) => void;
-    /**
-     * Callback function to handle stopping the current action.
+     * Callback function to handle creating a new session.
      */
-    onStopMessage?: () => void;
+    onNewSession?: () => void;
 }
-export declare const Sessions: FC<SessionsProps>;
+export declare const Chat: FC<ChatProps>;

package/dist/ChatContext.d.ts

@@ -0,0 +1,16 @@
+import { Session } from './types';
+import { ChatTheme } from './theme';
+import { PluggableList } from 'react-markdown/lib';
+
+export interface ChatContextProps {
+    sessions: Session[];
+    activeSessionId: string | null;
+    theme?: ChatTheme;
+    isLoading?: 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,9 @@
+import { FC, PropsWithChildren } from 'react';
+
+export interface CodeHighlighterProps extends PropsWithChildren {
+    /**
+     * The class name to apply to the code block.
+     */
+    className?: 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,4 @@
+export * from './Markdown';
+export * from './Table';
+export * from './CodeHighlighter';
+export * from './plugins';

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;

package/dist/SessionMessages/MessageActions.d.ts

@@ -0,0 +1,45 @@
+import { FC, PropsWithChildren, ReactElement } from 'react';
+
+export interface MessageActionsProps extends PropsWithChildren {
+    /**
+     * Question to be copied
+     */
+    question: string;
+    /**
+     * Response to be copied
+     */
+    response?: string;
+    /**
+     * Icon to show for copy.
+     */
+    copyIcon?: ReactElement;
+    /**
+     * Icon to show for thumbs up.
+     */
+    thumbsUpIcon?: ReactElement;
+    /**
+     * Icon to show for thumbs down.
+     */
+    thumbsDownIcon?: ReactElement;
+    /**
+     * Icon to show for refresh.
+     */
+    refreshIcon?: ReactElement;
+    /**
+     * Callback function to handle copying.
+     */
+    onCopy?: () => void;
+    /**
+     * Callback function to handle upvoting.
+     */
+    onUpvote?: () => void;
+    /**
+     * Callback function to handle downvoting.
+     */
+    onDownvote?: () => void;
+    /**
+     * Callback function to handle refreshing.
+     */
+    onRefresh?: () => void;
+}
+export declare const MessageActions: FC<MessageActionsProps>;

package/dist/SessionMessages/MessageFile.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactElement } from 'react';
+import { ConversationFile } from '../types';
+
+export interface MessageFileProps extends ConversationFile {
+    /**
+     * Icon to show for delete.
+     */
+    fileIcon?: ReactElement;
+    /**
+     * Limit for the name.
+     */
+    limit?: number;
+}
+export declare const MessageFile: FC<MessageFileProps>;

package/dist/SessionMessages/MessageFiles.d.ts

@@ -0,0 +1,11 @@
+import { ConversationFile } from '../types';
+import { FC, PropsWithChildren } from 'react';
+
+interface MessageFilesProps extends PropsWithChildren {
+    /**
+     * Files to render.
+     */
+    files: ConversationFile[];
+}
+export declare const MessageFiles: FC<MessageFilesProps>;
+export {};

package/dist/SessionMessages/MessageQuestion.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+
+export interface MessageQuestionProps extends PropsWithChildren {
+    /**
+     * Question to render.
+     */
+    question: string;
+}
+export declare const MessageQuestion: FC<MessageQuestionProps>;

package/dist/SessionMessages/MessageResponse.d.ts

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren } from 'react';
+
+export interface MessageResponseProps extends PropsWithChildren {
+    /**
+     * Response to render.
+     */
+    response: string;
+    /**
+     * Whether the response is loading.
+     */
+    isLoading?: boolean;
+}
+export declare const MessageResponse: FC<MessageResponseProps>;

package/dist/SessionMessages/MessageSource.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ConversationSource } from '../types';
+
+export interface MessageSourceProps extends ConversationSource {
+    /**
+     * Limit for the title.
+     */
+    limit?: number;
+}
+export declare const MessageSource: FC<MessageSourceProps>;

package/dist/SessionMessages/MessageSources.d.ts

@@ -0,0 +1,11 @@
+import { ConversationSource } from '../types';
+import { FC, PropsWithChildren } from 'react';
+
+interface MessageSourcesProps extends PropsWithChildren {
+    /**
+     * Sources to render.
+     */
+    sources: ConversationSource[];
+}
+export declare const MessageSources: FC<MessageSourcesProps>;
+export {};

package/dist/SessionMessages/SessionEmpty.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+
+interface SessionEmptyProps extends PropsWithChildren {
+}
+export declare const SessionEmpty: FC<SessionEmptyProps>;
+export {};

package/dist/SessionMessages/SessionMessage.d.ts

@@ -0,0 +1,15 @@
+import { FC, PropsWithChildren } from 'react';
+import { Conversation } from '../types';
+
+interface SessionMessageProps extends PropsWithChildren {
+    /**
+     * Conversation to render.
+     */
+    conversation: Conversation;
+    /**
+     * Whether the message is the last one in the list.
+     */
+    isLast?: boolean;
+}
+export declare const SessionMessage: FC<SessionMessageProps>;
+export {};

package/dist/SessionMessages/SessionMessagePanel.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+
+export declare const SessionMessagePanel: FC<PropsWithChildren>;

package/dist/SessionMessages/SessionMessages.d.ts

@@ -0,0 +1,23 @@
+import { default as React, ReactNode } from 'react';
+import { Conversation } from '../types';
+
+interface SessionMessagesProps {
+    /**
+     * Content to display when there are no sessions selected or a new session is started.
+     */
+    newSessionContent?: string | ReactNode;
+    /**
+     * Limit the number of results returned. Clientside pagination.
+     */
+    limit?: number | null;
+    /**
+     * Text to display for the show more button.
+     */
+    showMoreText?: string;
+    /**
+     * Render function for the session messages.
+     */
+    children?: (conversations: Conversation[]) => ReactNode;
+}
+export declare const SessionMessages: React.FC<SessionMessagesProps>;
+export {};

package/dist/SessionMessages/SessionMessagesHeader.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+
+export declare const SessionMessagesHeader: FC<PropsWithChildren>;

package/dist/SessionMessages/index.d.ts

@@ -0,0 +1,12 @@
+export * from './SessionEmpty';
+export * from './SessionMessagesHeader';
+export * from './SessionMessagePanel';
+export * from './SessionMessage';
+export * from './SessionMessages';
+export * from './MessageSource';
+export * from './MessageActions';
+export * from './MessageFile';
+export * from './MessageFiles';
+export * from './MessageQuestion';
+export * from './MessageResponse';
+export * from './MessageSources';

package/dist/SessionsList/NewSessionButton.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+
+interface NewSessionButtonProps extends PropsWithChildren {
+    /**
+     * Text for the new session button.
+     */
+    newSessionText?: string | ReactNode;
+}
+export declare const NewSessionButton: FC<NewSessionButtonProps>;
+export {};

package/dist/SessionsList/SessionGroups.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+import { GroupedSessions } from '../utils';
+
+export interface SessionGroupsProps {
+    /**
+     * Render function for the session groups.
+     */
+    children: (groups: GroupedSessions[]) => ReactNode;
+}
+export declare const SessionGroups: FC<SessionGroupsProps>;

package/dist/SessionsList/SessionListItem.d.ts

@@ -0,0 +1,22 @@
+import { FC, PropsWithChildren, ReactElement } from 'react';
+import { Session } from '../types';
+
+export interface SessionListItemProps extends PropsWithChildren {
+    /**
+     * Session to display.
+     */
+    session: Session;
+    /**
+     * Indicates whether the session is deletable.
+     */
+    deletable?: boolean;
+    /**
+     * Icon to show for delete.
+     */
+    deleteIcon?: ReactElement;
+    /**
+     * Limit for the ellipsis.
+     */
+    limit?: number;
+}
+export declare const SessionListItem: FC<SessionListItemProps>;

package/dist/SessionsList/SessionsGroup.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+
+interface SessionsGroupProps extends PropsWithChildren {
+    /**
+     * Heading for the session group.
+     */
+    heading?: string | ReactNode;
+}
+export declare const SessionsGroup: FC<SessionsGroupProps>;
+export {};

package/dist/SessionsList/SessionsList.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+
+export declare const SessionsList: FC<PropsWithChildren>;

package/dist/SessionsList/index.d.ts

@@ -0,0 +1,5 @@
+export * from './SessionsList';
+export * from './SessionListItem';
+export * from './NewSessionButton';
+export * from './SessionGroups';
+export * from './SessionsGroup';