Merge pull request #1 from reaviz/syang/slots

README.md

@@ -26,39 +26,57 @@
 
 ---
 
-## Features
-- Markdown
-- Code block
-- CSV Table
-- JSON Block
-- File Upload Support
+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
+  - Embeds
+  - remark plugin support
+- File Uploads
+- Animations
 - Conversation Pagination
-- Dynamic Grouping
+- Smart/Dynamic Grouping of Sessions
 - Keyboard shortcuts
 - Tailwind for Themeing
 
-## Installation
-- `npm i reachat`
-
-## References
-- https://www.copilotkit.ai/
-- 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
-
-## Credits
-- Icons from [https://lucide.dev/](https://lucide.dev/)
+## 📦 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.json

@@ -42,7 +42,8 @@
     "reablocks": "^8.4.3",
     "react-markdown": "^9.0.1",
     "reakeys": "^2.0.3",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
+    "remark-youtube": "^1.3.2"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^8.2.6",
@@ -114,5 +115,6 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
-  }
+  },
+  "packageManager": "pnpm@9.5.0+sha1.8c155dc114e1689d18937974f6571e0ceee66f1d"
 }

src/Markdown/Markdown.tsx

@@ -31,6 +31,7 @@ export const Markdown: FC<MarkdownWrapperProps> = ({
         th: props => <TableHeaderCell {...props} className="px-4 py-2 text-left font-bold border-b border-gray-500" />,
         td: props => <TableDataCell {...props} className="px-4 py-2" />,
         a: props => <a {...props} className="text-blue-700 underline" />,
+        p: props => <p {...props} className="mb-2" />
       }}
     >
       {children as string}

src/Markdown/index.ts

@@ -1,4 +1,4 @@
 export * from './Markdown';
-export * from './remarkCve';
 export * from './Table';
 export * from './CodeHighlighter';
+export * from './plugins';

src/Markdown/plugins/index.ts

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

src/SessionInput.tsx

@@ -1,21 +1,24 @@
-import { FC, useState, KeyboardEvent, ReactElement, useRef, ChangeEvent } from 'react';
+import {
+  FC,
+  useState,
+  KeyboardEvent,
+  ReactElement,
+  useRef,
+  ChangeEvent,
+  useContext
+} from 'react';
 import { Button, Textarea, cn } from 'reablocks';
 import SendIcon from '@/assets/send.svg?react';
 import StopIcon from '@/assets/stop.svg?react';
 import AttachIcon from '@/assets/paperclip.svg?react';
-import { ChatTheme } from './theme';
+import { SessionsContext } from './SessionsContext';
 
 interface SessionInputProps {
   /**
    * Default value for the input field.
    */
   inputDefaultValue?: string;
 
-  /**
-   * Theme to use for the input.
-   */
-  theme?: ChatTheme;
-
   /**
    * Allowed file types for upload.
    */
@@ -63,7 +66,6 @@ interface SessionInputProps {
 }
 
 export const SessionInput: FC<SessionInputProps> = ({
-  theme,
   allowedFiles,
   onSendMessage,
   isLoading,
@@ -75,6 +77,7 @@ export const SessionInput: FC<SessionInputProps> = ({
   stopIcon = <StopIcon />,
   attachIcon = <AttachIcon />
 }) => {
+  const { theme } = useContext(SessionsContext);
   const [message, setMessage] = useState<string>('');
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -106,7 +109,7 @@ export const SessionInput: FC<SessionInputProps> = ({
         minRows={1}
         autoFocus
         value={message}
-        onChange={(e) => setMessage(e.target.value)}
+        onChange={e => setMessage(e.target.value)}
         defaultValue={inputDefaultValue}
         onKeyPress={handleKeyPress}
         placeholder={inputPlaceholder}

src/SessionMessages/SessionEmpty.tsx

@@ -0,0 +1,14 @@
+import { FC, ReactNode, useContext } from 'react';
+import { SessionsContext } from '@/SessionsContext';
+import { cn } from 'reablocks';
+
+interface SessionEmptyProps {
+  newSessionContent?: string | ReactNode;
+}
+
+export const SessionEmpty: FC<SessionEmptyProps> = ({
+  newSessionContent = ''
+}) => {
+  const { theme } = useContext(SessionsContext);
+  return <div className={cn(theme.empty)}>{newSessionContent}</div>;
+};