@m6d/cortex-angular 0.7.0 → 0.8.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.
- package/README.md +72 -0
- package/fesm2022/m6d-cortex-angular.mjs +1733 -794
- package/package.json +1 -1
- package/theme.css +9 -0
- package/types/m6d-cortex-angular.d.ts +83 -3
package/README.md
CHANGED
|
@@ -51,6 +51,78 @@ No root-level providers needed — each widget instance is fully self-contained.
|
|
|
51
51
|
|
|
52
52
|
`transport.getHeaders` can return any request headers needed by the host app. WebSocket auth continues to derive the `token` query param from a bearer `Authorization` header when present.
|
|
53
53
|
|
|
54
|
+
## Custom header
|
|
55
|
+
|
|
56
|
+
Put an `ng-template` marked `cortexHeader` inside the widget to replace its
|
|
57
|
+
header. It replaces the default on both screens, the chat and the history, and
|
|
58
|
+
receives one context with the widget's state and actions:
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
import { CortexChatWidgetComponent, CortexHeaderDirective } from '@m6d/cortex-angular';
|
|
62
|
+
|
|
63
|
+
@Component({
|
|
64
|
+
imports: [CortexChatWidgetComponent, CortexHeaderDirective],
|
|
65
|
+
template: `
|
|
66
|
+
<cortex-chat-widget [config]="config">
|
|
67
|
+
<ng-template cortexHeader let-chat>
|
|
68
|
+
<div class="cortex-widget__chat-header">
|
|
69
|
+
@if (chat.screen === 'threads') {
|
|
70
|
+
<button class="cortex-widget__header-btn" (click)="chat.closeHistory()">←</button>
|
|
71
|
+
} @else {
|
|
72
|
+
<button class="cortex-widget__header-btn" (click)="chat.openHistory()">☰</button>
|
|
73
|
+
}
|
|
74
|
+
<div class="cortex-widget__chat-title-wrap">
|
|
75
|
+
<p class="cortex-widget__chat-title">{{ chat.title ?? chat.agentName }}</p>
|
|
76
|
+
</div>
|
|
77
|
+
<button class="cortex-widget__header-btn" (click)="chat.newChat()">+</button>
|
|
78
|
+
</div>
|
|
79
|
+
</ng-template>
|
|
80
|
+
</cortex-chat-widget>
|
|
81
|
+
`,
|
|
82
|
+
})
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
| Field | Type | Description |
|
|
86
|
+
| -------------- | --------------------- | -------------------------------------------------------------- |
|
|
87
|
+
| `screen` | `'chat' \| 'threads'` | Which screen the header is on |
|
|
88
|
+
| `viewMode` | `'helper' \| 'full'` | The configured view mode |
|
|
89
|
+
| `title` | `string \| null` | The open thread's title; `null` on a new chat |
|
|
90
|
+
| `agentName` | `string \| undefined` | `agentName` in the widget's locale |
|
|
91
|
+
| `isWorking` | `boolean` | The agent is answering |
|
|
92
|
+
| `debug` | `{ shown, on }` | Whether `showDebugButton` is set, and whether debug mode is on |
|
|
93
|
+
| `newChat` | `() => void` | Starts a new chat |
|
|
94
|
+
| `openHistory` | `() => void` | Shows the history: its screen, or the sidebar in full mode |
|
|
95
|
+
| `closeHistory` | `() => void` | Returns to the open chat |
|
|
96
|
+
| `toggleDebug` | `() => void` | Switches debug mode |
|
|
97
|
+
|
|
98
|
+
The default header's classes are there to reuse: `cortex-widget__chat-header`
|
|
99
|
+
for the bar, `cortex-widget__chat-title` for the title, and
|
|
100
|
+
`cortex-widget__header-btn` for its quiet icon buttons.
|
|
101
|
+
|
|
102
|
+
## Theming
|
|
103
|
+
|
|
104
|
+
Every token in `theme.css` can be overridden on `:root` or on any ancestor of
|
|
105
|
+
the widget. Beside the colors, radius and `--cortex-font-size`, four tokens
|
|
106
|
+
ship unset and fall back when you leave them out:
|
|
107
|
+
|
|
108
|
+
| Token | Falls back to | Styles |
|
|
109
|
+
| -------------------------------- | --------------------------- | ------------------------------------ |
|
|
110
|
+
| `--cortex-font-size-message` | `--cortex-font-size` | Message bubbles and the composer |
|
|
111
|
+
| `--cortex-font-size-header` | `--cortex-font-size` | The chat and history titles |
|
|
112
|
+
| `--cortex-color-send-empty` | `transparent` | The send button with nothing to send |
|
|
113
|
+
| `--cortex-color-send-empty-text` | `--cortex-color-text-muted` | Its icon |
|
|
114
|
+
|
|
115
|
+
The composer resets its own focus and disabled styles, so a host's global
|
|
116
|
+
`textarea:focus` ring or disabled fill does not reach it.
|
|
117
|
+
|
|
118
|
+
## Tables
|
|
119
|
+
|
|
120
|
+
A markdown table in an answer scrolls sideways instead of squeezing its
|
|
121
|
+
columns. Once it has finished arriving, hovering it (or focusing into it)
|
|
122
|
+
shows two actions at its top end: expand, which opens it in a dialog with room
|
|
123
|
+
for every column, and export, which downloads it as an `.xlsx` file. Numbers
|
|
124
|
+
export as numbers; the header row is bold.
|
|
125
|
+
|
|
54
126
|
## Client tools
|
|
55
127
|
|
|
56
128
|
Control-Center tools published with type "embedded" render inside the chat
|