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: {