reachat 2.1.0-alpha.2 → 2.1.0-alpha.20

package/dist/stories/Changelog.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown } from '@storybook/addon-docs';
+import { Meta, Markdown } from '@storybook/addon-docs/blocks';
 import Readme from "../CHANGELOG.md?raw";
 
 <Meta title="Docs/Changelog" />

package/dist/stories/Chat.stories.tsx

@@ -1,25 +1,26 @@
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
+import { IconButton } from 'reablocks';
+import { useState } from 'react';
+
+import type { Session } from 'reachat';
 import {
+  AppBar,
   Chat,
-  SessionMessages,
   ChatInput,
-  SessionMessagePanel,
   SessionMessage,
-  Session,
-  AppBar
+  SessionMessagePanel,
+  SessionMessages
 } from 'reachat';
-import {
-  fakeSessions,
-  sessionWithSources,
-  sessionsWithFiles
-} from './examples';
-import { useState } from 'react';
+import IconClose from './assets/close-fill.svg?react';
+import ReachatLogo from './assets/logo.svg?react';
 import Placeholder from './assets/placeholder.svg?react';
 import PlaceholderDark from './assets/placeholder-dark.svg?react';
-import ReachatLogo from './assets/logo.svg?react';
 import IconSearch from './assets/search.svg?react';
-import IconClose from './assets/close-fill.svg?react';
-import { IconButton } from 'reablocks';
+import {
+  fakeSessions,
+  sessionsWithFiles,
+  sessionWithSources
+} from './examples';
 
 export default {
   title: 'Demos/Chat',
@@ -36,7 +37,7 @@ export const Compact = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -84,7 +85,7 @@ export const FullScreen = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -132,7 +133,7 @@ export const Empty = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -167,7 +168,7 @@ export const Empty = () => {
               <div className="flex flex-col gap-2 items-center justify-center h-full">
                 <Placeholder className="h-[50%] block dark:hidden max-w-[100%]" />
                 <PlaceholderDark className="h-[50%] hidden dark:block max-w-[100%]" />
-                <p className="text-gray-500 max-w-[400px] text-center">
+                <p className="text-(--content-text-neutral-2) max-w-[400px] text-center">
                   Welcome to Reachat, a UI library for effortlessly building and
                   customizing chat experiences with Tailwind.
                 </p>
@@ -201,7 +202,7 @@ export const WithAppBar = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 800,
         height: 600,
@@ -235,8 +236,12 @@ export const WithAppBar = () => {
             content={
               <div className="flex items-center justify-between w-full">
                 <div className="flex-shrink-0">
-                  <IconButton size="small" variant="outline" className='rounded-full p-3'>
-                    <IconSearch className='w-4 h-4' />
+                  <IconButton
+                    size="small"
+                    variant="outline"
+                    className="rounded-full p-3"
+                  >
+                    <IconSearch className="w-4 h-4" />
                   </IconButton>
                 </div>
                 <div className="flex-grow flex justify-center items-center">
@@ -246,9 +251,9 @@ export const WithAppBar = () => {
                   <IconButton
                     variant="text"
                     size="small"
-                    className='rounded-full p-3'
+                    className="rounded-full p-3"
                   >
-                    <IconClose className='w-4 h-4' />
+                    <IconClose className="w-4 h-4" />
                   </IconButton>
                 </div>
               </div>

package/dist/stories/ChatBubble.stories.tsx

@@ -81,7 +81,7 @@ const ChatSample: FC = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -158,7 +158,7 @@ export const WithChildren: Story = {
       <div className="fixed left-5 bottom-5">
         <ChatBubble {...args}>
           <div
-            className="dark:bg-gray-950 bg-white"
+            className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
             style={{
               width: 350,
               height: 500,
@@ -219,7 +219,7 @@ export const WithChildrenPortal: Story = {
           <p className="text-gray-600">The ChatBubble will portal here!</p>
           <ChatBubble {...args} className="absolute left-5 bottom-5">
             <div
-              className="dark:bg-gray-950 bg-white"
+              className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
               style={{
                 width: 350,
                 height: 500,

package/dist/stories/Companion.stories.tsx

@@ -41,7 +41,7 @@ export const Basic = () => {
   ]);
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -87,7 +87,7 @@ export const Basic = () => {
 export const Empty = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -133,7 +133,7 @@ export const WithAppBar = () => {
   ]);
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -242,7 +242,7 @@ export const TemplatesView = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -307,7 +307,7 @@ export const TemplatesViewWithTitle = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -382,7 +382,7 @@ export const TemplatesViewWithAppBar = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white flex flex-col"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white) flex flex-col"
       style={{
         width: 350,
         height: 500,

package/dist/stories/Console.stories.tsx

@@ -55,7 +55,7 @@ export default {
 export const Basic = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -89,7 +89,7 @@ export const Basic = () => {
 export const Embeds = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -123,7 +123,7 @@ export const Embeds = () => {
 export const DefaultSession = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -159,7 +159,7 @@ export const DefaultSession = () => {
 export const Loading = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -199,7 +199,7 @@ export const FileUploads = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -257,7 +257,7 @@ export const FileUploads = () => {
 export const DefaultInputValue = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -293,7 +293,7 @@ export const DefaultInputValue = () => {
 export const UndeleteableSessions = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -367,7 +367,7 @@ export const SessionGrouping = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -423,7 +423,7 @@ export const HundredSessions = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -474,7 +474,7 @@ export const HundredConversations = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -531,7 +531,7 @@ export const LongSessionNames = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -648,7 +648,7 @@ export const MarkdownShowcase = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -695,7 +695,7 @@ export const CVEExample = () => {
   The listed CVEs are critical vulnerabilities that need immediate attention.
 
   - CVE-2021-34527
-  - CVE-2021-44228
+  - [CVE-2021-44228](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-44228) < Has link
   - CVE-2021-45046
   `;
 
@@ -718,7 +718,7 @@ export const CVEExample = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -754,7 +754,7 @@ export const CVEExample = () => {
 export const Empty = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -817,7 +817,7 @@ export const Empty = () => {
 export const ConversationSources = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -954,7 +954,7 @@ const CustomSessionListItem: FC<SessionListItemProps> = ({
 export const CustomComponents = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -1038,25 +1038,25 @@ export const ImageFiles = () => {
       id: '1',
       name: 'landscape.jpg',
       type: 'image/jpeg',
-      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Faustin.1ee6ee64.jpg&w=640&q=75'
+      url: 'https://picsum.photos/200?random=1'
     },
     {
       id: '2',
       name: 'portrait.jpg',
       type: 'image/jpeg',
-      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fandrew.50c21037.jpeg&w=640&q=75'
+      url: 'https://picsum.photos/200?random=2'
     },
     {
       id: '3',
       name: 'abstract.png',
       type: 'image/jpg',
-      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fkyle.52befaed.jpg&w=640&q=75'
+      url: 'https://picsum.photos/200?random=3'
     },
     {
       id: '4',
       name: 'nature.jpg',
       type: 'image/jpeg',
-      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsteph.8a52b5d2.jpg&w=640&q=75'
+      url: 'https://picsum.photos/200?random=4'
     }
   ];
 
@@ -1089,7 +1089,7 @@ export const ImageFiles = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -1124,7 +1124,7 @@ export const ImageFiles = () => {
 export const CSVPreview = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         inset: 0,

package/dist/stories/Integration.stories.tsx

@@ -126,7 +126,7 @@ export const _OpenAI = () => {
         onChange={e => setApiKey(e.target.value)}
       />
       <div
-        className="dark:bg-gray-950 bg-white"
+        className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
         style={{
           position: 'absolute',
           top: 50,
@@ -273,7 +273,7 @@ export const VercelAI = () => {
         onChange={e => setApiKey(e.target.value)}
       />
       <div
-        className="dark:bg-gray-950 bg-white"
+        className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
         style={{
           position: 'absolute',
           top: 50,

package/dist/stories/Intro.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Docs/Intro" />