@coristen/widget 0.1.9 → 0.1.11
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 +20 -66
- package/dist/display.test.d.ts +1 -0
- package/dist/index.d.ts +18 -2
- package/dist/index.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/website-chat.d.ts +1 -4
- package/package.json +69 -70
package/README.md
CHANGED
|
@@ -1,66 +1,20 @@
|
|
|
1
|
-
# @coristen/widget
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
```bash
|
|
6
|
-
npm install @coristen/widget
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
```tsx
|
|
10
|
-
import { CoristenWidget } from "@coristen/widget"
|
|
11
|
-
import "@coristen/widget/styles.css"
|
|
12
|
-
|
|
13
|
-
export default function App() {
|
|
14
|
-
return <CoristenWidget apiKey="coristen_pk_..." />
|
|
15
|
-
}
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
```tsx
|
|
23
|
-
<CoristenWidget identity="/api/coristen/identity" />
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
Create the route with the server-only helper:
|
|
27
|
-
|
|
28
|
-
```ts
|
|
29
|
-
import { coristenIdentity } from "@coristen/widget/server"
|
|
30
|
-
|
|
31
|
-
export const { GET } = coristenIdentity(async (request) => {
|
|
32
|
-
const user = await getSignedInUser(request)
|
|
33
|
-
return user ? { id: user.id, name: user.name, email: user.email } : null
|
|
34
|
-
})
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
Set `CORISTEN_KEY` on the server when you use identity mode. Identity mode renders
|
|
38
|
-
only for a verified signed-in customer. It does not permit anonymous access.
|
|
39
|
-
|
|
40
|
-
## Welcome screen
|
|
41
|
-
|
|
42
|
-
After a visitor enters an email address, a new chat shows the agent avatar, workspace
|
|
43
|
-
welcome message, and a maximum of three questions. Coristen generates these questions
|
|
44
|
-
when it indexes or refreshes knowledge documents. Refresh existing sources to generate
|
|
45
|
-
questions. If document questions are not available, the widget shows general questions.
|
|
46
|
-
When a visitor selects a question, the widget sends its message immediately.
|
|
47
|
-
|
|
48
|
-
Override the message and suggestion list for your installation:
|
|
49
|
-
|
|
50
|
-
```tsx
|
|
51
|
-
<CoristenWidget
|
|
52
|
-
apiKey="coristen_pk_..."
|
|
53
|
-
welcome={{
|
|
54
|
-
message: "How can I help you today?",
|
|
55
|
-
suggestions: [
|
|
56
|
-
{ title: "Shipping", message: "What shipping options do you offer?" },
|
|
57
|
-
{ title: "Returns", message: "How do I return or exchange an item?" },
|
|
58
|
-
],
|
|
59
|
-
}}
|
|
60
|
-
/>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
Omit `suggestions` to use the automatic list. Pass `[]` to hide the suggestions.
|
|
64
|
-
The exported `WidgetWelcome` and `WidgetSuggestion` types describe this API. The
|
|
65
|
-
props update with your application state. A suggestion message can contain a maximum
|
|
66
|
-
of 2,000 characters.
|
|
1
|
+
# @coristen/widget
|
|
2
|
+
|
|
3
|
+
Add Coristen to a React application.
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @coristen/widget
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
import { CoristenWidget } from "@coristen/widget"
|
|
11
|
+
import "@coristen/widget/styles.css"
|
|
12
|
+
|
|
13
|
+
export default function App() {
|
|
14
|
+
return <CoristenWidget apiKey="coristen_pk_..." />
|
|
15
|
+
}
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Use `CoristenDock` for a side panel and `CoristenModal` for a modal. See the
|
|
19
|
+
[Coristen documentation](https://github.com/brayanj4y/coristen/tree/master/apps/docs/content/docs)
|
|
20
|
+
for installation, identity, security, and API details.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,20 @@
|
|
|
1
|
+
import { type MouseEventHandler, type ReactElement, type ReactNode } from "react";
|
|
1
2
|
import type { WidgetSettings, WidgetWelcome } from "./api";
|
|
2
3
|
type CoristenWidgetOptions = {
|
|
3
4
|
apiUrl?: string;
|
|
5
|
+
open?: boolean;
|
|
6
|
+
onOpenChange?: (open: boolean) => void;
|
|
4
7
|
defaultOpen?: boolean;
|
|
5
|
-
defaultEmail?: string;
|
|
6
8
|
welcome?: WidgetWelcome;
|
|
7
9
|
fontSize?: string;
|
|
8
10
|
appearance?: WidgetAppearance;
|
|
9
11
|
onReady?: () => void;
|
|
10
12
|
onError?: (error: Error) => void;
|
|
11
13
|
};
|
|
14
|
+
type WidgetTriggerElement = ReactElement<{
|
|
15
|
+
"aria-expanded"?: boolean;
|
|
16
|
+
onClick?: MouseEventHandler<HTMLElement>;
|
|
17
|
+
}>;
|
|
12
18
|
export type CoristenWidgetProps = CoristenWidgetOptions & ({
|
|
13
19
|
apiKey: string;
|
|
14
20
|
identity?: never;
|
|
@@ -16,8 +22,18 @@ export type CoristenWidgetProps = CoristenWidgetOptions & ({
|
|
|
16
22
|
identity: string;
|
|
17
23
|
apiKey?: never;
|
|
18
24
|
});
|
|
25
|
+
export type CoristenModalProps = CoristenWidgetProps & {
|
|
26
|
+
trigger: WidgetTriggerElement;
|
|
27
|
+
};
|
|
28
|
+
export type CoristenDockProps = CoristenWidgetProps & {
|
|
29
|
+
children: ReactNode;
|
|
30
|
+
side?: "left" | "right";
|
|
31
|
+
trigger: WidgetTriggerElement;
|
|
32
|
+
};
|
|
19
33
|
export type WidgetAppearance = Partial<Pick<WidgetSettings, "brandColor" | "logoUrl" | "position" | "theme" | "tintedGrayscale" | "accentEnabled" | "accentHeader" | "accentSendIcon" | "radius" | "bubbleIcon" | "bubbleColor" | "showPoweredBy">>;
|
|
20
|
-
export declare function CoristenWidget(
|
|
34
|
+
export declare function CoristenWidget(props: CoristenWidgetProps): import("react").JSX.Element;
|
|
35
|
+
export declare function CoristenModal({ trigger, ...props }: CoristenModalProps): import("react").JSX.Element;
|
|
36
|
+
export declare function CoristenDock({ children, side, trigger, open: controlledOpen, onOpenChange, defaultOpen, appearance, ...props }: CoristenDockProps): import("react").JSX.Element;
|
|
21
37
|
export type { WidgetSettings } from "./api";
|
|
22
38
|
export type { WidgetWelcome, WidgetSuggestion } from "./api";
|
|
23
39
|
export declare const coristenWidget: {
|