reachat 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -34,6 +34,8 @@ theme via Tailwind.
34
34
  - Checkout the [docs and demos](https://reachat.dev)
35
35
  - Checkout the [storybook demos](https://storybook.reachat.dev)
36
36
  - Learn about updates from the [changelog](CHANGELOG.md)
37
+ - Download [Figma template](https://www.figma.com/community/file/1401162540082414292/reachat-landing-page-public)
38
+ - Try the [sample repo](https://github.com/reaviz/reachat-example)
37
39
 
38
40
  ## 💎 Other Projects
39
41
 
@@ -85,5 +87,5 @@ If you want to run reachat locally, its super easy!
85
87
 
86
88
  Thanks to all our contributors!
87
89
 
88
- <a href="https://github.com/reaviz/reaviz/graphs/contributors"><img src="https://opencollective.com/reaviz/contributors.svg?width=890" /></a>
90
+ <a href="https://github.com/reaviz/reachat/graphs/contributors"><img src="https://opencollective.com/reaviz/contributors.svg?width=890" /></a>
89
91
 
@@ -13,6 +13,10 @@ export interface CodeHighlighterProps extends PropsWithChildren {
13
13
  * The class name to apply to the copy button.
14
14
  */
15
15
  copyClassName?: string;
16
+ /**
17
+ * The class name to apply to the toolbar.
18
+ */
19
+ toolbarClassName?: string;
16
20
  /**
17
21
  * Icon to show for copy.
18
22
  */
@@ -39,7 +39,6 @@ export declare const dark: {
39
39
  padding: string;
40
40
  margin: string;
41
41
  overflow: string;
42
- borderRadius: string;
43
42
  };
44
43
  'code[class*="language-"]::-moz-selection': {
45
44
  background: string;
@@ -8,6 +8,7 @@ interface SessionMessageProps extends PropsWithChildren {
8
8
  conversation: Conversation;
9
9
  /**
10
10
  * Whether the message is the last one in the list.
11
+ * This let's the chat know when to show the loading cursor.
11
12
  */
12
13
  isLast?: boolean;
13
14
  }
package/dist/docs.json CHANGED
@@ -488,6 +488,25 @@
488
488
  "name": "string"
489
489
  }
490
490
  },
491
+ "toolbarClassName": {
492
+ "defaultValue": null,
493
+ "description": "The class name to apply to the toolbar.",
494
+ "name": "toolbarClassName",
495
+ "parent": {
496
+ "fileName": "src/Markdown/CodeHighlighter.tsx",
497
+ "name": "CodeHighlighterProps"
498
+ },
499
+ "declarations": [
500
+ {
501
+ "fileName": "src/Markdown/CodeHighlighter.tsx",
502
+ "name": "CodeHighlighterProps"
503
+ }
504
+ ],
505
+ "required": false,
506
+ "type": {
507
+ "name": "string"
508
+ }
509
+ },
491
510
  "copyIcon": {
492
511
  "defaultValue": {
493
512
  "value": "<CopyIcon />"
@@ -511,7 +530,7 @@
511
530
  },
512
531
  "theme": {
513
532
  "defaultValue": {
514
- "value": "{\n 'code[class*=\"language-\"]': {\n 'background': '#11111f',\n 'color': '#e2e8f0',\n 'textShadow': '0 1px rgba(0, 0, 0, 0.3)',\n 'fontFamily': '\"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace',\n 'direction': 'ltr',\n 'textAlign': 'left',\n 'whiteSpace': 'pre',\n 'wordSpacing': 'normal',\n 'wordBreak': 'normal',\n 'lineHeight': '1.5',\n 'MozTabSize': '2',\n 'OTabSize': '2',\n 'tabSize': '2',\n 'WebkitHyphens': 'none',\n 'MozHyphens': 'none',\n 'msHyphens': 'none',\n 'hyphens': 'none'\n },\n 'pre[class*=\"language-\"]': {\n 'background': '#11111f',\n 'color': '#e2e8f0',\n 'textShadow': '0 1px rgba(0, 0, 0, 0.3)',\n 'fontFamily': '\"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace',\n 'direction': 'ltr',\n 'textAlign': 'left',\n 'whiteSpace': 'pre',\n 'wordSpacing': 'normal',\n 'wordBreak': 'normal',\n 'lineHeight': '1.5',\n 'MozTabSize': '2',\n 'OTabSize': '2',\n 'tabSize': '2',\n 'WebkitHyphens': 'none',\n 'MozHyphens': 'none',\n 'msHyphens': 'none',\n 'hyphens': 'none',\n 'padding': '1em',\n 'margin': '0.5em 0',\n 'overflow': 'auto',\n 'borderRadius': '0.3em'\n },\n 'code[class*=\"language-\"]::-moz-selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n 'code[class*=\"language-\"] *::-moz-selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n 'pre[class*=\"language-\"] *::-moz-selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n 'code[class*=\"language-\"]::selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n 'code[class*=\"language-\"] *::selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n 'pre[class*=\"language-\"] *::selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n ':not(pre) > code[class*=\"language-\"]': {\n 'padding': '0.2em 0.3em',\n 'borderRadius': '0.3em',\n 'whiteSpace': 'normal'\n },\n 'comment': {\n 'color': '#64748b',\n 'fontStyle': 'italic'\n },\n 'prolog': {\n 'color': '#64748b'\n },\n 'cdata': {\n 'color': '#64748b'\n },\n 'doctype': {\n 'color': '#e2e8f0'\n },\n 'punctuation': {\n 'color': '#e2e8f0'\n },\n 'entity': {\n 'color': '#3b82f6',\n 'cursor': 'help'\n },\n 'attr-name': {\n 'color': '#f59e0b'\n },\n 'class-name': {\n 'color': '#f59e0b'\n },\n 'boolean': {\n 'color': '#3b82f6'\n },\n 'constant': {\n 'color': '#3b82f6'\n },\n 'number': {\n 'color': '#3b82f6'\n },\n 'atrule': {\n 'color': '#f59e0b'\n },\n 'keyword': {\n 'color': '#f472b6'\n },\n 'property': {\n 'color': '#3b82f6'\n },\n 'tag': {\n 'color': '#3b82f6'\n },\n 'symbol': {\n 'color': '#3b82f6'\n },\n 'deleted': {\n 'color': '#ef4444'\n },\n 'important': {\n 'color': '#f472b6'\n },\n 'selector': {\n 'color': '#10b981'\n },\n 'string': {\n 'color': '#10b981'\n },\n 'char': {\n 'color': '#10b981'\n },\n 'builtin': {\n 'color': '#10b981'\n },\n 'inserted': {\n 'color': '#10b981'\n },\n 'regex': {\n 'color': '#10b981'\n },\n 'attr-value': {\n 'color': '#10b981'\n },\n 'attr-value > .token.punctuation': {\n 'color': '#10b981'\n },\n 'variable': {\n 'color': '#60a5fa'\n },\n 'operator': {\n 'color': '#60a5fa'\n },\n 'function': {\n 'color': '#60a5fa'\n },\n 'url': {\n 'color': '#60a5fa'\n },\n 'attr-value > .token.punctuation.attr-equals': {\n 'color': '#e2e8f0'\n },\n 'special-attr > .token.attr-value > .token.value.css': {\n 'color': '#e2e8f0'\n },\n '.language-css .token.selector': {\n 'color': '#3b82f6'\n },\n '.language-css .token.property': {\n 'color': '#e2e8f0'\n },\n '.language-css .token.function': {\n 'color': '#60a5fa'\n },\n '.language-css .token.url > .token.function': {\n 'color': '#60a5fa'\n },\n '.language-css .token.url > .token.string.url': {\n 'color': '#10b981'\n },\n '.language-css .token.important': {\n 'color': '#f472b6'\n },\n '.language-css .token.atrule .token.rule': {\n 'color': '#f472b6'\n },\n '.language-javascript .token.operator': {\n 'color': '#f472b6'\n },\n '.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation': {\n 'color': '#ef4444'\n },\n '.language-json .token.operator': {\n 'color': '#e2e8f0'\n },\n '.language-json .token.null.keyword': {\n 'color': '#3b82f6'\n },\n '.language-markdown .token.url': {\n 'color': '#e2e8f0'\n },\n '.language-markdown .token.url > .token.operator': {\n 'color': '#e2e8f0'\n },\n '.language-markdown .token.url-reference.url > .token.string': {\n 'color': '#e2e8f0'\n },\n '.language-markdown .token.url > .token.content': {\n 'color': '#60a5fa'\n },\n '.language-markdown .token.url > .token.url': {\n 'color': '#60a5fa'\n },\n '.language-markdown .token.url-reference.url': {\n 'color': '#60a5fa'\n },\n '.language-markdown .token.blockquote.punctuation': {\n 'color': '#64748b',\n 'fontStyle': 'italic'\n },\n '.language-markdown .token.hr.punctuation': {\n 'color': '#64748b',\n 'fontStyle': 'italic'\n },\n '.language-markdown .token.code-snippet': {\n 'color': '#10b981'\n },\n '.language-markdown .token.bold .token.content': {\n 'color': '#f59e0b'\n },\n '.language-markdown .token.italic .token.content': {\n 'color': '#f472b6'\n },\n '.language-markdown .token.strike .token.content': {\n 'color': '#3b82f6'\n },\n '.language-markdown .token.strike .token.punctuation': {\n 'color': '#3b82f6'\n },\n '.language-markdown .token.list.punctuation': {\n 'color': '#3b82f6'\n },\n '.language-markdown .token.title.important > .token.punctuation': {\n 'color': '#3b82f6'\n },\n 'bold': {\n 'fontWeight': 'bold'\n },\n 'italic': {\n 'fontStyle': 'italic'\n },\n 'namespace': {\n 'Opacity': '0.8'\n },\n 'token.tab:not(:empty):before': {\n 'color': '#64748b',\n 'textShadow': 'none'\n },\n 'token.cr:before': {\n 'color': '#64748b',\n 'textShadow': 'none'\n },\n 'token.lf:before': {\n 'color': '#64748b',\n 'textShadow': 'none'\n },\n 'token.space:before': {\n 'color': '#64748b',\n 'textShadow': 'none'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item': {\n 'marginRight': '0.4em'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button': {\n 'background': '#1e293b',\n 'color': '#94a3b8',\n 'padding': '0.1em 0.4em',\n 'borderRadius': '0.3em'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a': {\n 'background': '#1e293b',\n 'color': '#94a3b8',\n 'padding': '0.1em 0.4em',\n 'borderRadius': '0.3em'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span': {\n 'background': '#1e293b',\n 'color': '#94a3b8',\n 'padding': '0.1em 0.4em',\n 'borderRadius': '0.3em'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n '.line-highlight.line-highlight': {\n 'background': 'rgba(59, 130, 246, 0.08)'\n },\n '.line-highlight.line-highlight:before': {\n 'background': '#1e293b',\n 'color': '#e2e8f0',\n 'padding': '0.1em 0.6em',\n 'borderRadius': '0.3em',\n 'boxShadow': '0 2px 0 0 rgba(0, 0, 0, 0.2)'\n },\n '.line-highlight.line-highlight[data-end]:after': {\n 'background': '#1e293b',\n 'color': '#e2e8f0',\n 'padding': '0.1em 0.6em',\n 'borderRadius': '0.3em',\n 'boxShadow': '0 2px 0 0 rgba(0, 0, 0, 0.2)'\n },\n 'pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before': {\n 'backgroundColor': 'rgba(59, 130, 246, 0.08)'\n },\n '.line-numbers.line-numbers .line-numbers-rows': {\n 'borderRightColor': '#1e293b'\n },\n '.command-line .command-line-prompt': {\n 'borderRightColor': '#1e293b'\n },\n '.line-numbers .line-numbers-rows > span:before': {\n 'color': '#64748b'\n },\n '.command-line .command-line-prompt > span:before': {\n 'color': '#64748b'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-1': {\n 'color': '#3b82f6'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-5': {\n 'color': '#3b82f6'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-9': {\n 'color': '#3b82f6'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-2': {\n 'color': '#10b981'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-6': {\n 'color': '#10b981'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-10': {\n 'color': '#10b981'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-3': {\n 'color': '#60a5fa'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-7': {\n 'color': '#60a5fa'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-11': {\n 'color': '#60a5fa'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-4': {\n 'color': '#f472b6'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-8': {\n 'color': '#f472b6'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-12': {\n 'color': '#f472b6'\n },\n 'pre.diff-highlight > code .token.token.deleted:not(.prefix)': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.15)'\n },\n 'pre > code.diff-highlight .token.token.deleted:not(.prefix)': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.15)'\n },\n 'pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.inserted:not(.prefix)': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.15)'\n },\n 'pre > code.diff-highlight .token.token.inserted:not(.prefix)': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.15)'\n },\n 'pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n '.prism-previewer.prism-previewer:before': {\n 'borderColor': '#11111f'\n },\n '.prism-previewer-gradient.prism-previewer-gradient div': {\n 'borderColor': '#11111f',\n 'borderRadius': '0.3em'\n },\n '.prism-previewer-color.prism-previewer-color:before': {\n 'borderRadius': '0.3em'\n },\n '.prism-previewer-easing.prism-previewer-easing:before': {\n 'borderRadius': '0.3em'\n },\n '.prism-previewer.prism-previewer:after': {\n 'borderTopColor': '#11111f'\n },\n '.prism-previewer-flipped.prism-previewer-flipped.after': {\n 'borderBottomColor': '#11111f'\n },\n '.prism-previewer-angle.prism-previewer-angle:before': {\n 'background': '#1e293b'\n },\n '.prism-previewer-time.prism-previewer-time:before': {\n 'background': '#1e293b'\n },\n '.prism-previewer-easing.prism-previewer-easing': {\n 'background': '#1e293b'\n },\n '.prism-previewer-angle.prism-previewer-angle circle': {\n 'stroke': '#e2e8f0',\n 'strokeOpacity': '1'\n },\n '.prism-previewer-time.prism-previewer-time circle': {\n 'stroke': '#e2e8f0',\n 'strokeOpacity': '1'\n },\n '.prism-previewer-easing.prism-previewer-easing circle': {\n 'stroke': '#e2e8f0',\n 'fill': 'transparent'\n },\n '.prism-previewer-easing.prism-previewer-easing path': {\n 'stroke': '#e2e8f0'\n },\n '.prism-previewer-easing.prism-previewer-easing line': {\n 'stroke': '#e2e8f0'\n }\n}"
533
+ "value": "{\n 'code[class*=\"language-\"]': {\n 'background': '#11111f',\n 'color': '#e2e8f0',\n 'textShadow': '0 1px rgba(0, 0, 0, 0.3)',\n 'fontFamily': '\"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace',\n 'direction': 'ltr',\n 'textAlign': 'left',\n 'whiteSpace': 'pre',\n 'wordSpacing': 'normal',\n 'wordBreak': 'normal',\n 'lineHeight': '1.5',\n 'MozTabSize': '2',\n 'OTabSize': '2',\n 'tabSize': '2',\n 'WebkitHyphens': 'none',\n 'MozHyphens': 'none',\n 'msHyphens': 'none',\n 'hyphens': 'none'\n },\n 'pre[class*=\"language-\"]': {\n 'background': '#11111f',\n 'color': '#e2e8f0',\n 'textShadow': '0 1px rgba(0, 0, 0, 0.3)',\n 'fontFamily': '\"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace',\n 'direction': 'ltr',\n 'textAlign': 'left',\n 'whiteSpace': 'pre',\n 'wordSpacing': 'normal',\n 'wordBreak': 'normal',\n 'lineHeight': '1.5',\n 'MozTabSize': '2',\n 'OTabSize': '2',\n 'tabSize': '2',\n 'WebkitHyphens': 'none',\n 'MozHyphens': 'none',\n 'msHyphens': 'none',\n 'hyphens': 'none',\n 'padding': '1em',\n 'margin': '0',\n 'overflow': 'auto'\n },\n 'code[class*=\"language-\"]::-moz-selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n 'code[class*=\"language-\"] *::-moz-selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n 'pre[class*=\"language-\"] *::-moz-selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n 'code[class*=\"language-\"]::selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n 'code[class*=\"language-\"] *::selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n 'pre[class*=\"language-\"] *::selection': {\n 'background': '#1e293b',\n 'color': 'inherit',\n 'textShadow': 'none'\n },\n ':not(pre) > code[class*=\"language-\"]': {\n 'padding': '0.2em 0.3em',\n 'borderRadius': '0.3em',\n 'whiteSpace': 'normal'\n },\n 'comment': {\n 'color': '#64748b',\n 'fontStyle': 'italic'\n },\n 'prolog': {\n 'color': '#64748b'\n },\n 'cdata': {\n 'color': '#64748b'\n },\n 'doctype': {\n 'color': '#e2e8f0'\n },\n 'punctuation': {\n 'color': '#e2e8f0'\n },\n 'entity': {\n 'color': '#3b82f6',\n 'cursor': 'help'\n },\n 'attr-name': {\n 'color': '#f59e0b'\n },\n 'class-name': {\n 'color': '#f59e0b'\n },\n 'boolean': {\n 'color': '#3b82f6'\n },\n 'constant': {\n 'color': '#3b82f6'\n },\n 'number': {\n 'color': '#3b82f6'\n },\n 'atrule': {\n 'color': '#f59e0b'\n },\n 'keyword': {\n 'color': '#f472b6'\n },\n 'property': {\n 'color': '#3b82f6'\n },\n 'tag': {\n 'color': '#3b82f6'\n },\n 'symbol': {\n 'color': '#3b82f6'\n },\n 'deleted': {\n 'color': '#ef4444'\n },\n 'important': {\n 'color': '#f472b6'\n },\n 'selector': {\n 'color': '#10b981'\n },\n 'string': {\n 'color': '#10b981'\n },\n 'char': {\n 'color': '#10b981'\n },\n 'builtin': {\n 'color': '#10b981'\n },\n 'inserted': {\n 'color': '#10b981'\n },\n 'regex': {\n 'color': '#10b981'\n },\n 'attr-value': {\n 'color': '#10b981'\n },\n 'attr-value > .token.punctuation': {\n 'color': '#10b981'\n },\n 'variable': {\n 'color': '#60a5fa'\n },\n 'operator': {\n 'color': '#60a5fa'\n },\n 'function': {\n 'color': '#60a5fa'\n },\n 'url': {\n 'color': '#60a5fa'\n },\n 'attr-value > .token.punctuation.attr-equals': {\n 'color': '#e2e8f0'\n },\n 'special-attr > .token.attr-value > .token.value.css': {\n 'color': '#e2e8f0'\n },\n '.language-css .token.selector': {\n 'color': '#3b82f6'\n },\n '.language-css .token.property': {\n 'color': '#e2e8f0'\n },\n '.language-css .token.function': {\n 'color': '#60a5fa'\n },\n '.language-css .token.url > .token.function': {\n 'color': '#60a5fa'\n },\n '.language-css .token.url > .token.string.url': {\n 'color': '#10b981'\n },\n '.language-css .token.important': {\n 'color': '#f472b6'\n },\n '.language-css .token.atrule .token.rule': {\n 'color': '#f472b6'\n },\n '.language-javascript .token.operator': {\n 'color': '#f472b6'\n },\n '.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation': {\n 'color': '#ef4444'\n },\n '.language-json .token.operator': {\n 'color': '#e2e8f0'\n },\n '.language-json .token.null.keyword': {\n 'color': '#3b82f6'\n },\n '.language-markdown .token.url': {\n 'color': '#e2e8f0'\n },\n '.language-markdown .token.url > .token.operator': {\n 'color': '#e2e8f0'\n },\n '.language-markdown .token.url-reference.url > .token.string': {\n 'color': '#e2e8f0'\n },\n '.language-markdown .token.url > .token.content': {\n 'color': '#60a5fa'\n },\n '.language-markdown .token.url > .token.url': {\n 'color': '#60a5fa'\n },\n '.language-markdown .token.url-reference.url': {\n 'color': '#60a5fa'\n },\n '.language-markdown .token.blockquote.punctuation': {\n 'color': '#64748b',\n 'fontStyle': 'italic'\n },\n '.language-markdown .token.hr.punctuation': {\n 'color': '#64748b',\n 'fontStyle': 'italic'\n },\n '.language-markdown .token.code-snippet': {\n 'color': '#10b981'\n },\n '.language-markdown .token.bold .token.content': {\n 'color': '#f59e0b'\n },\n '.language-markdown .token.italic .token.content': {\n 'color': '#f472b6'\n },\n '.language-markdown .token.strike .token.content': {\n 'color': '#3b82f6'\n },\n '.language-markdown .token.strike .token.punctuation': {\n 'color': '#3b82f6'\n },\n '.language-markdown .token.list.punctuation': {\n 'color': '#3b82f6'\n },\n '.language-markdown .token.title.important > .token.punctuation': {\n 'color': '#3b82f6'\n },\n 'bold': {\n 'fontWeight': 'bold'\n },\n 'italic': {\n 'fontStyle': 'italic'\n },\n 'namespace': {\n 'Opacity': '0.8'\n },\n 'token.tab:not(:empty):before': {\n 'color': '#64748b',\n 'textShadow': 'none'\n },\n 'token.cr:before': {\n 'color': '#64748b',\n 'textShadow': 'none'\n },\n 'token.lf:before': {\n 'color': '#64748b',\n 'textShadow': 'none'\n },\n 'token.space:before': {\n 'color': '#64748b',\n 'textShadow': 'none'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item': {\n 'marginRight': '0.4em'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button': {\n 'background': '#1e293b',\n 'color': '#94a3b8',\n 'padding': '0.1em 0.4em',\n 'borderRadius': '0.3em'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a': {\n 'background': '#1e293b',\n 'color': '#94a3b8',\n 'padding': '0.1em 0.4em',\n 'borderRadius': '0.3em'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span': {\n 'background': '#1e293b',\n 'color': '#94a3b8',\n 'padding': '0.1em 0.4em',\n 'borderRadius': '0.3em'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n 'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus': {\n 'background': '#3b82f6',\n 'color': '#ffffff'\n },\n '.line-highlight.line-highlight': {\n 'background': 'rgba(59, 130, 246, 0.08)'\n },\n '.line-highlight.line-highlight:before': {\n 'background': '#1e293b',\n 'color': '#e2e8f0',\n 'padding': '0.1em 0.6em',\n 'borderRadius': '0.3em',\n 'boxShadow': '0 2px 0 0 rgba(0, 0, 0, 0.2)'\n },\n '.line-highlight.line-highlight[data-end]:after': {\n 'background': '#1e293b',\n 'color': '#e2e8f0',\n 'padding': '0.1em 0.6em',\n 'borderRadius': '0.3em',\n 'boxShadow': '0 2px 0 0 rgba(0, 0, 0, 0.2)'\n },\n 'pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before': {\n 'backgroundColor': 'rgba(59, 130, 246, 0.08)'\n },\n '.line-numbers.line-numbers .line-numbers-rows': {\n 'borderRightColor': '#1e293b'\n },\n '.command-line .command-line-prompt': {\n 'borderRightColor': '#1e293b'\n },\n '.line-numbers .line-numbers-rows > span:before': {\n 'color': '#64748b'\n },\n '.command-line .command-line-prompt > span:before': {\n 'color': '#64748b'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-1': {\n 'color': '#3b82f6'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-5': {\n 'color': '#3b82f6'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-9': {\n 'color': '#3b82f6'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-2': {\n 'color': '#10b981'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-6': {\n 'color': '#10b981'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-10': {\n 'color': '#10b981'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-3': {\n 'color': '#60a5fa'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-7': {\n 'color': '#60a5fa'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-11': {\n 'color': '#60a5fa'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-4': {\n 'color': '#f472b6'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-8': {\n 'color': '#f472b6'\n },\n '.rainbow-braces .token.token.punctuation.brace-level-12': {\n 'color': '#f472b6'\n },\n 'pre.diff-highlight > code .token.token.deleted:not(.prefix)': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.15)'\n },\n 'pre > code.diff-highlight .token.token.deleted:not(.prefix)': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.15)'\n },\n 'pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection': {\n 'backgroundColor': 'rgba(239, 68, 68, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.inserted:not(.prefix)': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.15)'\n },\n 'pre > code.diff-highlight .token.token.inserted:not(.prefix)': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.15)'\n },\n 'pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n 'pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection': {\n 'backgroundColor': 'rgba(16, 185, 129, 0.25)'\n },\n '.prism-previewer.prism-previewer:before': {\n 'borderColor': '#11111f'\n },\n '.prism-previewer-gradient.prism-previewer-gradient div': {\n 'borderColor': '#11111f',\n 'borderRadius': '0.3em'\n },\n '.prism-previewer-color.prism-previewer-color:before': {\n 'borderRadius': '0.3em'\n },\n '.prism-previewer-easing.prism-previewer-easing:before': {\n 'borderRadius': '0.3em'\n },\n '.prism-previewer.prism-previewer:after': {\n 'borderTopColor': '#11111f'\n },\n '.prism-previewer-flipped.prism-previewer-flipped.after': {\n 'borderBottomColor': '#11111f'\n },\n '.prism-previewer-angle.prism-previewer-angle:before': {\n 'background': '#1e293b'\n },\n '.prism-previewer-time.prism-previewer-time:before': {\n 'background': '#1e293b'\n },\n '.prism-previewer-easing.prism-previewer-easing': {\n 'background': '#1e293b'\n },\n '.prism-previewer-angle.prism-previewer-angle circle': {\n 'stroke': '#e2e8f0',\n 'strokeOpacity': '1'\n },\n '.prism-previewer-time.prism-previewer-time circle': {\n 'stroke': '#e2e8f0',\n 'strokeOpacity': '1'\n },\n '.prism-previewer-easing.prism-previewer-easing circle': {\n 'stroke': '#e2e8f0',\n 'fill': 'transparent'\n },\n '.prism-previewer-easing.prism-previewer-easing path': {\n 'stroke': '#e2e8f0'\n },\n '.prism-previewer-easing.prism-previewer-easing line': {\n 'stroke': '#e2e8f0'\n }\n}"
515
534
  },
516
535
  "description": "The theme to use for the code block.",
517
536
  "name": "theme",
@@ -1477,7 +1496,7 @@
1477
1496
  },
1478
1497
  "isLast": {
1479
1498
  "defaultValue": null,
1480
- "description": "Whether the message is the last one in the list.",
1499
+ "description": "Whether the message is the last one in the list.\nThis let's the chat know when to show the loading cursor.",
1481
1500
  "name": "isLast",
1482
1501
  "parent": {
1483
1502
  "fileName": "src/SessionMessages/SessionMessage/SessionMessage.tsx",
package/dist/index.js CHANGED
@@ -217,9 +217,8 @@ const dark = {
217
217
  "msHyphens": "none",
218
218
  "hyphens": "none",
219
219
  "padding": "1em",
220
- "margin": "0.5em 0",
221
- "overflow": "auto",
222
- "borderRadius": "0.3em"
220
+ "margin": "0",
221
+ "overflow": "auto"
223
222
  },
224
223
  'code[class*="language-"]::-moz-selection': {
225
224
  "background": "#1e293b",
@@ -1184,6 +1183,7 @@ const CodeHighlighter = ({
1184
1183
  copyClassName,
1185
1184
  copyIcon = /* @__PURE__ */ jsx(SvgCopy, {}),
1186
1185
  language,
1186
+ toolbarClassName,
1187
1187
  theme = dark
1188
1188
  }) => {
1189
1189
  const match = language == null ? void 0 : language.match(/language-(\w+)/);
@@ -1196,17 +1196,20 @@ const CodeHighlighter = ({
1196
1196
  });
1197
1197
  };
1198
1198
  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
1199
- copyIcon && /* @__PURE__ */ jsx(
1200
- Button,
1201
- {
1202
- className: cn(copyClassName),
1203
- size: "small",
1204
- variant: "text",
1205
- title: "Copy code",
1206
- onClick: () => handleCopy(children),
1207
- children: copyIcon
1208
- }
1209
- ),
1199
+ /* @__PURE__ */ jsxs("div", { className: cn(toolbarClassName), children: [
1200
+ /* @__PURE__ */ jsx("div", { children: lang }),
1201
+ copyIcon && /* @__PURE__ */ jsx(
1202
+ Button,
1203
+ {
1204
+ className: cn(copyClassName),
1205
+ size: "small",
1206
+ variant: "text",
1207
+ title: "Copy code",
1208
+ onClick: () => handleCopy(children),
1209
+ children: copyIcon
1210
+ }
1211
+ )
1212
+ ] }),
1210
1213
  /* @__PURE__ */ jsx(
1211
1214
  Prism,
1212
1215
  {
@@ -1236,7 +1239,8 @@ const Markdown = ({
1236
1239
  ...props,
1237
1240
  language: className,
1238
1241
  className: cn(theme.messages.message.markdown.code, className),
1239
- copyClassName: cn(theme.messages.message.markdown.copy)
1242
+ copyClassName: cn(theme.messages.message.markdown.copy),
1243
+ toolbarClassName: cn(theme.messages.message.markdown.toolbar)
1240
1244
  }
1241
1245
  ),
1242
1246
  table: (props) => /* @__PURE__ */ jsx(TableComponent, { ...props, className: cn(theme.messages.message.markdown.table) }),
@@ -1336,11 +1340,13 @@ const MessageFiles = ({ files, children }) => {
1336
1340
  return files.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(theme.messages.message.files.base), children: files.map((file, index) => /* @__PURE__ */ jsx(Comp, { ...file, children }, index)) });
1337
1341
  };
1338
1342
  const MessageSource = ({ title, url, image, limit = 50 }) => {
1339
- const { theme } = useContext(ChatContext);
1343
+ const { theme, isCompact } = useContext(ChatContext);
1340
1344
  return /* @__PURE__ */ jsxs(
1341
1345
  "figure",
1342
1346
  {
1343
- className: cn(theme.messages.message.sources.source.base),
1347
+ className: cn(theme.messages.message.sources.source.base, {
1348
+ [theme.messages.message.sources.source.companion]: isCompact
1349
+ }),
1344
1350
  onClick: () => {
1345
1351
  if (url) {
1346
1352
  window.open(url, "_blank");
@@ -1554,69 +1560,95 @@ const SessionMessages = ({
1554
1560
  ] });
1555
1561
  };
1556
1562
  const chatTheme = {
1557
- base: "text-white",
1558
- console: "flex w-full gap-5 h-full",
1563
+ base: "dark:text-white text-gray-500",
1564
+ console: "flex w-full gap-10 h-full",
1559
1565
  companion: "w-full h-full overflow-hidden",
1560
1566
  empty: "text-center flex-1",
1561
1567
  sessions: {
1562
1568
  base: "overflow-auto",
1563
- console: "min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded-3xl",
1569
+ console: "min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl",
1564
1570
  companion: "w-full h-full",
1565
- group: "text-xs text-gray-400 mt-4 hover:bg-transparent mb-1",
1566
- create: "relative mb-4 rounded-[10px]",
1571
+ group: "text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1",
1572
+ create: "relative mb-4 rounded-[10px] text-white",
1567
1573
  session: {
1568
- base: "my-1 rounded-[10px] p-2 text-typography hover:bg-gray-800/50 border border-transparent hover:border-gray-700/50",
1569
- active: "bg-gray-800/70 border border-gray-700/70 hover:bg-gray-800/50 border-gray-700/50 text-white",
1570
- delete: "[&>svg]:w-4 [&>svg]:h-4 opacity-50"
1574
+ base: [
1575
+ "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",
1576
+ "dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200"
1577
+ ].join(" "),
1578
+ active: [
1579
+ "border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ",
1580
+ "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",
1581
+ "[&_button]:!opacity-100"
1582
+ ].join(" "),
1583
+ delete: "[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:!opacity-50"
1571
1584
  }
1572
1585
  },
1573
1586
  messages: {
1574
1587
  base: "",
1575
- console: "flex flex-col flex-1 overflow-hidden",
1588
+ console: "flex flex-col mr-5 flex-1 overflow-hidden",
1576
1589
  companion: "flex w-full h-full",
1577
1590
  back: "self-start p-0 my-2",
1578
1591
  inner: "flex-1 h-full flex flex-col",
1579
- title: "text-2xl font-bold",
1580
- date: "text-sm whitespace-nowrap pt-2",
1581
- content: "mt-2 flex-1 overflow-auto",
1592
+ title: ["text-base font-bold text-gray-500", "dark:text-gray-200"].join(
1593
+ " "
1594
+ ),
1595
+ date: "text-xs whitespace-nowrap pt-2 text-gray-400",
1596
+ content: [
1597
+ "mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200",
1598
+ "dark:[&_hr]:bg-gray-800/60"
1599
+ ].join(" "),
1582
1600
  header: "flex justify-between items-start gap-2",
1583
1601
  showMore: "mb-4",
1584
1602
  message: {
1585
- base: "mt-4 mb-4 flex flex-col p-0 rounded border-none",
1586
- 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",
1587
- response: "",
1603
+ base: "mt-4 mb-4 flex flex-col p-0 rounded border-none bg-transparent",
1604
+ question: [
1605
+ "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",
1606
+ "dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100"
1607
+ ].join(" "),
1608
+ response: ["text-gray-900", "dark:text-gray-100"].join(" "),
1588
1609
  cursor: "inline-block w-1 h-4 bg-current",
1589
1610
  files: {
1590
1611
  base: "mb-2 flex flex-wrap gap-3 ",
1591
1612
  file: {
1592
- base: "flex items-center gap-2 border border-gray-700 p-2 rounded cursor-pointer",
1593
- name: "text-sm"
1613
+ base: [
1614
+ "flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer",
1615
+ "dark:border-gray-700"
1616
+ ].join(" "),
1617
+ name: ["text-sm text-gray-500", "dark:text-gray-200"].join(" ")
1594
1618
  }
1595
1619
  },
1596
1620
  sources: {
1597
1621
  base: "my-4 flex flex-wrap gap-3",
1598
1622
  source: {
1599
- base: "flex gap-2 border border-gray-700 p-2 rounded cursor-pointer",
1600
- image: "w-6 h-6 rounded-md",
1623
+ base: [
1624
+ "flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer",
1625
+ "dark:border-gray-700"
1626
+ ].join(" "),
1627
+ companion: "flex-1 px-3 py-1.5",
1628
+ image: "max-w-10 max-h-10 rounded-md w-full h-fit self-center",
1601
1629
  title: "text-md block",
1602
- url: "text-sm text-blue-700 underline"
1630
+ url: "text-sm text-blue-400 underline"
1603
1631
  }
1604
1632
  },
1605
1633
  markdown: {
1606
- copy: "absolute right-0 top-0 [&>svg]:w-4 [&>svg]:h-4 opacity-50",
1634
+ copy: "sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50",
1607
1635
  p: "mb-2",
1608
- a: "text-blue-700 underline",
1636
+ a: "text-blue-400 underline",
1609
1637
  table: "table-auto w-full m-2",
1610
1638
  th: "px-4 py-2 text-left font-bold border-b border-gray-500",
1611
1639
  td: "px-4 py-2",
1612
- code: "m-2 rounded",
1640
+ code: "m-2 rounded-b relative",
1641
+ toolbar: "text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ",
1613
1642
  li: "mb-2 ml-6",
1614
1643
  ul: "mb-4 list-disc",
1615
1644
  ol: "mb-4 list-decimal"
1616
1645
  },
1617
1646
  footer: {
1618
- base: "mt-3 flex gap-1.5",
1619
- copy: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white",
1647
+ base: "mt-3 flex gap-1.5 text-gray-400",
1648
+ copy: [
1649
+ "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-200 hover:text-gray-500",
1650
+ "dark:hover:bg-gray-800 dark:hover:text-white"
1651
+ ].join(" "),
1620
1652
  upvote: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white",
1621
1653
  downvote: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white",
1622
1654
  refresh: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white"
@@ -1625,11 +1657,17 @@ const chatTheme = {
1625
1657
  },
1626
1658
  input: {
1627
1659
  base: "flex mt-4 relative",
1628
- upload: "px-5 py-2 text-white size-10",
1629
- 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",
1660
+ upload: ["px-5 py-2 text-gray-400 size-10", "dark:gray-500"].join(" "),
1661
+ input: [
1662
+ "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",
1663
+ "dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40"
1664
+ ].join(" "),
1630
1665
  actions: {
1631
1666
  base: "absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10",
1632
- send: "px-3 py-3 text-white bg-gray-800 hover:bg-primary-hover rounded-full ",
1667
+ send: [
1668
+ "px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500",
1669
+ "dark:text-white dark:bg-gray-800 hover:dark:bg-gray-700"
1670
+ ].join(" "),
1633
1671
  stop: "px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 "
1634
1672
  }
1635
1673
  }
@@ -1784,7 +1822,7 @@ const SessionsList = ({ children }) => {
1784
1822
  }
1785
1823
  );
1786
1824
  };
1787
- const SvgTrash = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-trash-2", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M3 6h18" }), /* @__PURE__ */ React.createElement("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), /* @__PURE__ */ React.createElement("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }), /* @__PURE__ */ React.createElement("line", { x1: 10, x2: 10, y1: 11, y2: 17 }), /* @__PURE__ */ React.createElement("line", { x1: 14, x2: 14, y1: 11, y2: 17 }));
1825
+ const SvgTrash = (props) => /* @__PURE__ */ React.createElement("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { id: "Delete" }, /* @__PURE__ */ React.createElement("path", { id: "Vector", d: "M5.97905 1.16666C5.90859 1.16576 5.83895 1.18189 5.77605 1.21368C5.71316 1.24547 5.65888 1.29199 5.61783 1.34926C5.57677 1.40654 5.55016 1.47288 5.54025 1.54265C5.53034 1.61242 5.53743 1.68355 5.56092 1.75H4.27007C3.7342 1.75 3.2324 2.01817 2.93535 2.46435L2.24492 3.5H2.18738C2.12941 3.49918 2.07185 3.50989 2.01805 3.5315C1.96425 3.55312 1.91529 3.58522 1.874 3.62593C1.83271 3.66663 1.79993 3.71514 1.77755 3.76863C1.75518 3.82211 1.74365 3.87952 1.74365 3.9375C1.74365 3.99548 1.75518 4.05288 1.77755 4.10636C1.79993 4.15985 1.83271 4.20836 1.874 4.24907C1.91529 4.28977 1.96425 4.32187 2.01805 4.34349C2.07185 4.3651 2.12941 4.37582 2.18738 4.375H2.41012C2.44765 4.38067 2.48576 4.38143 2.52348 4.37727L3.24468 11.1084C3.33169 11.9199 4.02367 12.5417 4.83973 12.5417H9.15947C9.97553 12.5417 10.6675 11.9199 10.7545 11.1084L11.4763 4.37727C11.5133 4.38124 11.5506 4.38047 11.5874 4.375H11.8124C11.8704 4.37582 11.9279 4.3651 11.9817 4.34349C12.0355 4.32187 12.0845 4.28977 12.1258 4.24907C12.1671 4.20836 12.1998 4.15985 12.2222 4.10636C12.2446 4.05288 12.2561 3.99548 12.2561 3.9375C12.2561 3.87952 12.2446 3.82211 12.2222 3.76863C12.1998 3.71514 12.1671 3.66663 12.1258 3.62593C12.0845 3.58522 12.0355 3.55312 11.9817 3.5315C11.9279 3.50989 11.8704 3.49918 11.8124 3.5H11.7548L11.0644 2.46435C10.7671 2.01841 10.2654 1.75 9.7297 1.75H8.43885C8.46234 1.68355 8.46943 1.61242 8.45952 1.54265C8.44961 1.47288 8.423 1.40654 8.38194 1.34926C8.34089 1.29199 8.2866 1.24547 8.22371 1.21368C8.16082 1.18189 8.09118 1.16576 8.02072 1.16666H5.97905ZM4.27007 2.625H9.7297C9.97394 2.625 10.2009 2.74639 10.3364 2.9497L10.7033 3.5H3.29651L3.66338 2.9497L3.66395 2.94913C3.79913 2.74608 4.02543 2.625 4.27007 2.625ZM3.40361 4.375H10.5962L9.88465 11.015C9.8445 11.3894 9.53575 11.6667 9.15947 11.6667H4.83973C4.46345 11.6667 4.15527 11.3894 4.11512 11.015L3.40361 4.375Z", fill: "currentColor" })));
1788
1826
  const SvgChat = (props) => /* @__PURE__ */ React.createElement("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M8 3C4.55375 3 1.75 5.23753 1.75 7.98828C1.75 9.70653 2.83659 11.2762 4.62109 12.188C4.11184 13.0465 3.62587 13.7378 3.62012 13.7461C3.50687 13.9071 3.49862 14.1196 3.59912 14.2891C3.69012 14.4418 3.8543 14.5342 4.0293 14.5342C4.0483 14.5342 4.06743 14.533 4.08643 14.5308C4.15168 14.5233 5.66214 14.3364 7.50439 12.9604C7.67239 12.9712 7.8385 12.9766 8 12.9766C11.4462 12.9766 14.25 10.739 14.25 7.98828C14.25 5.23753 11.4462 3 8 3ZM8 4C10.8948 4 13.25 5.78903 13.25 7.98828C13.25 10.1875 10.8948 11.9766 8 11.9766C7.8055 11.9766 7.60225 11.968 7.396 11.9497C7.271 11.9382 7.1454 11.9752 7.0459 12.0527C6.3589 12.5855 5.72033 12.9308 5.20508 13.1528C5.38383 12.8648 5.57691 12.5418 5.76416 12.2061C5.83416 12.0813 5.84705 11.9324 5.7998 11.7974C5.75255 11.6624 5.64983 11.5542 5.51758 11.5C3.81033 10.7993 2.75 9.45328 2.75 7.98828C2.75 5.78903 5.10525 4 8 4ZM5.5 7.25C5.08575 7.25 4.75 7.58575 4.75 8C4.75 8.41425 5.08575 8.75 5.5 8.75C5.91425 8.75 6.25 8.41425 6.25 8C6.25 7.58575 5.91425 7.25 5.5 7.25ZM8 7.25C7.58575 7.25 7.25 7.58575 7.25 8C7.25 8.41425 7.58575 8.75 8 8.75C8.41425 8.75 8.75 8.41425 8.75 8C8.75 7.58575 8.41425 7.25 8 7.25ZM10.5 7.25C10.0857 7.25 9.75 7.58575 9.75 8C9.75 8.41425 10.0857 8.75 10.5 8.75C10.9143 8.75 11.25 8.41425 11.25 8C11.25 7.58575 10.9143 7.25 10.5 7.25Z", fill: "currentColor" }));
1789
1827
  const SessionListItem = ({
1790
1828
  children,