reachat 1.0.6 → 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
@@ -35,6 +35,7 @@ theme via Tailwind.
35
35
  - Checkout the [storybook demos](https://storybook.reachat.dev)
36
36
  - Learn about updates from the [changelog](CHANGELOG.md)
37
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)
38
39
 
39
40
  ## 💎 Other Projects
40
41
 
@@ -86,5 +87,5 @@ If you want to run reachat locally, its super easy!
86
87
 
87
88
  Thanks to all our contributors!
88
89
 
89
- <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>
90
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;
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",
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) }),
@@ -1627,13 +1631,14 @@ const chatTheme = {
1627
1631
  }
1628
1632
  },
1629
1633
  markdown: {
1630
- 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",
1631
1635
  p: "mb-2",
1632
1636
  a: "text-blue-400 underline",
1633
1637
  table: "table-auto w-full m-2",
1634
1638
  th: "px-4 py-2 text-left font-bold border-b border-gray-500",
1635
1639
  td: "px-4 py-2",
1636
- 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 ",
1637
1642
  li: "mb-2 ml-6",
1638
1643
  ul: "mb-4 list-disc",
1639
1644
  ol: "mb-4 list-decimal"