@wpic/ui 0.9.24 → 0.9.26

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.9.26
+
+- Keep the chat scroll viewport above the composer so its scrollbar and last message stay visible.
+- Give docked chat a single rounded application surface with a subtle border and configurable dockedInset (8px by default).
+- Open chat history on the robot click, including from the minimized launcher.
+
+## 0.9.25
+
+- Add WChatComposer and WChatEditor with the Perform glass design and generic host events.
+- Add optional attachment visibility to WChatPanel and WChatComposer, and history visibility to WChatComposer.
+
 ## 0.9.24
 
 - Add accessible mobile bottom sheets with nested overlays, focus restoration and keyboard viewport support.

package/COMPONENTS.md

@@ -833,3 +833,55 @@ Below 768px, `WSelect` and `WDateRangePicker` use bottom sheets. Their new `clos
  and `closeLabel`. `WSlidePanel` uses a bottom sheet on mobile by default; set
  `mobileBottom=false` to retain its side presentation. Header/footer slots are preserved.
  Mobile controls and table pagination have larger touch targets; pagination wraps locally.
+
+
+## WChatEditor and WChatComposer
+
+`WChatEditor` is a plain-text chat editor backed by Tiptap. It accepts `v-model`,
+`placeholder`, `disabled`, `minLines` and `maxLines`; emits `submit` on Enter
+(Shift+Enter adds a line, IME confirmation does not submit); exposes `focus()`.
+Placeholder changes preserve the draft. Model values are treated as text, not HTML.
+
+`WChatComposer` provides the Perform glass launcher design, expanded input,
+attachments and conversation/project history. It has no application store, API,
+i18n plugin or localStorage dependency.
+
+```vue
+<WChatComposer
+  ref="composer"
+  v-model:minimized="minimized"
+  placeholder="Ask the analyst"
+  :disabled="sending"
+  :sessions="sessions"
+  :projects="projects"
+  :attachments="attachments"
+  :history-loading="historyLoading"
+  locale="en"
+  @submit="send"
+  @request-history="loadHistory"
+  @select-session="selectSession"
+  @files-selected="uploadFiles"
+  @remove-attachment="removeAttachment"
+/>
+```
+
+- The host supplies `WChatAttachment[]`, `WChatProject[]` and
+  `WChatComposerSession[]` (extends `WChatSession` with optional `badge` and
+  `highlighted`). Use `subtitle` for domain context such as a client or date range.
+- The host owns uploads, history loading, selection, persistence and LLM calls.
+  `request-history` fires whenever history opens; deduplicate loading in the host.
+- Translate the label props: `conversationsLabel`, `removeAttachmentLabel`,
+  `minimizeLabel`, `sendLabel`, `attachFilesLabel`, `loadingLabel`,
+  `noConversationsLabel`, `projectsLabel`, `generalConversationLabel`.
+- `accept` configures file selection; loading attachments prevent submission.
+- `openWithPrompt(text)` expands and focuses the input with a draft.
+- Set `--wpic-chat-composer-left` and `--wpic-chat-composer-bottom` to integrate
+  with application navigation. Defaults preserve mobile/desktop floating placement.
+- Use `WChatEditor` in the `WChatPanel` composer slot for the same input in the panel.
+- Import `@wpic/ui/style.css`; no host Tailwind scan is required.
+
+`showAttachments` defaults to true on both chat components. `showHistory` defaults to true on WChatComposer. Disable these for a text-only chat without saved sessions.
+
+### Chat panel layout (0.9.26)
+
+`WChatPanel` keeps its composer in normal flex layout, outside the message scroll viewport. Remove any application CSS that adds a footer mask or extra footer-height padding to `.wpic-chat-panel__messages`. `dockedInset` sets the outer gap of the docked card (default 8px); the card uses the WPIC surface/border tokens, 12px corners and no outer gutter.

package/dist/components/WChatComposer.vue.d.ts

@@ -0,0 +1,64 @@
+import { WChatAttachment, WChatProject, WChatSession } from './WChatPanel.vue';
+export interface WChatComposerSession extends WChatSession {
+    badge?: string;
+    highlighted?: boolean;
+}
+type __VLS_Props = {
+    placeholder: string;
+    disabled?: boolean;
+    showAttachments?: boolean;
+    showHistory?: boolean;
+    attachments?: WChatAttachment[];
+    projects?: WChatProject[];
+    sessions?: WChatComposerSession[];
+    historyLoading?: boolean;
+    locale?: string;
+    minimized?: boolean;
+    accept?: string;
+    conversationsLabel?: string;
+    removeAttachmentLabel?: string;
+    minimizeLabel?: string;
+    sendLabel?: string;
+    attachFilesLabel?: string;
+    loadingLabel?: string;
+    noConversationsLabel?: string;
+    projectsLabel?: string;
+    generalConversationLabel?: string;
+};
+declare function openWithPrompt(prompt: string): Promise<void>;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    openWithPrompt: typeof openWithPrompt;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    submit: (value: string) => any;
+    "select-session": (sessionId: string) => any;
+    "files-selected": (files: File[]) => any;
+    "remove-attachment": (attachment: WChatAttachment) => any;
+    "request-history": () => any;
+    "update:minimized": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((value: string) => any) | undefined;
+    "onSelect-session"?: ((sessionId: string) => any) | undefined;
+    "onFiles-selected"?: ((files: File[]) => any) | undefined;
+    "onRemove-attachment"?: ((attachment: WChatAttachment) => any) | undefined;
+    "onRequest-history"?: (() => any) | undefined;
+    "onUpdate:minimized"?: ((value: boolean) => any) | undefined;
+}>, {
+    projects: WChatProject[];
+    sessions: WChatComposerSession[];
+    noConversationsLabel: string;
+    projectsLabel: string;
+    conversationsLabel: string;
+    sendLabel: string;
+    attachFilesLabel: string;
+    removeAttachmentLabel: string;
+    showAttachments: boolean;
+    attachments: WChatAttachment[];
+    accept: string;
+    locale: string;
+    showHistory: boolean;
+    minimized: boolean;
+    minimizeLabel: string;
+    loadingLabel: string;
+    generalConversationLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/WChatEditor.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    modelValue: string;
+    placeholder: string;
+    disabled?: boolean;
+    minLines?: number;
+    maxLines?: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    focus: () => boolean | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    submit: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/WChatPanel.vue.d.ts

@@ -116,6 +116,7 @@ type __VLS_Props = {
     closeLabel?: string;
     helpfulLabel?: string;
     notHelpfulLabel?: string;
+    showAttachments?: boolean;
     attachments?: WChatAttachment[];
     accept?: string;
     customAttachmentPicker?: boolean;
@@ -125,6 +126,8 @@ type __VLS_Props = {
     loading?: boolean;
     cancellable?: boolean;
     docked?: boolean;
+    /** Space around the docked panel, matching inset application layouts. */
+    dockedInset?: number;
     maximized?: boolean;
     maximizedMargin?: number;
     width?: number;
@@ -257,6 +260,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     undockLabel: string;
     helpfulLabel: string;
     notHelpfulLabel: string;
+    showAttachments: boolean;
     attachments: WChatAttachment[];
     accept: string;
     customAttachmentPicker: boolean;
@@ -265,6 +269,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     hideClear: boolean;
     cancellable: boolean;
     docked: boolean;
+    dockedInset: number;
     maximized: boolean;
     maximizedMargin: number;
     topOffset: number;

package/dist/index.d.ts

@@ -89,3 +89,6 @@ export type { WThemeMode, WThemeColors, WThemeOverrides } from './theme';
 export { default as WTrendBadge } from './components/WTrendBadge.vue';
 export { default as WEditableText } from './components/WEditableText.vue';
 export { default as WBottomSheet } from './components/WBottomSheet.vue';
+export { default as WChatEditor } from './components/WChatEditor.vue';
+export { default as WChatComposer } from './components/WChatComposer.vue';
+export type { WChatComposerSession } from './components/WChatComposer.vue';