reachat 3.2.3 → 3.4.0

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.
@@ -1,5 +1,5 @@
1
1
  import { FC, ReactNode, useState } from 'react';
2
- import { Meta } from '@storybook/react';
2
+ import { Meta } from '@storybook/react-vite';
3
3
  import {
4
4
  Chat,
5
5
  SessionsList,
@@ -1,4 +1,4 @@
1
- import { Meta } from '@storybook/react';
1
+ import { Meta } from '@storybook/react-vite';
2
2
  import { subHours } from 'date-fns';
3
3
  import {
4
4
  Chat,
@@ -1,4 +1,4 @@
1
- import { Meta } from '@storybook/react';
1
+ import { Meta } from '@storybook/react-vite';
2
2
  import {
3
3
  Chat,
4
4
  SessionMessages,
@@ -1,4 +1,4 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
2
  import { ChatBubble } from 'reachat';
3
3
  import {
4
4
  Chat,
@@ -1,5 +1,5 @@
1
1
  import { useState } from 'react';
2
- import type { Meta } from '@storybook/react';
2
+ import type { Meta } from '@storybook/react-vite';
3
3
  import {
4
4
  Chat,
5
5
  SessionsList,
@@ -1,4 +1,4 @@
1
- import { Meta } from '@storybook/react';
1
+ import { Meta } from '@storybook/react-vite';
2
2
  import {
3
3
  Chat,
4
4
  SessionsList,
@@ -100,13 +100,10 @@ export const Empty = () => {
100
100
  <Chat
101
101
  sessions={[]}
102
102
  viewType="companion"
103
+ className="flex flex-col"
103
104
  onDeleteSession={() => alert('delete!')}
104
105
  >
105
- <SessionsList>
106
- <NewSessionButton />
107
- <SessionGroups />
108
- </SessionsList>
109
- <div className="flex-1 h-full flex flex-col">
106
+ <div className="flex-1 min-h-0 flex flex-col">
110
107
  <SessionMessages
111
108
  newSessionContent={
112
109
  <div className="flex flex-col gap-2 items-center justify-center h-full">
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { Meta } from '@storybook/react';
2
+ import { Meta } from '@storybook/react-vite';
3
3
  import { subHours } from 'date-fns';
4
4
  import { z } from 'zod';
5
5
  import {
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { Meta } from '@storybook/react';
2
+ import { Meta } from '@storybook/react-vite';
3
3
  import {
4
4
  Chat,
5
5
  ComponentError,
@@ -1,6 +1,6 @@
1
1
  import { useState, useRef, FC, useContext, useEffect } from 'react';
2
2
  import AttachIcon from './assets/paperclip.svg?react';
3
- import { Meta } from '@storybook/react';
3
+ import { Meta } from '@storybook/react-vite';
4
4
  import {
5
5
  Chat,
6
6
  Session,
@@ -1,4 +1,4 @@
1
- import { Meta, StoryFn } from '@storybook/react';
1
+ import { Meta, StoryFn } from '@storybook/react-vite';
2
2
  import { useState, useCallback } from 'react';
3
3
  import {
4
4
  Chat,
@@ -252,7 +252,9 @@ export const WithAsyncSearch: StoryFn = () => {
252
252
  mentions={{
253
253
  items: sampleUsers,
254
254
  onSearch: searchUsers,
255
- renderEmpty: query => <span>No users found matching "{query}"</span>
255
+ renderEmpty: query => (
256
+ <span>No users found matching &quot;{query}&quot;</span>
257
+ )
256
258
  }}
257
259
  />
258
260
  </SessionMessagePanel>
@@ -0,0 +1,92 @@
1
+ import { Meta } from '@storybook/react-vite';
2
+ import {
3
+ Markdown,
4
+ chatTheme,
5
+ commonRedactMatchers,
6
+ remarkCve,
7
+ remarkRedact
8
+ } from 'reachat';
9
+
10
+ const markdownTheme = chatTheme.messages.message.markdown;
11
+
12
+ const showcaseMarkdown = `# Markdown Showcase
13
+
14
+ This is **bold**, *italic*, and \`inline code\`.
15
+
16
+ ## Lists
17
+
18
+ - Item one
19
+ - Item two
20
+ - Item three
21
+
22
+ 1. First
23
+ 2. Second
24
+ 3. Third
25
+
26
+ ## Table
27
+
28
+ | Name | Value |
29
+ | ---- | ----- |
30
+ | Alpha | 10 |
31
+ | Beta | 20 |
32
+
33
+ ## Code
34
+
35
+ \`\`\`ts
36
+ export const sum = (a: number, b: number) => a + b;
37
+ \`\`\`
38
+
39
+ [Read the docs](https://reachat.dev)
40
+ `;
41
+
42
+ const cveAndRedactMarkdown = `# Security Findings
43
+
44
+ Potential incidents:
45
+ - CVE-2021-44228
46
+ - CVE-2023-4863
47
+
48
+ Sensitive details:
49
+ - SSN: 123-45-6789
50
+ - Credit card: 4532-1234-5678-9010
51
+ - Email: security@example.com
52
+ `;
53
+
54
+ export default {
55
+ title: 'Components/Markdown',
56
+ component: Markdown
57
+ } as Meta<typeof Markdown>;
58
+
59
+ export const Basic = () => (
60
+ <div className="bg-white dark:bg-gray-950 p-6 rounded-md max-w-4xl">
61
+ <Markdown theme={markdownTheme}>{showcaseMarkdown}</Markdown>
62
+ </div>
63
+ );
64
+
65
+ export const WithPlugins = () => (
66
+ <div className="bg-white dark:bg-gray-950 p-6 rounded-md max-w-4xl">
67
+ <Markdown
68
+ theme={markdownTheme}
69
+ remarkPlugins={[remarkCve, remarkRedact(commonRedactMatchers)]}
70
+ >
71
+ {cveAndRedactMarkdown}
72
+ </Markdown>
73
+ </div>
74
+ );
75
+
76
+ export const CustomComponents = () => (
77
+ <div className="bg-white dark:bg-gray-950 p-6 rounded-md max-w-4xl">
78
+ <Markdown
79
+ theme={markdownTheme}
80
+ customComponents={{
81
+ p: props => <p {...props} className="mb-4 text-indigo-300" />,
82
+ h2: props => <h2 {...props} className="text-2xl mb-3 text-cyan-300" />
83
+ }}
84
+ >
85
+ {`# Overrides
86
+
87
+ ## Styled Heading
88
+
89
+ This paragraph is rendered through custom markdown components.`}
90
+ </Markdown>
91
+ </div>
92
+ );
@@ -1,4 +1,4 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
2
  import { useEffect, useState } from 'react';
3
3
  import {
4
4
  MessageStatus,
@@ -1,4 +1,4 @@
1
- import { Meta } from '@storybook/react';
1
+ import { Meta } from '@storybook/react-vite';
2
2
  import {
3
3
  Chat,
4
4
  SessionMessages,
@@ -1,4 +1,4 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
2
  import { useState } from 'react';
3
3
  import { RichTextInput, MentionItem, SlashCommandItem } from 'reachat';
4
4
  import { ChatContext } from 'reachat';
package/dist/theme.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { DeepPartial } from 'reablocks';
2
+ import { MarkdownTheme } from './Markdown/types';
2
3
  export interface ChatTheme {
3
4
  base: string;
4
5
  console: string;
@@ -83,27 +84,7 @@ export interface ChatTheme {
83
84
  url: string;
84
85
  };
85
86
  };
86
- markdown: {
87
- hr: string;
88
- p: string;
89
- a: string;
90
- table: string;
91
- th: string;
92
- td: string;
93
- code: string;
94
- inlineCode: string;
95
- toolbar: string;
96
- li: string;
97
- ul: string;
98
- ol: string;
99
- copy: string;
100
- h1: string;
101
- h2: string;
102
- h3: string;
103
- h4: string;
104
- h5: string;
105
- h6: string;
106
- };
87
+ markdown: MarkdownTheme;
107
88
  footer: {
108
89
  base: string;
109
90
  copy: string;
package/package.json CHANGED
@@ -1,15 +1,14 @@
1
1
  {
2
2
  "name": "reachat",
3
- "version": "3.2.3",
3
+ "version": "3.4.0",
4
4
  "description": "Chat UI for Building LLMs",
5
5
  "scripts": {
6
6
  "build-storybook": "storybook build",
7
- "build": "npm run build:js && npm run build:styles && npm run build:docs && npm run rewrite:stories",
7
+ "build": "npm run build:js && npm run build:styles && npm run rewrite:stories",
8
8
  "build:js": "vite build --mode library",
9
- "build:docs": "node scripts/docs.js",
10
9
  "build:styles": "npx @tailwindcss/cli -i ./src/index.css -o ./dist/index.css",
11
- "lint": "eslint --ext js,ts,tsx",
12
- "lint:fix": "eslint --ext js,ts,tsx --fix src",
10
+ "lint": "eslint src stories",
11
+ "lint:fix": "eslint src stories --fix",
13
12
  "lint:prettier": "prettier --loglevel warn --write 'src/**/*.{ts,tsx,js,jsx}'",
14
13
  "prettier": "prettier --loglevel warn --write 'src/**/*.{ts,tsx,js,jsx}'",
15
14
  "rewrite:stories": "node scripts/stories.cjs",
@@ -18,7 +17,7 @@
18
17
  "test:coverage": "vitest run --coverage --passWithNoTests",
19
18
  "test:visual": "test-storybook --url http://localhost:9009",
20
19
  "test:visual:update": "test-storybook --url http://localhost:9009 --updateSnapshot",
21
- "prepare": "husky install"
20
+ "prepare": "husky"
22
21
  },
23
22
  "license": "Apache-2.0",
24
23
  "files": [
@@ -26,16 +25,15 @@
26
25
  ],
27
26
  "type": "module",
28
27
  "types": "dist/index.d.ts",
29
- "main": "./dist/index.umd.cjs",
28
+ "main": "./dist/index.js",
30
29
  "module": "./dist/index.js",
31
30
  "source": "src/index.ts",
32
31
  "exports": {
33
32
  ".": {
34
33
  "types": "./dist/index.d.ts",
35
34
  "import": "./dist/index.js",
36
- "require": "./dist/index.umd.cjs"
35
+ "default": "./dist/index.js"
37
36
  },
38
- "./docs.json": "./dist/docs.json",
39
37
  "./stories/*": "./dist/stories/*",
40
38
  "./index.css": "./dist/index.css"
41
39
  },
@@ -45,23 +43,23 @@
45
43
  "@floating-ui/dom": "^1.6.0",
46
44
  "@floating-ui/react": "^0.27.6",
47
45
  "@radix-ui/react-slot": "^1.1.0",
48
- "@tiptap/core": "^3.15.3",
49
- "@tiptap/extension-document": "^3.15.3",
50
- "@tiptap/extension-hard-break": "^3.15.3",
51
- "@tiptap/extension-mention": "^3.15.3",
52
- "@tiptap/extension-paragraph": "^3.15.3",
53
- "@tiptap/extension-placeholder": "^3.15.3",
54
- "@tiptap/extension-text": "^3.15.3",
55
- "@tiptap/extensions": "^3.20.4",
56
- "@tiptap/pm": "^3.15.3",
57
- "@tiptap/react": "^3.15.3",
58
- "@tiptap/suggestion": "^3.20.4",
46
+ "@tiptap/core": "^3.25.0",
47
+ "@tiptap/extension-document": "^3.25.0",
48
+ "@tiptap/extension-hard-break": "^3.25.0",
49
+ "@tiptap/extension-mention": "^3.25.0",
50
+ "@tiptap/extension-paragraph": "^3.25.0",
51
+ "@tiptap/extension-placeholder": "^3.25.0",
52
+ "@tiptap/extension-text": "^3.25.0",
53
+ "@tiptap/extensions": "^3.25.0",
54
+ "@tiptap/pm": "^3.25.0",
55
+ "@tiptap/react": "^3.25.0",
56
+ "@tiptap/suggestion": "^3.25.0",
59
57
  "date-fns": "^4.1.0",
60
58
  "katex": "^0.16.11",
61
59
  "lodash": "^4.17.21",
62
60
  "mdast-util-find-and-replace": "^3.0.1",
63
61
  "motion": "^12.4.2",
64
- "reablocks": "^10.0.0",
62
+ "reablocks": "^10.2.0",
65
63
  "react-markdown": "^10.0.0",
66
64
  "react-syntax-highlighter": "^16.1.0",
67
65
  "reakeys": "^2.0.3",
@@ -85,56 +83,53 @@
85
83
  }
86
84
  },
87
85
  "devDependencies": {
88
- "@storybook/addon-docs": "^10.0.0",
89
- "@storybook/addon-themes": "^10.0.0",
90
- "@storybook/react": "^10.0.0",
91
- "@storybook/react-vite": "^10.0.0",
86
+ "@eslint/js": "^9.39.4",
87
+ "@storybook/addon-docs": "^10.4.2",
88
+ "@storybook/addon-themes": "^10.4.2",
89
+ "@storybook/react": "^10.4.2",
90
+ "@storybook/react-vite": "^10.4.2",
92
91
  "@storybook/test-runner": "^0.24.0",
93
- "@tailwindcss/cli": "^4.0.3",
94
- "@tailwindcss/postcss": "^4.0.1",
95
- "@tailwindcss/vite": "^4.0.6",
92
+ "@tailwindcss/cli": "^4.3.0",
93
+ "@tailwindcss/postcss": "^4.3.0",
94
+ "@tailwindcss/vite": "^4.3.0",
96
95
  "@types/lodash": "^4.17.21",
97
96
  "@types/mdast": "^4.0.4",
98
97
  "@types/react": "^19.0.0",
99
98
  "@types/react-dom": "^19.0.0",
100
- "@typescript-eslint/eslint-plugin": "^7.6.0",
101
- "@typescript-eslint/parser": "^7.6.0",
102
- "@vitejs/plugin-react": "^5.0.0",
103
- "@vitest/coverage-v8": "^3.2.0",
104
- "autoprefixer": "^10.4.19",
105
- "eslint": "^8.57.0",
106
- "eslint-config-prettier": "^9.1.0",
99
+ "@typescript-eslint/eslint-plugin": "^8.60.1",
100
+ "@typescript-eslint/parser": "^8.60.1",
101
+ "@vitejs/plugin-react": "^6.0.2",
102
+ "@vitest/coverage-v8": "^4.1.8",
103
+ "eslint": "^9.39.4",
104
+ "eslint-config-prettier": "^10.1.8",
107
105
  "eslint-plugin-no-relative-import-paths": "^1.5.4",
108
106
  "eslint-plugin-react": "^7.34.1",
109
- "eslint-plugin-react-hooks": "^4.3.0",
110
- "eslint-plugin-storybook": "^0.12.0",
107
+ "eslint-plugin-react-hooks": "^7.1.1",
108
+ "eslint-plugin-storybook": "^10.4.2",
111
109
  "fast-glob": "^3.3.2",
110
+ "globals": "^17.6.0",
112
111
  "husky": "^9.0.11",
113
112
  "jest-image-snapshot": "^6.4.0",
114
- "jsdom": "^24.0.0",
115
- "lint-staged": "^15.2.2",
113
+ "jiti": "^2.7.0",
114
+ "jsdom": "^29.1.1",
115
+ "lint-staged": "^16.4.0",
116
116
  "postcss": "^8.4.39",
117
- "postcss-nested": "^6.0.1",
118
- "postcss-preset-env": "^9.5.2",
119
117
  "prettier": "^3.2.5",
120
118
  "react": "^19.0.0",
121
- "react-docgen-typescript": "^2.2.2",
122
119
  "react-dom": "^19.0.0",
123
120
  "reaviz": "^16.1.1",
124
121
  "rollup-plugin-peer-deps-external": "2.2.4",
125
- "storybook": "^10.0.0",
126
- "tailwindcss": "^4.0.0",
127
- "tw-colors": "^3.3.1",
128
- "typescript": "^5.9.3",
122
+ "storybook": "^10.4.2",
123
+ "tailwindcss": "^4.3.0",
124
+ "typescript": "^6.0.3",
129
125
  "typescript-rewrite-paths": "^1.3.1",
130
- "vite": "^7.0.0",
131
- "vite-plugin-checker": "^0.12.0",
132
- "vite-plugin-css-injected-by-js": "^3.5.0",
133
- "vite-plugin-dts": "^4.5.0",
134
- "vite-plugin-static-copy": "^3.1.1",
135
- "vite-plugin-svgr": "^4.2.0",
136
- "vite-tsconfig-paths": "^4.3.2",
137
- "vitest": "^3.2.0"
126
+ "vite": "^8.0.16",
127
+ "vite-plugin-checker": "^0.14.1",
128
+ "vite-plugin-css-injected-by-js": "^5.0.1",
129
+ "vite-plugin-dts": "^5.0.2",
130
+ "vite-plugin-static-copy": "^4.1.0",
131
+ "vite-plugin-svgr": "^5.2.0",
132
+ "vitest": "^4.1.8"
138
133
  },
139
134
  "prettier": {
140
135
  "semi": true,
@@ -146,13 +141,7 @@
146
141
  },
147
142
  "lint-staged": {
148
143
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
149
- "prettier --write",
150
- "git add"
144
+ "prettier --write"
151
145
  ]
152
- },
153
- "husky": {
154
- "hooks": {
155
- "pre-commit": "lint-staged"
156
- }
157
146
  }
158
147
  }