From bfe9b0546005405dd64ee504a26cbecb2a631703 Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Thu, 1 Aug 2024 21:20:49 +0300 Subject: [PATCH 01/11] fix textarea action align --- src/theme.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/theme.ts b/src/theme.ts index a9766be..dfbc22c 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -90,8 +90,7 @@ export const chatTheme: ChatTheme = { console: 'min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded-3xl', companion: 'w-full h-full', group: 'text-xs text-gray-400 mt-4 hover:bg-transparent mb-1', - create: - 'relative mb-4 rounded-[10px]', + create: 'relative mb-4 rounded-[10px]', session: { base: 'my-1 rounded-[10px] p-2 text-typography hover:bg-gray-800/50 border border-transparent hover:border-gray-700/50', active: @@ -160,9 +159,9 @@ export const chatTheme: ChatTheme = { base: 'flex mt-4 relative', upload: 'px-5 py-2 text-white size-10', input: - 'w-full text-typography border border-gray-700/70 rounded-3xl px-3 py-2 pr-16 after:!mx-10 [&>textarea]:w-full', + 'w-full text-typography border border-gray-700/70 rounded-3xl px-3 py-2 pr-16 after:!mx-10 [&>textarea]:w-full [&>textarea]:flex-none', actions: { - base: 'absolute flex gap-2 items-center right-5 top-[50%] -translate-y-1/2 z-10', + base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10', send: 'px-3 py-3 text-white bg-gray-800 hover:bg-primary-hover rounded-full ', stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 ' } From 90f75db883e512b5573de2976ab5e67addd0492e Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Thu, 1 Aug 2024 21:30:29 +0300 Subject: [PATCH 02/11] release v1.0.5 --- CHANGELOG.md | 3 +++ package.json | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d055a2f..1efe00f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,2 +1,5 @@ # 0.0.1 - First publish + +# 1.0.5 +- Update theme diff --git a/package.json b/package.json index b011457..88e1bf2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reachat", - "version": "1.0.4", + "version": "1.0.5", "description": "Chat UI for Building LLMs", "scripts": { "build-storybook": "storybook build", From 77f7678cc5eaa3747294335b81631e44835dc5da Mon Sep 17 00:00:00 2001 From: Stephanie Yang Date: Thu, 1 Aug 2024 23:54:09 -0500 Subject: [PATCH 03/11] add isLast property to SessionMessage component --- package-lock.json | 4 +- .../SessionMessage/SessionMessage.tsx | 1 + stories/Companion.stories.tsx | 6 ++- stories/Console.stories.tsx | 44 ++++++++++++------- stories/Integration.stories.tsx | 6 ++- 5 files changed, 40 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index 296ad77..a751ce1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "reachat", - "version": "1.0.1", + "version": "1.0.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "reachat", - "version": "1.0.1", + "version": "1.0.5", "license": "Apache-2.0", "dependencies": { "@radix-ui/react-slot": "^1.1.0", diff --git a/src/SessionMessages/SessionMessage/SessionMessage.tsx b/src/SessionMessages/SessionMessage/SessionMessage.tsx index baa6626..cea1950 100644 --- a/src/SessionMessages/SessionMessage/SessionMessage.tsx +++ b/src/SessionMessages/SessionMessage/SessionMessage.tsx @@ -35,6 +35,7 @@ interface SessionMessageProps extends PropsWithChildren { /** * Whether the message is the last one in the list. + * This let's the chat know when to show the loading cursor. */ isLast?: boolean; } diff --git a/stories/Companion.stories.tsx b/stories/Companion.stories.tsx index c229e65..15e8228 100644 --- a/stories/Companion.stories.tsx +++ b/stories/Companion.stories.tsx @@ -81,10 +81,11 @@ export const Basic = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -130,10 +131,11 @@ export const Empty = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } diff --git a/stories/Console.stories.tsx b/stories/Console.stories.tsx index 4c38b11..99e2470 100644 --- a/stories/Console.stories.tsx +++ b/stories/Console.stories.tsx @@ -1,4 +1,4 @@ -import { useState, useRef, FC, useContext, Fragment } from 'react'; +import { useState, useRef, FC, useContext } from 'react'; import { Meta } from '@storybook/react'; import { Chat, @@ -86,10 +86,11 @@ export const Basic = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -139,10 +140,11 @@ export const Embeds = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -194,10 +196,11 @@ export const DefaultSession = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -305,10 +308,11 @@ export const FileUploads = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -360,10 +364,11 @@ export const DefaultInputValue = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -410,10 +415,11 @@ export const UndeleteableSessions = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -498,10 +504,11 @@ export const SessionGrouping = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -568,10 +575,11 @@ export const HundredSessions = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -642,10 +650,11 @@ export const HundredConversations = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -708,10 +717,11 @@ export const LongSessionNames = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -840,10 +850,11 @@ export const MarkdownShowcase = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -930,10 +941,11 @@ export const CVEExample = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -1044,10 +1056,11 @@ export const ConversationSources = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -1330,10 +1343,11 @@ export const ImageFiles = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } diff --git a/stories/Integration.stories.tsx b/stories/Integration.stories.tsx index a2bd553..469bda9 100644 --- a/stories/Integration.stories.tsx +++ b/stories/Integration.stories.tsx @@ -169,10 +169,11 @@ export const _OpenAI = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -336,10 +337,11 @@ export const VercelAI = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } From e1d97a5e42d87a6c426be8b791cadc8d0e6ef43d Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Fri, 2 Aug 2024 12:22:33 +0300 Subject: [PATCH 04/11] define light theme --- package-lock.json | 10 +-- src/assets/trash.svg | 8 +- src/theme.ts | 79 ++++++++++++------ stories/Companion.stories.tsx | 4 +- stories/Console.stories.tsx | 34 ++++---- stories/Integration.stories.tsx | 4 +- tailwind.config.ts | 137 +++++++++++++++++--------------- vite.config.ts | 2 +- 8 files changed, 159 insertions(+), 119 deletions(-) diff --git a/package-lock.json b/package-lock.json index 296ad77..45f5f3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "reachat", - "version": "1.0.1", + "version": "1.0.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "reachat", - "version": "1.0.1", + "version": "1.0.5", "license": "Apache-2.0", "dependencies": { "@radix-ui/react-slot": "^1.1.0", @@ -16835,9 +16835,9 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.6", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.6.tgz", - "integrity": "sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==", + "version": "3.4.7", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.7.tgz", + "integrity": "sha512-rxWZbe87YJb4OcSopb7up2Ba4U82BoiSGUdoDr3Ydrg9ckxFS/YWsvhN323GMcddgU65QRy7JndC7ahhInhvlQ==", "dev": true, "dependencies": { "@alloc/quick-lru": "^5.2.0", diff --git a/src/assets/trash.svg b/src/assets/trash.svg index 02f7c00..f2384e2 100644 --- a/src/assets/trash.svg +++ b/src/assets/trash.svg @@ -1 +1,7 @@ - \ No newline at end of file + + + + + diff --git a/src/theme.ts b/src/theme.ts index dfbc22c..1784070 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -81,20 +81,27 @@ export interface ChatTheme { } export const chatTheme: ChatTheme = { - base: 'text-white', + base: 'dark:text-white text-gray-500', console: 'flex w-full gap-5 h-full', companion: 'w-full h-full overflow-hidden', empty: 'text-center flex-1', sessions: { base: 'overflow-auto', - console: 'min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded-3xl', + console: + 'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl', companion: 'w-full h-full', - group: 'text-xs text-gray-400 mt-4 hover:bg-transparent mb-1', - create: 'relative mb-4 rounded-[10px]', + group: + 'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1', + create: 'relative mb-4 rounded-[10px] text-white', session: { - base: 'my-1 rounded-[10px] p-2 text-typography hover:bg-gray-800/50 border border-transparent hover:border-gray-700/50', - active: - 'bg-gray-800/70 border border-gray-700/70 hover:bg-gray-800/50 border-gray-700/50 text-white', + base: [ + 'my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500', + 'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200' + ].join(' '), + active: [ + 'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ', + 'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50' + ].join(' '), delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-50' } }, @@ -104,37 +111,51 @@ export const chatTheme: ChatTheme = { companion: 'flex w-full h-full', back: 'self-start p-0 my-2', inner: 'flex-1 h-full flex flex-col', - title: 'text-2xl font-bold', - date: 'text-sm whitespace-nowrap pt-2', - content: 'mt-2 flex-1 overflow-auto', + title: ['text-2xl font-bold text-gray-500', 'dark:text-gray-200'].join(' '), + date: 'text-sm whitespace-nowrap pt-2 text-gray-400', + content: [ + 'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200', + 'dark:[&_hr]:bg-gray-800/60' + ].join(' '), header: 'flex justify-between items-start gap-2', showMore: 'mb-4', message: { - base: 'mt-4 mb-4 flex flex-col p-0 rounded border-none', - question: - 'font-semibold text-gray-400 mb-4 px-4 py-3 pb-1 rounded-3xl rounded-br-none text-typography bg-gray-900/60 border border-gray-700/50', - response: '', + base: [ + 'mt-4 mb-4 flex flex-col p-0 rounded border-none bg-white', + 'dark:bg-panel' + ].join(' '), + question: [ + 'font-semibold mb-4 px-4 py-3 pb-1 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900', + 'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100' + ].join(' '), + response: ['text-gray-900', 'dark:text-gray-100'].join(' '), cursor: 'inline-block w-1 h-4 bg-current', files: { base: 'mb-2 flex flex-wrap gap-3 ', file: { - base: 'flex items-center gap-2 border border-gray-700 p-2 rounded cursor-pointer', - name: 'text-sm' + base: [ + 'flex items-center gap-2 border border-gray-300 p-2 rounded cursor-pointer', + 'dark:border-gray-700' + ].join(' '), + name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ') } }, sources: { base: 'my-4 flex flex-wrap gap-3', source: { - base: 'flex gap-2 border border-gray-700 p-2 rounded cursor-pointer', + base: [ + 'flex gap-2 border border-gray-200 p-2 rounded cursor-pointer', + 'dark:border-gray-700' + ].join(' '), image: 'w-6 h-6 rounded-md', title: 'text-md block', - url: 'text-sm text-blue-700 underline' + url: 'text-sm text-blue-400 underline' } }, markdown: { copy: 'absolute right-0 top-0 [&>svg]:w-4 [&>svg]:h-4 opacity-50', p: 'mb-2', - a: 'text-blue-700 underline', + a: 'text-blue-400 underline', table: 'table-auto w-full m-2', th: 'px-4 py-2 text-left font-bold border-b border-gray-500', td: 'px-4 py-2', @@ -144,8 +165,11 @@ export const chatTheme: ChatTheme = { ol: 'mb-4 list-decimal' }, footer: { - base: 'mt-3 flex gap-1.5', - copy: 'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white', + base: 'mt-3 flex gap-1.5 text-gray-400', + copy: [ + 'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-200 hover:text-gray-500', + 'dark:hover:bg-gray-800 dark:hover:text-white' + ].join(' '), upvote: 'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white', downvote: @@ -157,12 +181,17 @@ export const chatTheme: ChatTheme = { }, input: { base: 'flex mt-4 relative', - upload: 'px-5 py-2 text-white size-10', - input: - 'w-full text-typography border border-gray-700/70 rounded-3xl px-3 py-2 pr-16 after:!mx-10 [&>textarea]:w-full [&>textarea]:flex-none', + upload: ['px-5 py-2 text-gray-400 size-10', 'dark:gray-500'].join(' '), + input: [ + 'w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:!mx-10 bg-white [&>textarea]:w-full [&>textarea]:flex-none', + 'dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40' + ].join(' '), actions: { base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10', - send: 'px-3 py-3 text-white bg-gray-800 hover:bg-primary-hover rounded-full ', + send: [ + 'px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500', + 'dark:text-white dark:bg-gray-800 hover:dark:bg-gray-700' + ].join(' '), stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 ' } } diff --git a/stories/Companion.stories.tsx b/stories/Companion.stories.tsx index c229e65..6e0a880 100644 --- a/stories/Companion.stories.tsx +++ b/stories/Companion.stories.tsx @@ -34,11 +34,11 @@ export const Basic = () => { ]); return (
@@ -99,11 +99,11 @@ export const Basic = () => { export const Empty = () => { return (
diff --git a/stories/Console.stories.tsx b/stories/Console.stories.tsx index 4c38b11..a57f6ad 100644 --- a/stories/Console.stories.tsx +++ b/stories/Console.stories.tsx @@ -51,6 +51,7 @@ export default { export const Basic = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -104,6 +104,7 @@ export const Basic = () => { export const Embeds = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -157,6 +157,7 @@ export const Embeds = () => { export const DefaultSession = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -212,6 +212,7 @@ export const DefaultSession = () => { export const Loading = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -269,6 +269,7 @@ export const Loading = () => { export const FileUploads = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -323,6 +323,7 @@ export const FileUploads = () => { export const DefaultInputValue = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -378,6 +378,7 @@ export const DefaultInputValue = () => { export const UndeleteableSessions = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -461,6 +461,7 @@ export const SessionGrouping = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -536,6 +536,7 @@ export const HundredSessions = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -606,6 +606,7 @@ export const HundredConversations = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -672,6 +672,7 @@ export const LongSessionNames = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -804,6 +804,7 @@ export const MarkdownShowcase = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -893,6 +893,7 @@ export const CVEExample = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -948,6 +948,7 @@ export const CVEExample = () => { export const Empty = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -1008,6 +1008,7 @@ export const Empty = () => { export const ConversationSources = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -1159,6 +1159,7 @@ const CustomSessionListItem: FC = ({ export const CustomComponents = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -1294,6 +1294,7 @@ export const ImageFiles = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > diff --git a/stories/Integration.stories.tsx b/stories/Integration.stories.tsx index a2bd553..d816bec 100644 --- a/stories/Integration.stories.tsx +++ b/stories/Integration.stories.tsx @@ -129,6 +129,7 @@ export const _OpenAI = () => { onChange={e => setApiKey(e.target.value)} />
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -295,6 +295,7 @@ export const VercelAI = () => { onChange={e => setApiKey(e.target.value)} />
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > diff --git a/tailwind.config.ts b/tailwind.config.ts index 475ef92..2d09be9 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,75 +5,80 @@ import { colorPalette } from 'reablocks'; module.exports = { content: [ - "./index.html", - "./src/**/*.{js,ts,jsx,tsx}", - "./node_modules/reablocks/**/*.{js,jsx,ts,tsx}", + './index.html', + './src/**/*.{js,ts,jsx,tsx}', + './stories/**/*.{js,ts,jsx,tsx}', + './node_modules/reablocks/**/*.{js,jsx,ts,tsx}' ], + darkMode: 'selector', + lightMode: 'selector', theme: { - extend: { - borderRadius: { - '3xl': '20px', - }, - colors: { - primary: { - DEFAULT: colorPalette.blue[500], - active: colorPalette.blue[500], - hover: colorPalette.blue[600], - inactive: colorPalette.blue[200] - }, - secondary: { - DEFAULT: colorPalette.gray[700], - active: colorPalette.gray[700], - hover: colorPalette.gray[800], - inactive: colorPalette.gray[400] - }, - success: { - DEFAULT: colorPalette.green[500], - active: colorPalette.green[500], - hover: colorPalette.green[600] - }, - error: { - DEFAULT: colorPalette.red[500], - active: colorPalette.red[500], - hover: colorPalette.red[600] - }, - warning: { - DEFAULT: colorPalette.orange[500], - active: colorPalette.orange[500], - hover: colorPalette.orange[600] - }, - info: { - DEFAULT: colorPalette.blue[500], - active: colorPalette.blue[500], - hover: colorPalette.blue[600] - }, - background: { - level1: colorPalette.white, - level2: colorPalette.gray[950], - level3: colorPalette.gray[900], - level4: colorPalette.gray[800], - }, - panel: { - DEFAULT: colorPalette['black-pearl'], - accent: colorPalette['charade'] - }, - surface: { - DEFAULT: colorPalette['charade'], - - }, - typography: { - DEFAULT: colorPalette['athens-gray'], - }, - accent: { - DEFAULT: colorPalette['waterloo'], - active: colorPalette['anakiwa'] + extend: { + borderRadius: { + '3xl': '20px' }, + colors: { + primary: { + DEFAULT: colorPalette.blue[500], + active: colorPalette.blue[500], + hover: colorPalette.blue[600], + inactive: colorPalette.blue[200] + }, + secondary: { + DEFAULT: colorPalette.gray[700], + active: colorPalette.gray[700], + hover: colorPalette.gray[800], + inactive: colorPalette.gray[400] + }, + success: { + DEFAULT: colorPalette.green[500], + active: colorPalette.green[500], + hover: colorPalette.green[600] + }, + error: { + DEFAULT: colorPalette.red[500], + active: colorPalette.red[500], + hover: colorPalette.red[600] + }, + warning: { + DEFAULT: colorPalette.orange[500], + active: colorPalette.orange[500], + hover: colorPalette.orange[600] + }, + info: { + DEFAULT: colorPalette.blue[500], + active: colorPalette.blue[500], + hover: colorPalette.blue[600] + }, + background: { + level1: colorPalette.white, + level2: colorPalette.gray[950], + level3: colorPalette.gray[900], + level4: colorPalette.gray[800] + }, + panel: { + DEFAULT: colorPalette['black-pearl'], + accent: colorPalette['charade'] + }, + surface: { + DEFAULT: colorPalette['charade'] + }, + typography: { + DEFAULT: colorPalette['athens-gray'] + }, + accent: { + DEFAULT: colorPalette['waterloo'], + active: colorPalette['anakiwa'] + } + } } - } -}, + }, plugins: [ - plugin(({ addVariant }) => { - addVariant('disabled-within', '&:has(input:is(:disabled),button:is(:disabled))'); - }) -], + plugin(({ addVariant }) => { + addVariant( + 'disabled-within', + '&:has(input:is(:disabled),button:is(:disabled))' + ); + }) + ] }; diff --git a/vite.config.ts b/vite.config.ts index aeee388..3bef7f2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -42,7 +42,7 @@ export default defineConfig(({ mode }) => copyPublicDir: false, lib: { entry: resolve('src', 'index.ts'), - name: 'reablocks', + name: 'reachat', fileName: 'index' }, rollupOptions: { From b48eb25f9db29ddcc3b7e6ce58827e7f3d63adbf Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Fri, 2 Aug 2024 14:03:08 +0300 Subject: [PATCH 05/11] style updates --- .../SessionMessage/MessageSource.tsx | 6 +- src/SessionMessages/SessionMessagePanel.tsx | 2 +- src/assets/placeholder-dark.svg | 500 ++++++++++++++++++ src/assets/placeholder.svg | 258 +++++++++ src/theme.ts | 25 +- stories/Companion.stories.tsx | 31 +- stories/Console.stories.tsx | 11 +- 7 files changed, 803 insertions(+), 30 deletions(-) create mode 100644 src/assets/placeholder-dark.svg create mode 100644 src/assets/placeholder.svg diff --git a/src/SessionMessages/SessionMessage/MessageSource.tsx b/src/SessionMessages/SessionMessage/MessageSource.tsx index 8c83734..c24bc86 100644 --- a/src/SessionMessages/SessionMessage/MessageSource.tsx +++ b/src/SessionMessages/SessionMessage/MessageSource.tsx @@ -11,11 +11,13 @@ export interface MessageSourceProps extends ConversationSource { } export const MessageSource: FC = ({ title, url, image, limit = 50 }) => { - const { theme } = useContext(ChatContext); + const { theme, isCompact } = useContext(ChatContext); return (
{ if (url) { window.open(url, '_blank'); diff --git a/src/SessionMessages/SessionMessagePanel.tsx b/src/SessionMessages/SessionMessagePanel.tsx index 2bf848f..28c7f18 100644 --- a/src/SessionMessages/SessionMessagePanel.tsx +++ b/src/SessionMessages/SessionMessagePanel.tsx @@ -37,7 +37,7 @@ export const SessionMessagePanel: FC = ({ children }) => { className={cn(theme.messages.back)} > - Back + Back )} {children} diff --git a/src/assets/placeholder-dark.svg b/src/assets/placeholder-dark.svg new file mode 100644 index 0000000..01f3541 --- /dev/null +++ b/src/assets/placeholder-dark.svg @@ -0,0 +1,500 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/placeholder.svg b/src/assets/placeholder.svg new file mode 100644 index 0000000..726ec71 --- /dev/null +++ b/src/assets/placeholder.svg @@ -0,0 +1,258 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/theme.ts b/src/theme.ts index 1784070..ad7bf4c 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -42,6 +42,7 @@ export interface ChatTheme { base: string; source: { base: string; + companion: string; image: string; title: string; url: string; @@ -82,7 +83,7 @@ export interface ChatTheme { export const chatTheme: ChatTheme = { base: 'dark:text-white text-gray-500', - console: 'flex w-full gap-5 h-full', + console: 'flex w-full gap-10 h-full', companion: 'w-full h-full overflow-hidden', empty: 'text-center flex-1', sessions: { @@ -95,14 +96,15 @@ export const chatTheme: ChatTheme = { create: 'relative mb-4 rounded-[10px] text-white', session: { base: [ - 'my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500', + 'group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500', 'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200' ].join(' '), active: [ 'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ', - 'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50' + 'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50', + '[&_button]:!opacity-100' ].join(' '), - delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-50' + delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:!opacity-50' } }, messages: { @@ -111,8 +113,10 @@ export const chatTheme: ChatTheme = { companion: 'flex w-full h-full', back: 'self-start p-0 my-2', inner: 'flex-1 h-full flex flex-col', - title: ['text-2xl font-bold text-gray-500', 'dark:text-gray-200'].join(' '), - date: 'text-sm whitespace-nowrap pt-2 text-gray-400', + title: ['text-base font-bold text-gray-500', 'dark:text-gray-200'].join( + ' ' + ), + date: 'text-xs whitespace-nowrap pt-2 text-gray-400', content: [ 'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200', 'dark:[&_hr]:bg-gray-800/60' @@ -125,7 +129,7 @@ export const chatTheme: ChatTheme = { 'dark:bg-panel' ].join(' '), question: [ - 'font-semibold mb-4 px-4 py-3 pb-1 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900', + 'font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900', 'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100' ].join(' '), response: ['text-gray-900', 'dark:text-gray-100'].join(' '), @@ -134,7 +138,7 @@ export const chatTheme: ChatTheme = { base: 'mb-2 flex flex-wrap gap-3 ', file: { base: [ - 'flex items-center gap-2 border border-gray-300 p-2 rounded cursor-pointer', + 'flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer', 'dark:border-gray-700' ].join(' '), name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ') @@ -144,10 +148,11 @@ export const chatTheme: ChatTheme = { base: 'my-4 flex flex-wrap gap-3', source: { base: [ - 'flex gap-2 border border-gray-200 p-2 rounded cursor-pointer', + 'flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer', 'dark:border-gray-700' ].join(' '), - image: 'w-6 h-6 rounded-md', + companion: 'flex-1 px-3 py-1.5', + image: 'max-w-10 max-h-10 rounded-md w-full h-fit self-center', title: 'text-md block', url: 'text-sm text-blue-400 underline' } diff --git a/stories/Companion.stories.tsx b/stories/Companion.stories.tsx index 0d1c5c2..8df57d1 100644 --- a/stories/Companion.stories.tsx +++ b/stories/Companion.stories.tsx @@ -20,6 +20,9 @@ import { } from './examples'; import { useState } from 'react'; +import Placeholder from '@/assets/placeholder.svg?react'; +import PlaceholderDark from '@/assets/placeholder-dark.svg?react'; + export default { title: 'Demos/Companion', component: Chat @@ -127,21 +130,21 @@ export const Empty = () => { } - - - - {conversations => - conversations.map((conversation, index) => ( - - )) +
+ + + +

+ Welcome to Reachat, a UI library for effortlessly building and + customizing chat experiences with Tailwind. +

+
} - - - + /> +
+
); diff --git a/stories/Console.stories.tsx b/stories/Console.stories.tsx index 613449a..d127cca 100644 --- a/stories/Console.stories.tsx +++ b/stories/Console.stories.tsx @@ -30,6 +30,8 @@ import { } from 'reablocks'; import { subDays, subMinutes, subHours } from 'date-fns'; import MenuIcon from '@/assets/menu.svg?react'; +import Placeholder from '@/assets/placeholder.svg?react'; +import PlaceholderDark from '@/assets/placeholder-dark.svg?react'; import { MessageActions } from '@/SessionMessages'; import { MessageFiles } from '@/SessionMessages'; import { MessageQuestion } from '@/SessionMessages'; @@ -1003,9 +1005,12 @@ export const Empty = () => {
-

- No messages yet. Start a new conversation! +

+ + +

+ Welcome to Reachat, a UI library for effortlessly building and + customizing chat experiences with Tailwind.

} From 7a46c3860cc72069bcba9aedd67d0345ea63d3e6 Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Fri, 2 Aug 2024 14:11:38 +0300 Subject: [PATCH 06/11] fix message bg --- src/theme.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/theme.ts b/src/theme.ts index ad7bf4c..c537d31 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -124,10 +124,7 @@ export const chatTheme: ChatTheme = { header: 'flex justify-between items-start gap-2', showMore: 'mb-4', message: { - base: [ - 'mt-4 mb-4 flex flex-col p-0 rounded border-none bg-white', - 'dark:bg-panel' - ].join(' '), + base: 'mt-4 mb-4 flex flex-col p-0 rounded border-none bg-transparent', question: [ 'font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900', 'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100' From e1e41db6c05623c91a283e82db111464af54d430 Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Fri, 2 Aug 2024 14:17:04 +0300 Subject: [PATCH 07/11] fix spacing --- src/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme.ts b/src/theme.ts index c537d31..798b4d7 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -109,7 +109,7 @@ export const chatTheme: ChatTheme = { }, messages: { base: '', - console: 'flex flex-col flex-1 overflow-hidden', + console: 'flex flex-col mr-5 flex-1 overflow-hidden', companion: 'flex w-full h-full', back: 'self-start p-0 my-2', inner: 'flex-1 h-full flex flex-col', From 4a549399aec0f1811fa3875f823b10a1f4dbcc8f Mon Sep 17 00:00:00 2001 From: Austin Date: Fri, 2 Aug 2024 07:20:52 -0400 Subject: [PATCH 08/11] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e09af38..6fdf55b 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ theme via Tailwind. - Checkout the [docs and demos](https://reachat.dev) - Checkout the [storybook demos](https://storybook.reachat.dev) - Learn about updates from the [changelog](CHANGELOG.md) +- Download [Figma template](https://www.figma.com/community/file/1401162540082414292/reachat-landing-page-public) ## 💎 Other Projects From a31521c79934cf28e968908b7940cc486b9374a1 Mon Sep 17 00:00:00 2001 From: Austin Date: Fri, 2 Aug 2024 07:22:36 -0400 Subject: [PATCH 09/11] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 88e1bf2..9c762d8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reachat", - "version": "1.0.5", + "version": "1.0.6", "description": "Chat UI for Building LLMs", "scripts": { "build-storybook": "storybook build", From 087b654559eaf696d5aa25d0553c3cb05578e012 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Fri, 2 Aug 2024 13:43:20 +0200 Subject: [PATCH 10/11] Fix url in README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6fdf55b..5f8f81d 100644 --- a/README.md +++ b/README.md @@ -86,5 +86,5 @@ If you want to run reachat locally, its super easy! Thanks to all our contributors! - + From 3e42b27449de84b61cd32968fb9cb8cf1372a8c8 Mon Sep 17 00:00:00 2001 From: Austin Date: Fri, 2 Aug 2024 08:01:00 -0400 Subject: [PATCH 11/11] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 5f8f81d..532f888 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ theme via Tailwind. - Checkout the [storybook demos](https://storybook.reachat.dev) - Learn about updates from the [changelog](CHANGELOG.md) - Download [Figma template](https://www.figma.com/community/file/1401162540082414292/reachat-landing-page-public) +- Try the [sample repo](https://github.com/reaviz/reachat-example) ## 💎 Other Projects