@aparte/core 0.12.1 → 0.13.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/dist/client/aparte-client.d.ts +25 -0
- package/dist/client/aparte-client.d.ts.map +1 -1
- package/dist/components/bubble/aparte-chat-bubble.d.ts +117 -0
- package/dist/components/bubble/aparte-chat-bubble.d.ts.map +1 -1
- package/dist/components/chat/aparte-chat.d.ts +70 -15
- package/dist/components/chat/aparte-chat.d.ts.map +1 -1
- package/dist/components/composer/aparte-composer-action.d.ts +48 -7
- package/dist/components/composer/aparte-composer-action.d.ts.map +1 -1
- package/dist/components/composer/aparte-composer-add-attachment.d.ts +37 -4
- package/dist/components/composer/aparte-composer-add-attachment.d.ts.map +1 -1
- package/dist/components/composer/aparte-composer-attachments.d.ts +35 -3
- package/dist/components/composer/aparte-composer-attachments.d.ts.map +1 -1
- package/dist/components/composer/aparte-composer-cancel.d.ts +25 -2
- package/dist/components/composer/aparte-composer-cancel.d.ts.map +1 -1
- package/dist/components/composer/aparte-composer-input.d.ts +54 -5
- package/dist/components/composer/aparte-composer-input.d.ts.map +1 -1
- package/dist/components/composer/aparte-composer-send.d.ts +47 -4
- package/dist/components/composer/aparte-composer-send.d.ts.map +1 -1
- package/dist/components/composer/aparte-composer-toolbar.d.ts +15 -4
- package/dist/components/composer/aparte-composer-toolbar.d.ts.map +1 -1
- package/dist/components/composer/aparte-composer.d.ts +139 -7
- package/dist/components/composer/aparte-composer.d.ts.map +1 -1
- package/dist/components/composer/index.d.ts +1 -1
- package/dist/components/composer/index.d.ts.map +1 -1
- package/dist/components/conversation-list/aparte-conversation-list.d.ts +50 -8
- package/dist/components/conversation-list/aparte-conversation-list.d.ts.map +1 -1
- package/dist/components/elicitation/aparte-elicitation.d.ts +45 -0
- package/dist/components/elicitation/aparte-elicitation.d.ts.map +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/status/aparte-chat-status.d.ts +47 -5
- package/dist/components/status/aparte-chat-status.d.ts.map +1 -1
- package/dist/components/viewport/aparte-chat-viewport.d.ts +78 -8
- package/dist/components/viewport/aparte-chat-viewport.d.ts.map +1 -1
- package/dist/config/aparte-config.d.ts +22 -0
- package/dist/config/aparte-config.d.ts.map +1 -1
- package/dist/config/icon-provider.d.ts +17 -15
- package/dist/config/icon-provider.d.ts.map +1 -1
- package/dist/custom-elements.json +6249 -4138
- package/dist/elicitation/approval-panel.d.ts.map +1 -1
- package/dist/elicitation/panel.d.ts +23 -2
- package/dist/elicitation/panel.d.ts.map +1 -1
- package/dist/generated/element-attributes.d.ts +21 -15
- package/dist/generated/element-attributes.d.ts.map +1 -1
- package/dist/glyphs-QXfbL3n_.js +81 -0
- package/dist/glyphs-QXfbL3n_.js.map +1 -0
- package/dist/icons/extended.d.ts +153 -0
- package/dist/icons/extended.d.ts.map +1 -0
- package/dist/icons/glyphs.d.ts +98 -0
- package/dist/icons/glyphs.d.ts.map +1 -0
- package/dist/icons/index.d.ts +24 -0
- package/dist/icons/index.d.ts.map +1 -0
- package/dist/icons.d.ts +14 -0
- package/dist/icons.d.ts.map +1 -0
- package/dist/icons.js +157 -0
- package/dist/icons.js.map +1 -0
- package/dist/index.css +5082 -2119
- package/dist/index.d.ts +37 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +167 -67
- package/dist/index.js.map +1 -1
- package/dist/index.node.d.ts +2 -2
- package/dist/index.node.d.ts.map +1 -1
- package/dist/index.node.js +1 -1
- package/dist/index.node.js.map +1 -1
- package/dist/{is-awaiting-reply-BWTDvQ__.js → is-awaiting-reply-DrO_oR32.js} +333 -147
- package/dist/is-awaiting-reply-DrO_oR32.js.map +1 -0
- package/dist/primitives/icon/aparte-icon.d.ts +49 -0
- package/dist/primitives/icon/aparte-icon.d.ts.map +1 -0
- package/dist/primitives/icon/index.d.ts +2 -0
- package/dist/primitives/icon/index.d.ts.map +1 -0
- package/dist/primitives/index.d.ts +1 -0
- package/dist/primitives/index.d.ts.map +1 -1
- package/dist/primitives/progress-spinner/aparte-progress-spinner.d.ts +20 -5
- package/dist/primitives/progress-spinner/aparte-progress-spinner.d.ts.map +1 -1
- package/dist/primitives/select/aparte-optgroup.d.ts +30 -7
- package/dist/primitives/select/aparte-optgroup.d.ts.map +1 -1
- package/dist/primitives/select/aparte-option.d.ts +29 -3
- package/dist/primitives/select/aparte-option.d.ts.map +1 -1
- package/dist/primitives/select/aparte-select.d.ts +36 -11
- package/dist/primitives/select/aparte-select.d.ts.map +1 -1
- package/dist/renderers/segments/artifact/card.d.ts.map +1 -1
- package/dist/renderers/segments/thinking.d.ts.map +1 -1
- package/dist/renderers/segments/tool-call.d.ts.map +1 -1
- package/dist/types/element-map.d.ts +2 -0
- package/dist/types/element-map.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/segments.d.ts +92 -7
- package/dist/types/segments.d.ts.map +1 -1
- package/dist/types/tools.d.ts +2 -0
- package/dist/types/tools.d.ts.map +1 -1
- package/package.json +7 -1
- package/dist/is-awaiting-reply-BWTDvQ__.js.map +0 -1
|
@@ -201,6 +201,21 @@ export declare class AparteClient {
|
|
|
201
201
|
/** Config read by this client — an instance config, or the global default. */
|
|
202
202
|
private readonly _config;
|
|
203
203
|
constructor(options?: AparteClientOptions);
|
|
204
|
+
/**
|
|
205
|
+
* What every fresh user action does before it starts a turn.
|
|
206
|
+
*
|
|
207
|
+
* Clearing the abort flag has to happen at the START of the action rather than inside
|
|
208
|
+
* `_streamTurn`, which runs after the auth and file-reading awaits — a reset there
|
|
209
|
+
* erased an abort that arrived while the user was still waiting for a large attachment
|
|
210
|
+
* to be read.
|
|
211
|
+
*
|
|
212
|
+
* Cancelling the previous turn's tool controllers used to happen only on `aparte-send`.
|
|
213
|
+
* Retry and edit reset the flag and left them running, so a tool handler from the turn
|
|
214
|
+
* being superseded stayed alive — with its timeout still counting — while its reply was
|
|
215
|
+
* already off the active path. A cold audit found the asymmetry; three callers, one
|
|
216
|
+
* rule, no third copy to fall out of step.
|
|
217
|
+
*/
|
|
218
|
+
private _beginUserTurn;
|
|
204
219
|
/**
|
|
205
220
|
* Sets up the event listeners.
|
|
206
221
|
* This is called once in the constructor.
|
|
@@ -302,6 +317,16 @@ export declare class AparteClient {
|
|
|
302
317
|
*/
|
|
303
318
|
private _toolsForCurrentModel;
|
|
304
319
|
private _handleRetry;
|
|
320
|
+
/**
|
|
321
|
+
* The system messages a turn opens with: the app's own template, then the registered
|
|
322
|
+
* tools' `systemPrompt`s.
|
|
323
|
+
*
|
|
324
|
+
* A helper rather than three copies. The two lines it replaces were written out at each
|
|
325
|
+
* of the three turn entry points (send, retry, edit), which is exactly how the tool half
|
|
326
|
+
* would have been added to two of them and forgotten in the third — the same shape as
|
|
327
|
+
* the abort-flag asymmetry `_beginUserTurn` exists to prevent.
|
|
328
|
+
*/
|
|
329
|
+
private _systemMessages;
|
|
305
330
|
/**
|
|
306
331
|
* Handle aparte-edit — update the user message in place, truncate all subsequent
|
|
307
332
|
* messages, then re-stream a fresh assistant response.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aparte-client.d.ts","sourceRoot":"","sources":["../../src/client/aparte-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAS9E,OAAO,KAAK,EAAE,kBAAkB,EAAuB,MAAM,qBAAqB,CAAC;AACnF,OAAO,KAAK,EAAoC,aAAa,EAAsB,MAAM,mBAAmB,CAAC;AAK7G,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAoE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"aparte-client.d.ts","sourceRoot":"","sources":["../../src/client/aparte-client.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,40 @@ import type { AparteSegment, AparteAttachment, AparteUsage, AparteMessage } from
|
|
|
2
2
|
/**
|
|
3
3
|
* One message: plain content or a list of rich segments, in light DOM.
|
|
4
4
|
*
|
|
5
|
+
* Normally created for you by `<aparte-chat-viewport>`, one per message in the store;
|
|
6
|
+
* you write the tag by hand only when you drive the DOM yourself. It is ONE message
|
|
7
|
+
* with one role — a transcript is the viewport's job, and a bubble is not a
|
|
8
|
+
* general-purpose card.
|
|
9
|
+
*
|
|
10
|
+
* **Not a slot host.** `_render()` writes its own markup into the light DOM on
|
|
11
|
+
* connect, so children placed inside the tag are replaced rather than projected.
|
|
12
|
+
* Everything customizable is a registered hook instead of a child: the structural
|
|
13
|
+
* shell (`setBubbleShellRenderer` — it must root at `.aparte-message` and carry the
|
|
14
|
+
* region hooks, since every query here is null-guarded and a partial shell silently
|
|
15
|
+
* loses that region), the avatar (`setAvatarProvider`), the attachment chips
|
|
16
|
+
* (`setAttachmentRenderer`), the `‹1/2›` position indicator
|
|
17
|
+
* (`setSiblingNavRenderer`) and the body itself (`registerSegmentRenderer`).
|
|
18
|
+
*
|
|
19
|
+
* Two content paths, mutually exclusive: the `content` attribute (plain text run
|
|
20
|
+
* through the configured Markdown provider, then highlighted once — after streaming
|
|
21
|
+
* ends, not per token) and `setSegments()` / `addSegment()`. Segments win:
|
|
22
|
+
* `.aparte-content` stays hidden for as long as any exist. The painted
|
|
23
|
+
* `.aparte-message-content` box hides itself when there is nothing in it, so a
|
|
24
|
+
* message that is only attachments is not a coloured rectangle.
|
|
25
|
+
*
|
|
26
|
+
* The bubble owns no transport and no host behaviour. The action bar and the branch
|
|
27
|
+
* picker only dispatch the events below; nothing here retries a turn, persists an
|
|
28
|
+
* edit, opens a stats popover or switches a branch. Which buttons exist follows from
|
|
29
|
+
* that: `copy` is on by default, `edit` / `retry` / `feedback` need
|
|
30
|
+
* `setBubbleActions`, `info` needs both that flag and a prior `setUsage()` (a details
|
|
31
|
+
* button over no numbers is a dead button), and an image attachment becomes a preview
|
|
32
|
+
* button only once `setHostHandlers` declares a lightbox — undeclared it stays a
|
|
33
|
+
* picture, with no role, tab stop or pointer.
|
|
34
|
+
*
|
|
35
|
+
* The error state is derived from the segments (an `error` segment sets `data-error`
|
|
36
|
+
* on `.aparte-message`), never from a status attribute, so it behaves identically in
|
|
37
|
+
* vanilla and in every wrapper.
|
|
38
|
+
*
|
|
5
39
|
* All seven events are declared by hand rather than left to the analyser, which
|
|
6
40
|
* found six. `aparte-branch-navigate` is dispatched from the `_onBranchPickerClick`
|
|
7
41
|
* arrow class field, and the auto-detection visits `ts.isMethodDeclaration` only —
|
|
@@ -26,6 +60,65 @@ import type { AparteSegment, AparteAttachment, AparteUsage, AparteMessage } from
|
|
|
26
60
|
* @fires {CustomEvent<AparteBranchNavigateEventDetail>} aparte-branch-navigate - The `‹1/2›` picker moved between sibling versions.
|
|
27
61
|
* @fires {CustomEvent<AparteAttachmentPreviewEventDetail>} aparte-attachment-preview - An attached image was clicked, asking the app to open it full-size.
|
|
28
62
|
*
|
|
63
|
+
* @cssprop [--aparte-message-gap=12px] - Gap between the avatar column and the body (the viewport reuses it between messages).
|
|
64
|
+
* @cssprop [--aparte-message-padding=16px 12px] - Padding around one message row.
|
|
65
|
+
* @cssprop [--aparte-message-max-width=800px] - Width of the centred message row.
|
|
66
|
+
*
|
|
67
|
+
* @cssprop [--aparte-message-content-radius=14px] - Radius of the painted content box.
|
|
68
|
+
* @cssprop [--aparte-message-content-padding=10px 14px] - Padding of the USER box only; the assistant's content is plain full-width prose.
|
|
69
|
+
* @cssprop [--aparte-message-content-bg-user=#efe7f6] - Background of the user box.
|
|
70
|
+
* @cssprop [--aparte-message-content-bg-assistant=transparent] - Background of the assistant box — transparent on purpose (AI-chat convention, not messaging).
|
|
71
|
+
* @cssprop [--aparte-message-content-text-user=var(--aparte-text)] - Text colour inside the user box.
|
|
72
|
+
* @cssprop [--aparte-message-content-text-assistant=var(--aparte-text)] - Text colour inside the assistant box.
|
|
73
|
+
*
|
|
74
|
+
* @cssprop [--aparte-avatar-size=32px] - Square size of the avatar slot.
|
|
75
|
+
* @cssprop [--aparte-avatar-radius=var(--aparte-radius-avatar)] - Avatar corner radius.
|
|
76
|
+
* @cssprop [--aparte-avatar-font-size=14px] - Size of the initial, for a shell that renders one (the default shell leaves the slot empty, and `.aparte-avatar:empty` hides it).
|
|
77
|
+
* @cssprop [--aparte-avatar-bg-user=var(--aparte-primary)] - Avatar background, user role.
|
|
78
|
+
* @cssprop [--aparte-avatar-text-user=var(--aparte-text-inverse)] - Avatar text colour, user role.
|
|
79
|
+
* @cssprop [--aparte-avatar-bg-assistant=var(--aparte-surface-3)] - Avatar background, assistant role.
|
|
80
|
+
* @cssprop [--aparte-avatar-text-assistant=var(--aparte-text-inverse)] - Avatar text colour, assistant role.
|
|
81
|
+
* @cssprop [--aparte-avatar-image-user=none] - `background-image` for the user avatar — a logo with no AvatarProvider and no JS.
|
|
82
|
+
* @cssprop [--aparte-avatar-image-assistant=none] - `background-image` for the assistant avatar.
|
|
83
|
+
* @cssprop [--aparte-avatar-image-size=90%] - `background-size` for both avatar images.
|
|
84
|
+
*
|
|
85
|
+
* @cssprop [--aparte-name-font-size=14px] - Sender name in the header.
|
|
86
|
+
* @cssprop [--aparte-name-color=var(--aparte-text)] - Sender name colour.
|
|
87
|
+
* @cssprop [--aparte-timestamp-font-size=12px] - Timestamp in the header.
|
|
88
|
+
* @cssprop [--aparte-timestamp-color=var(--aparte-text-muted)] - Timestamp colour.
|
|
89
|
+
* @cssprop [--aparte-content-font-size=15px] - Body type size, applied to both the plain-content and the segments container.
|
|
90
|
+
* @cssprop [--aparte-content-color=var(--aparte-text)] - Body text colour.
|
|
91
|
+
* @cssprop [--aparte-content-line-height=var(--aparte-line-height-loose)] - Body line height.
|
|
92
|
+
*
|
|
93
|
+
* @cssprop [--aparte-attachments-max-height=140px] - Cap on the sent-attachment strip; past it the strip scrolls instead of growing.
|
|
94
|
+
* @cssprop [--aparte-attachment-image-size=40px] - Tile size in the strip. The strip re-declares the global 72px down to 40px, since these are thumbnails inside a conversation.
|
|
95
|
+
* @cssprop [--aparte-thumb-radius=var(--aparte-radius-lg)] - Attachment tile radius (shared with the composer's preview tiles).
|
|
96
|
+
* @cssprop [--aparte-thumb-name-color=#ffffff] - Filename overlaid on a tile.
|
|
97
|
+
* @cssprop --aparte-thumb-name-scrim - Gradient behind that filename, so it stays legible over any image.
|
|
98
|
+
* @cssprop [--aparte-thumb-name-padding=14px 5px 4px] - Padding of the filename overlay.
|
|
99
|
+
*
|
|
100
|
+
* @cssprop [--aparte-action-bar-gap=4px] - Gap between action buttons (and between the footer's two regions).
|
|
101
|
+
* @cssprop [--aparte-action-bar-btn-size=28px] - Square size of an action button; also the footer's reserved height.
|
|
102
|
+
* @cssprop [--aparte-action-bar-btn-color=var(--aparte-text-muted)] - Action icon colour at rest.
|
|
103
|
+
* @cssprop [--aparte-action-bar-btn-hover-bg=var(--aparte-surface-2)] - Action button hover background (the branch arrows reuse it).
|
|
104
|
+
* @cssprop [--aparte-action-bar-btn-hover-color=var(--aparte-text)] - Action icon colour on hover.
|
|
105
|
+
*
|
|
106
|
+
* @cssprop [--aparte-branch-picker-gap=4px] - Gap between the arrows and the position label.
|
|
107
|
+
* @cssprop [--aparte-branch-picker-btn-size=20px] - Square size of each arrow.
|
|
108
|
+
* @cssprop [--aparte-branch-picker-btn-icon-size=16px] - Glyph size inside an arrow.
|
|
109
|
+
* @cssprop [--aparte-branch-picker-btn-color=var(--aparte-text-muted)] - Arrow colour at rest.
|
|
110
|
+
* @cssprop [--aparte-branch-picker-btn-hover-color=var(--aparte-text)] - Arrow colour on hover (a disabled arrow is dimmed instead).
|
|
111
|
+
* @cssprop [--aparte-branch-picker-label-size=12px] - Type size of the position label.
|
|
112
|
+
* @cssprop [--aparte-branch-picker-label-color=var(--aparte-text-muted)] - Colour of the position label.
|
|
113
|
+
* @cssprop [--aparte-branch-picker-label-min-width=32px] - Reserved label width, so `9 / 9` growing to `10 / 12` does not shift the arrows.
|
|
114
|
+
*
|
|
115
|
+
* @cssprop [--aparte-waiting-height=1.5em] - Min height of the waiting region, so the first token does not jump the layout.
|
|
116
|
+
* @cssprop [--aparte-waiting-dot-gap=4px] - Gap between the three waiting dots.
|
|
117
|
+
* @cssprop [--aparte-status-dot-size=6px] - Diameter of a waiting dot (shared with the status indicator).
|
|
118
|
+
* @cssprop [--aparte-status-color=var(--aparte-text-muted)] - Colour of the waiting dots (shared with the status indicator).
|
|
119
|
+
*
|
|
120
|
+
* @cssprop [--aparte-error-solid=#dc2626] - Ring drawn around the avatar while `data-error` is set. The error CARD itself belongs to the error segment renderer.
|
|
121
|
+
*
|
|
29
122
|
* @example
|
|
30
123
|
* <!-- Rendered for you by the viewport. Written by hand only when you drive the DOM
|
|
31
124
|
* yourself: `message-id` is what streaming and the action bar address it by. -->
|
|
@@ -38,6 +131,23 @@ import type { AparteSegment, AparteAttachment, AparteUsage, AparteMessage } from
|
|
|
38
131
|
*
|
|
39
132
|
* <!-- While a reply is in flight: `streaming` hides the action bar and shows the caret. -->
|
|
40
133
|
* <aparte-chat-bubble message-id="a2" data-role="assistant" streaming></aparte-chat-bubble>
|
|
134
|
+
*
|
|
135
|
+
* <!-- One reply among several. `setSiblings(count, index)` is what draws the picker, and
|
|
136
|
+
* it is a METHOD, not an attribute — so a branch cannot be shown by markup alone.
|
|
137
|
+
* Retry forks a sibling instead of overwriting the reply, and this is the control
|
|
138
|
+
* that walks them; each press dispatches `aparte-branch-navigate` for a host to
|
|
139
|
+
* answer. Kept in the example because a guide that describes branching has no other
|
|
140
|
+
* way to SHOW it. -->
|
|
141
|
+
* <aparte-chat-bubble
|
|
142
|
+
* message-id="a3"
|
|
143
|
+
* data-role="assistant"
|
|
144
|
+
* name="Assistant"
|
|
145
|
+
* content="A second take on the same question."
|
|
146
|
+
* ></aparte-chat-bubble>
|
|
147
|
+
*
|
|
148
|
+
* <script>
|
|
149
|
+
* document.querySelector('aparte-chat-bubble[message-id="a3"]').setSiblings(2, 0);
|
|
150
|
+
* </script>
|
|
41
151
|
*/
|
|
42
152
|
export declare class AparteChatBubble extends HTMLElement {
|
|
43
153
|
private _contentEl;
|
|
@@ -102,6 +212,13 @@ export declare class AparteChatBubble extends HTMLElement {
|
|
|
102
212
|
appendToken(chunk: string): void;
|
|
103
213
|
/** Set content directly */
|
|
104
214
|
setContent(content: string): void;
|
|
215
|
+
/**
|
|
216
|
+
* Drop the incremental Markdown parser's state.
|
|
217
|
+
*
|
|
218
|
+
* Only needed where `_content` is REPLACED rather than grown. `appendToken` grows it, so
|
|
219
|
+
* the parser's cursor stays valid there — which is the whole point of the seam.
|
|
220
|
+
*/
|
|
221
|
+
private _resetMarkdownStream;
|
|
105
222
|
/** Get current content */
|
|
106
223
|
getContent(): string;
|
|
107
224
|
/** Set segments for rich content */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aparte-chat-bubble.d.ts","sourceRoot":"","sources":["../../../src/components/bubble/aparte-chat-bubble.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,aAAa,EACb,gBAAgB,EAOhB,WAAW,EACX,aAAa,EACd,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"aparte-chat-bubble.d.ts","sourceRoot":"","sources":["../../../src/components/bubble/aparte-chat-bubble.ts"],"names":[],"mappings":"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"}
|
|
@@ -4,16 +4,44 @@ import '../elicitation/aparte-elicitation.js';
|
|
|
4
4
|
/**
|
|
5
5
|
* AparteChat - The Shell
|
|
6
6
|
*
|
|
7
|
-
* The container element for a chat.
|
|
8
|
-
* `<aparte-
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
7
|
+
* The container element for a chat. It lays out its Light DOM children as a flex
|
|
8
|
+
* column: an `<aparte-chat-viewport>` takes the space left over (`flex: 1 1 auto`)
|
|
9
|
+
* and scrolls, an `<aparte-composer>` keeps its own height below it. Light DOM on
|
|
10
|
+
* purpose, so the page's own global CSS reaches inside.
|
|
11
|
+
*
|
|
12
|
+
* The presence of an `<aparte-chat-viewport>` child at connect is the exact test for
|
|
13
|
+
* "the author composed this". Find one and the children are used as given — this
|
|
14
|
+
* element moves none of them, so anything else you drop in (a header, a banner above
|
|
15
|
+
* the composer) is simply another row of that column, in DOM order. Find none and
|
|
16
|
+
* `innerHTML` is OVERWRITTEN with a default composition — a viewport, an
|
|
17
|
+
* `<aparte-elicitation>` presenter, and a composer shell holding an input and a send
|
|
18
|
+
* button, plus the two attachment primitives when `attachments` is set — so children
|
|
19
|
+
* written without a viewport anywhere inside them are destroyed, that header included.
|
|
20
|
+
* The test is a DESCENDANT query, so a viewport nested in a wrapper of your own still
|
|
21
|
+
* counts — compose it yourself with the viewport somewhere in the tree, or leave the tag
|
|
22
|
+
* empty. Angular's wrapper sets `framework-managed` instead of relying on that test,
|
|
23
|
+
* because its children do not exist yet when this element upgrades; React, Vue and
|
|
24
|
+
* Svelte never create this element at all, so the question does not arise for them.
|
|
12
25
|
*
|
|
13
26
|
* Being a component (not a bare `<div>`), it also owns behaviour a wrapper div
|
|
14
27
|
* can't: with `center-empty`, it watches its own viewport and keeps the composer
|
|
15
|
-
* centered as a welcome state until the first
|
|
16
|
-
* layout — no external JavaScript.
|
|
28
|
+
* centered as a welcome state until the first `<aparte-chat-bubble>` lands, then
|
|
29
|
+
* slides to the normal layout — no external JavaScript. While centered it carries
|
|
30
|
+
* `data-empty` on itself (set and cleared by that same watcher), which is the hook to
|
|
31
|
+
* style the welcome state from an app's own CSS. The watcher needs a viewport somewhere
|
|
32
|
+
* inside, and hand-written markup always has one because composing the default injects
|
|
33
|
+
* it — so the only path where no watcher starts and `data-empty` is never set is
|
|
34
|
+
* `framework-managed`, where the framework owns the subtree anyway. The stylesheet
|
|
35
|
+
* centers through
|
|
36
|
+
* `aparte-chat[center-empty][data-empty]` and its DIRECT viewport child, so a
|
|
37
|
+
* framework-managed host that nests the viewport inside a container of its own gets
|
|
38
|
+
* nothing from the attribute — the wrappers ship their own centered layout.
|
|
39
|
+
*
|
|
40
|
+
* It is also one of the anchors where core re-declares its derived CSS layer, so
|
|
41
|
+
* overriding a master — `--aparte-primary`, a surface, a text colour — on a single
|
|
42
|
+
* `<aparte-chat>` re-derives the values computed from it for that instance rather
|
|
43
|
+
* than moving one button. That is per-instance theming. The literal palette is
|
|
44
|
+
* deliberately not re-declared here, so a chat nested in a dark wrapper stays dark.
|
|
17
45
|
*
|
|
18
46
|
* Presentational only: it does NOT wire a transport/client. Attach an
|
|
19
47
|
* `AparteClient`, or handle `aparte-send` yourself, as with the primitives.
|
|
@@ -24,16 +52,26 @@ import '../elicitation/aparte-elicitation.js';
|
|
|
24
52
|
* @attr {boolean} disabled - Disables the composer
|
|
25
53
|
* @attr {boolean} center-empty - Center the composer as a welcome state until the first message, then slide to the normal layout
|
|
26
54
|
* @attr {boolean} framework-managed - The wrapper's explicit hands-off signal: set it and this
|
|
27
|
-
* element composes none of its own children, because the framework owns them.
|
|
28
|
-
*
|
|
55
|
+
* element composes none of its own children, because the framework owns them. Read once at
|
|
56
|
+
* connect (it is not observed), so it has to be in the initial markup. Angular's wrapper sets
|
|
57
|
+
* it on this element — its component selector IS `aparte-chat`; React/Vue/Svelte render a
|
|
58
|
+
* `[data-aparte-chat]` div and never create this element at all.
|
|
29
59
|
* @attr {boolean} attachments - Add the file picker + chips strip to the default composition (opt-in: the host must consume the files — an `AparteClient` does, a hand-rolled loop must read `event.detail.files`)
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* <!-- Left empty it fills in a viewport, an input and a send button. -->
|
|
33
|
-
* <aparte-chat center-empty placeholder="Say something…" style="height: 600px"></aparte-chat>
|
|
34
60
|
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
61
|
+
* @cssprop [--aparte-chat-bottom-gap=var(--aparte-space-8, 16px)] - Space below the
|
|
62
|
+
* composer, as `padding-block-end` on the shell (the same rule covers a wrapper's
|
|
63
|
+
* `[data-aparte-chat]` root). The gap belongs to this element because padding applied
|
|
64
|
+
* from outside would also shrink the scroll area, stopping the transcript short of the
|
|
65
|
+
* edge instead of scrolling to it.
|
|
66
|
+
*
|
|
67
|
+
* Composing it yourself is the other form, and the container still lays it out and still
|
|
68
|
+
* runs `center-empty`. It is written out here rather than as a second `@example` for a
|
|
69
|
+
* mechanical reason: every element-own example is concatenated into ONE live frame on the
|
|
70
|
+
* generated reference page, so a second `<aparte-chat>` there rendered as a second whole
|
|
71
|
+
* chat — two empty composers with 600px of nothing between them.
|
|
72
|
+
*
|
|
73
|
+
* ```html
|
|
74
|
+
* <aparte-chat center-empty attachments style="height: 320px">
|
|
37
75
|
* <aparte-chat-viewport></aparte-chat-viewport>
|
|
38
76
|
* <aparte-composer>
|
|
39
77
|
* <div class="aparte-composer-shell">
|
|
@@ -44,6 +82,23 @@ import '../elicitation/aparte-elicitation.js';
|
|
|
44
82
|
* </div>
|
|
45
83
|
* </aparte-composer>
|
|
46
84
|
* </aparte-chat>
|
|
85
|
+
* ```
|
|
86
|
+
*
|
|
87
|
+
* @example
|
|
88
|
+
* <!-- Left empty it fills in a viewport, an input and a send button. -->
|
|
89
|
+
* <aparte-chat center-empty placeholder="Say something…" style="height: 320px"></aparte-chat>
|
|
90
|
+
*
|
|
91
|
+
* <script>
|
|
92
|
+
* // Seeded so the frame shows a real exchange rather than an empty box: this
|
|
93
|
+
* // example is RENDERED, not only read.
|
|
94
|
+
* const chat = document.querySelector('aparte-chat');
|
|
95
|
+
* chat.viewport.appendMessage({ id: 'u1', role: 'user', content: 'What is a transport?' });
|
|
96
|
+
* chat.viewport.appendMessage({
|
|
97
|
+
* id: 'a1',
|
|
98
|
+
* role: 'assistant',
|
|
99
|
+
* content: 'The object that talks to the model. Swap it and the UI does not change.',
|
|
100
|
+
* });
|
|
101
|
+
* </script>
|
|
47
102
|
*/
|
|
48
103
|
export declare class AparteChat extends HTMLElement {
|
|
49
104
|
static get observedAttributes(): string[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aparte-chat.d.ts","sourceRoot":"","sources":["../../../src/components/chat/aparte-chat.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,sCAAsC,CAAC;AAG9C
|
|
1
|
+
{"version":3,"file":"aparte-chat.d.ts","sourceRoot":"","sources":["../../../src/components/chat/aparte-chat.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,sCAAsC,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGG;AACH,qBAAa,UAAW,SAAQ,WAAW;IACzC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,SAAS,CAAiC;IAElD;;;;OAIG;IACH,OAAO,CAAC,UAAU,CAAS;IAE3B,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAmB9F,6EAA6E;IAC7E,IAAI,QAAQ,IAAI,kBAAkB,GAAG,IAAI,CAExC;IAED,qEAAqE;IACrE,IAAI,QAAQ,IAAI,cAAc,GAAG,IAAI,CAEpC;IAED,OAAO,CAAC,OAAO;IAsDf;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAuBxB,6EAA6E;IAC7E,OAAO,CAAC,YAAY;IAKpB,yEAAyE;IACzE,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,YAAY;CAMrB"}
|
|
@@ -2,16 +2,37 @@ import type { AparteComposer } from './aparte-composer.js';
|
|
|
2
2
|
/**
|
|
3
3
|
* Generic action button primitive for <aparte-composer>.
|
|
4
4
|
*
|
|
5
|
-
* @element aparte-composer-action
|
|
6
5
|
* The consumer declares it directly in markup — no global registration needed.
|
|
7
6
|
*
|
|
7
|
+
* It is the escape hatch for a button core has no opinion about: it renders one icon
|
|
8
|
+
* button wearing `.aparte-action-button` (the shared icon-button look — colour from
|
|
9
|
+
* `--aparte-neutral`, hover tint derived from `--aparte-primary`) and emits
|
|
10
|
+
* `aparte-action-click`. It carries no behaviour of its own and nothing in core listens
|
|
11
|
+
* for that event, so the app is the only thing that can make it do something. Prefer the
|
|
12
|
+
* dedicated element wherever one exists — `<aparte-composer-send>`,
|
|
13
|
+
* `<aparte-composer-cancel>`, `<aparte-composer-add-attachment>` — since those already
|
|
14
|
+
* talk to the composer.
|
|
15
|
+
*
|
|
16
|
+
* The host is `display: contents`, so the `<button>` rather than this element is the flex
|
|
17
|
+
* child of the surrounding `.aparte-composer-row`. It subscribes to the nearest composer's
|
|
18
|
+
* `disabled` and `streaming` changes, so it greys out while a turn is running without the
|
|
19
|
+
* app tracking that. Used outside a composer it still mounts and still fires, with
|
|
20
|
+
* `composer: null` in the detail.
|
|
21
|
+
*
|
|
22
|
+
* A child already carrying `class="aparte-cact-button"` suppresses core's own render — and
|
|
23
|
+
* core then wires nothing to it: no click listener (so no `aparte-action-click`), no
|
|
24
|
+
* `label` → `aria-label`/`title` write, no `icon` write, no disabled/streaming sync. Take
|
|
25
|
+
* that path only for a button your own code drives end to end. Any other child is replaced
|
|
26
|
+
* on the first render.
|
|
27
|
+
*
|
|
28
|
+
* @element aparte-composer-action
|
|
29
|
+
*
|
|
8
30
|
* @attr {string} icon - Icon key for aparteGlobalConfig.getIcon(), or raw SVG/HTML starting with `<`
|
|
9
31
|
* @attr {string} label - Accessible label (also used as tooltip)
|
|
10
32
|
* @attr {boolean} disabled - Disables the button
|
|
11
33
|
* @attr {string} action-id - Identifies WHICH button fired; carried as
|
|
12
34
|
* `AparteActionClickEventDetail.actionId`. Read lazily at dispatch time rather than
|
|
13
|
-
* observed, so
|
|
14
|
-
* custom composer buttons apart absent from the typed surface.
|
|
35
|
+
* observed, so changing it takes effect on the next click.
|
|
15
36
|
*
|
|
16
37
|
* @fires {CustomEvent<AparteActionClickEventDetail>} aparte-action-click - Bubbles up when
|
|
17
38
|
* the button is clicked, carrying which button it was and the composer it belongs to.
|
|
@@ -21,12 +42,32 @@ import type { AparteComposer } from './aparte-composer.js';
|
|
|
21
42
|
* could not tell which one fired.
|
|
22
43
|
* detail: { actionId: string, composer: AparteComposer | null }
|
|
23
44
|
*
|
|
24
|
-
* @
|
|
45
|
+
* @cssprop [--aparte-input-action-btn-size=36px] - Square size of the button. On a coarse
|
|
46
|
+
* pointer the stylesheet re-sets it to `--aparte-touch-target-size` (44px) on
|
|
47
|
+
* `.aparte-action-button` itself, which wins over a value inherited from your theme.
|
|
48
|
+
* @cssprop [--aparte-input-action-btn-icon-size=20px] - Size of the `<svg>` inside it.
|
|
49
|
+
* @cssprop [--aparte-radius-action-btn=var(--aparte-radius-sm)] - Corner radius.
|
|
25
50
|
*
|
|
26
51
|
* @example
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
52
|
+
* <!-- Inside a composer, because that is what it resolves with `closest()`. `action-id`
|
|
53
|
+
* is what tells two custom buttons apart: it comes back on the event's detail, and
|
|
54
|
+
* a second button without one is indistinguishable from the first. -->
|
|
55
|
+
* <aparte-composer>
|
|
56
|
+
* <div class="aparte-composer-shell">
|
|
57
|
+
* <div class="aparte-composer-row">
|
|
58
|
+
* <aparte-composer-input style="flex: 1"></aparte-composer-input>
|
|
59
|
+
* <aparte-composer-action icon="star" label="Favourite" action-id="favourite"></aparte-composer-action>
|
|
60
|
+
* <aparte-composer-send></aparte-composer-send>
|
|
61
|
+
* </div>
|
|
62
|
+
* </div>
|
|
63
|
+
* </aparte-composer>
|
|
64
|
+
*
|
|
65
|
+
* <script>
|
|
66
|
+
* // The event bubbles, so one listener above the composer serves every action.
|
|
67
|
+
* document.addEventListener('aparte-action-click', (event) => {
|
|
68
|
+
* if (event.detail.actionId === 'favourite') console.log('starred');
|
|
69
|
+
* });
|
|
70
|
+
* </script>
|
|
30
71
|
*/
|
|
31
72
|
export declare class AparteComposerAction extends HTMLElement {
|
|
32
73
|
private _button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aparte-composer-action.d.ts","sourceRoot":"","sources":["../../../src/components/composer/aparte-composer-action.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D
|
|
1
|
+
{"version":3,"file":"aparte-composer-action.d.ts","sourceRoot":"","sources":["../../../src/components/composer/aparte-composer-action.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,qBAAa,oBAAqB,SAAQ,WAAW;IACjD,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,aAAa,CAAsB;IAG3C,OAAO,CAAC,QAAQ,CAAgC;IAEhD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,iBAAiB,IAAI,IAAI;IAazB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAgBvF,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,OAAO;IAsBf,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;CAKvB;AAMD;;;;;;;;;GASG;AACH,MAAM,WAAW,4BAA4B;IACzC,yEAAyE;IACzE,QAAQ,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;CACnC"}
|
|
@@ -1,14 +1,48 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* File picker button for <aparte-composer>.
|
|
3
3
|
*
|
|
4
|
-
* @element aparte-composer-add-attachment
|
|
5
4
|
* Opens a native file picker on click, then pushes picked files to root.addAttachments().
|
|
6
5
|
* Also sets up drag & drop on the nearest <aparte-composer> root.
|
|
7
6
|
*
|
|
7
|
+
* It only COLLECTS files: it never reads, uploads or renders them.
|
|
8
|
+
* `<aparte-composer-attachments>` draws the pending strip, and sending is the host's job
|
|
9
|
+
* (`event.detail.files` on `aparte-send`) — which is why the default `<aparte-chat>` shell
|
|
10
|
+
* only includes this button when the `attachments` attribute is set. With nothing reading
|
|
11
|
+
* the files, an attach button is an affordance core cannot honour (ratified decision #8).
|
|
12
|
+
*
|
|
13
|
+
* Drag & drop is installed on the composer ROOT, not on this button, so a drop anywhere
|
|
14
|
+
* over the composer attaches and the root carries `aparte-is-dragover` while a drag is
|
|
15
|
+
* over it. The dashed outline is drawn on `.aparte-composer-shell` when the markup has one
|
|
16
|
+
* and on the composer element itself when it does not — width from
|
|
17
|
+
* `--aparte-focus-outline-width`, colour from `--aparte-primary`, radius from
|
|
18
|
+
* `--aparte-radius-input`, none of them declared here. The drop handler always calls
|
|
19
|
+
* `preventDefault()`, even while disabled, so the browser can never navigate away to the
|
|
20
|
+
* dropped file. `disabled` on the ROOT removes the drop target; `streaming` does not — it
|
|
21
|
+
* only greys the button out, so a drop mid-turn still attaches.
|
|
22
|
+
*
|
|
23
|
+
* The label and the icon are not attributes — they come from the config (`t('actionUpload')`
|
|
24
|
+
* and the `paperclip` icon), so a locale or icon-provider change rewrites the existing
|
|
25
|
+
* button in place instead of re-rendering it.
|
|
26
|
+
*
|
|
27
|
+
* A child already carrying `class="aparte-caa-button"` suppresses core's own render — and
|
|
28
|
+
* core then wires nothing to it: no click listener (so no picker opens), and no label,
|
|
29
|
+
* icon or disabled/streaming writes. Drag & drop still works, since it is installed on the
|
|
30
|
+
* root regardless. Any other child is replaced on the first render. The file input itself
|
|
31
|
+
* is never a child: it is created on `document.body` per click and removed again.
|
|
32
|
+
*
|
|
33
|
+
* @element aparte-composer-add-attachment
|
|
34
|
+
*
|
|
8
35
|
* @attr {string} accept - MIME types / extensions passed to the file input (e.g. "image/*,.pdf")
|
|
9
36
|
* @attr {boolean} multiple - Allow multiple file selection (default: true)
|
|
10
|
-
* @attr {boolean} disabled - Greys out the picker
|
|
11
|
-
|
|
37
|
+
* @attr {boolean} disabled - Greys out the picker. Drops are gated by the composer root's
|
|
38
|
+
* `disabled`, not by this one.
|
|
39
|
+
*
|
|
40
|
+
* @cssprop [--aparte-input-action-btn-size=36px] - Square size of the button. On a coarse
|
|
41
|
+
* pointer the stylesheet re-sets it to `--aparte-touch-target-size` (44px) on
|
|
42
|
+
* `.aparte-action-button` itself, which wins over a value inherited from your theme.
|
|
43
|
+
* @cssprop [--aparte-input-action-btn-icon-size=20px] - Size of the `<svg>` inside it.
|
|
44
|
+
* @cssprop [--aparte-radius-action-btn=var(--aparte-radius-sm)] - Corner radius.
|
|
45
|
+
*
|
|
12
46
|
* @example
|
|
13
47
|
* <!-- Opt-in: nothing consumes the files unless your host does (an AparteClient, or
|
|
14
48
|
* your own listener reading `event.detail.files` off `aparte-send`). -->
|
|
@@ -45,6 +79,5 @@ export declare class AparteComposerAddAttachment extends HTMLElement {
|
|
|
45
79
|
private _connectToRoot;
|
|
46
80
|
private _handleClick;
|
|
47
81
|
private _setupDragDrop;
|
|
48
|
-
private _defaultIcon;
|
|
49
82
|
}
|
|
50
83
|
//# sourceMappingURL=aparte-composer-add-attachment.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aparte-composer-add-attachment.d.ts","sourceRoot":"","sources":["../../../src/components/composer/aparte-composer-add-attachment.ts"],"names":[],"mappings":"AAKA
|
|
1
|
+
{"version":3,"file":"aparte-composer-add-attachment.d.ts","sourceRoot":"","sources":["../../../src/components/composer/aparte-composer-add-attachment.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBAAa,2BAA4B,SAAQ,WAAW;IACxD,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,YAAY,CAA6B;IACjD,OAAO,CAAC,aAAa,CAAsB;IAG3C,OAAO,CAAC,QAAQ,CAAgC;IAEhD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAO5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQvF,OAAO,CAAC,QAAQ;IAIhB;;;;;;;;;OASG;IACH,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,OAAO;IAmBf,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,cAAc;CA8BzB"}
|
|
@@ -1,16 +1,48 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Renders a square thumbnail tile for each file attached to the root composer.
|
|
3
3
|
*
|
|
4
|
-
* @element aparte-composer-attachments
|
|
5
4
|
* Image files show the actual picture; other files show an extension badge.
|
|
6
5
|
* The filename and a remove (✗) button surface on hover. Clicking an image asks
|
|
7
6
|
* the app to open it full-size (`aparte-attachment-preview`) — only when the app
|
|
8
7
|
* declared `attachmentPreview` via `aparteGlobalConfig.setHostHandlers()`.
|
|
9
|
-
* Automatically hidden when there are no attachments.
|
|
10
|
-
*
|
|
8
|
+
* Automatically hidden when there are no attachments. It reads the nearest
|
|
9
|
+
* <aparte-composer> ancestor; without one it renders nothing and stays hidden.
|
|
10
|
+
*
|
|
11
|
+
* This is the PENDING strip: what the user has attached and not yet sent. It mirrors
|
|
12
|
+
* `composer.attachments` and rewrites itself on every `attachments-change` — it is not the
|
|
13
|
+
* strip under a sent message, which the bubble draws with the same `.aparte-thumb` tile
|
|
14
|
+
* rules (minus the remove button), so a tile variable set at the theme root reaches both
|
|
15
|
+
* strips, while one set on this element reaches only this one. It owns its `innerHTML` and
|
|
16
|
+
* therefore projects nothing:
|
|
17
|
+
* children written inside it are discarded on the first render. Removing a tile calls
|
|
18
|
+
* `root.removeAttachment()` rather than mutating a list of its own, and the image previews
|
|
19
|
+
* are blob URLs minted per render and revoked on the next one and on disconnect.
|
|
20
|
+
*
|
|
21
|
+
* @element aparte-composer-attachments
|
|
11
22
|
*
|
|
12
23
|
* @fires {CustomEvent<AparteAttachmentPreviewEventDetail>} aparte-attachment-preview - An attached image was clicked; the app opens it full-size, and only if it declared `attachmentPreview`.
|
|
13
24
|
*
|
|
25
|
+
* @cssprop [--aparte-attachments-max-height=140px] - Height cap on the strip; past it the
|
|
26
|
+
* tiles scroll instead of pushing the composer up.
|
|
27
|
+
* @cssprop [--aparte-attachment-image-size=56px] - Tile edge. The stylesheet sets 56px on
|
|
28
|
+
* this element (the `:root` default is 72px, and the sent-message strip re-sets 40px on
|
|
29
|
+
* itself), so a theme-level value reaches neither strip — target
|
|
30
|
+
* `aparte-composer-attachments` to resize these tiles.
|
|
31
|
+
* @cssprop [--aparte-thumb-radius=var(--aparte-radius-lg)] - Tile corner radius.
|
|
32
|
+
* @cssprop [--aparte-attachment-chip-bg=var(--aparte-surface-2)] - Tile background, seen
|
|
33
|
+
* behind a non-image file.
|
|
34
|
+
* @cssprop [--aparte-attachment-chip-border=var(--aparte-border)] - Tile border colour.
|
|
35
|
+
* @cssprop [--aparte-thumb-name-color=#ffffff] - Filename colour on the hover overlay.
|
|
36
|
+
* @cssprop [--aparte-thumb-name-scrim=linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0))] - Background behind the filename; a bottom-up black
|
|
37
|
+
* gradient by default, so the name stays legible over any picture.
|
|
38
|
+
* @cssprop [--aparte-thumb-name-padding=14px 5px 4px] - Padding of that overlay.
|
|
39
|
+
* @cssprop [--aparte-thumb-remove-size=18px] - Diameter of the ✗ button.
|
|
40
|
+
* @cssprop [--aparte-thumb-remove-inset=3px] - Its inset from the tile's top and right
|
|
41
|
+
* edges (physical `right`, so it does not flip in a right-to-left locale).
|
|
42
|
+
* @cssprop [--aparte-thumb-remove-bg=rgba(0, 0, 0, 0.6)] - Its background.
|
|
43
|
+
* @cssprop [--aparte-thumb-remove-bg-hover=rgba(0, 0, 0, 0.85)] - Its hover background.
|
|
44
|
+
* @cssprop [--aparte-thumb-remove-color=#ffffff] - Its glyph colour.
|
|
45
|
+
*
|
|
14
46
|
* @example
|
|
15
47
|
* <!-- The strip hides itself while nothing is attached. Pair it with the picker, and
|
|
16
48
|
* only if your loop actually reads the files from the send event. -->
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aparte-composer-attachments.d.ts","sourceRoot":"","sources":["../../../src/components/composer/aparte-composer-attachments.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"aparte-composer-attachments.d.ts","sourceRoot":"","sources":["../../../src/components/composer/aparte-composer-attachments.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,qBAAa,yBAA0B,SAAQ,WAAW;IACtD,OAAO,CAAC,aAAa,CAAsB;IAC3C,+EAA+E;IAC/E,OAAO,CAAC,WAAW,CAAgB;IAEnC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,cAAc;IAYtB,kEAAkE;IAClE,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,OAAO;IA0Df,0EAA0E;IAC1E,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,OAAO;CAGlB"}
|
|
@@ -1,10 +1,33 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Cancel/stop streaming button primitive for <aparte-composer>.
|
|
3
3
|
*
|
|
4
|
+
* Most composers should not use this element. `<aparte-composer-send>` already becomes
|
|
5
|
+
* the stop button while a reply streams, so adding this one gives you a second, equally
|
|
6
|
+
* working way to stop; reach for it only when you want stop to live somewhere the send
|
|
7
|
+
* button is not.
|
|
8
|
+
*
|
|
9
|
+
* It renders hidden, and only the root reveals it — the `root.streaming` check on connect,
|
|
10
|
+
* then each `streaming-change` — so it needs an `<aparte-composer>` ancestor to be
|
|
11
|
+
* reachable at all: standalone, nothing flips `hidden` and the click has no `cancel()` to
|
|
12
|
+
* call. A locale or icon-set change is re-read in place rather than re-rendered, for the
|
|
13
|
+
* same reason: a rebuild renders it hidden again, making the stop button vanish mid-turn.
|
|
14
|
+
*
|
|
15
|
+
* It owns its subtree — the button is generated on connect and children placed inside
|
|
16
|
+
* are replaced, so there is nothing to project. The host element is `display: contents`
|
|
17
|
+
* and adds no box of its own; the row you put it in provides the layout, and the CSS
|
|
18
|
+
* variables below style the inner button, which is deliberately a quiet action button
|
|
19
|
+
* rather than a filled one.
|
|
20
|
+
*
|
|
4
21
|
* @element aparte-composer-cancel
|
|
5
|
-
* Must be a descendant of <aparte-composer>.
|
|
6
22
|
*
|
|
7
|
-
*
|
|
23
|
+
* @cssprop [--aparte-composer-control-size=44px] - Width/height of the button inside the
|
|
24
|
+
* `.aparte-composer-row` layout helper, shared with the composer's other
|
|
25
|
+
* controls so the row stays aligned.
|
|
26
|
+
* @cssprop [--aparte-radius-action-btn=4px] - Corner radius of the button.
|
|
27
|
+
* @cssprop --aparte-neutral - Icon colour at rest (the button's background is
|
|
28
|
+
* transparent).
|
|
29
|
+
* @cssprop --aparte-text - Icon colour on hover.
|
|
30
|
+
* @cssprop --aparte-surface-2 - Button background on hover.
|
|
8
31
|
*
|
|
9
32
|
* @example
|
|
10
33
|
* <!-- Only needed when you want a SEPARATE stop button: <aparte-composer-send> already
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aparte-composer-cancel.d.ts","sourceRoot":"","sources":["../../../src/components/composer/aparte-composer-cancel.ts"],"names":[],"mappings":"AAKA
|
|
1
|
+
{"version":3,"file":"aparte-composer-cancel.d.ts","sourceRoot":"","sources":["../../../src/components/composer/aparte-composer-cancel.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBAAa,oBAAqB,SAAQ,WAAW;IACjD,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,aAAa,CAAsB;IAG3C,OAAO,CAAC,QAAQ,CAAgC;IAEhD,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,OAAO;IAiBf,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,YAAY;IAKpB;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;CAGvB"}
|