@inglorious/ui 9.4.0 → 9.6.0

package/types/data-display/chat.d.ts

@@ -0,0 +1,73 @@
+import type { Api, TemplateResult } from "@inglorious/web"
+
+/** One message of a chat: its text, or an entity that renders it. */
+export interface ChatMessage {
+  id: string
+  role: "user" | "assistant"
+  /** What the message says, as text. */
+  content?: string
+  /** The id of an entity to render as the message, such as a generated answer. */
+  entity?: string
+  [key: string]: unknown
+}
+
+/** What a chat keeps and shows. */
+export interface ChatProps {
+  id?: string
+  type?: string
+  messages?: ChatMessage[]
+  /** What the user is typing. */
+  draft?: string
+  /** A reply is on its way: the chat shows it, and does not send meanwhile. */
+  isBusy?: boolean
+  /** Why the last reply failed. */
+  error?: string | null
+  /** Messages to start with, offered while the chat is empty. */
+  suggestions?: string[]
+  /** Names the chat for assistive tech. Defaults to "Chat". */
+  label?: string
+  /** The message box's placeholder and name. Defaults to "Message". */
+  placeholder?: string
+  /** Defaults to "Send". */
+  sendLabel?: string
+  /** Who the user's messages are by, for assistive tech. Defaults to "You". */
+  userLabel?: string
+  /** Who replies. Defaults to "Assistant". */
+  assistantLabel?: string
+  onDraftChange?: (draft: string) => void
+  /** Sends `text`, such as a suggestion picked, or else the draft. */
+  onSend?: (text?: string) => void
+  /** Draws a message's `entity`. */
+  renderEntity?: (entityId: string) => unknown
+  [key: string]: unknown
+}
+
+/** A chat entity: its props, and a count that keeps message ids unique. */
+export interface ChatEntity extends ChatProps {
+  id?: string
+  type: string
+  messages: ChatMessage[]
+  messageCount?: number
+}
+
+export type ChatType = {
+  create(entity: ChatEntity): void
+  draftChange(entity: ChatEntity, draft: string): void
+  /** Adds the user's message, `text` or the draft; apps answer by handling it too. */
+  messageSend(entity: ChatEntity, text?: string): void
+  /** Adds a message, the assistant's by default. */
+  messageAdd(entity: ChatEntity, message: Partial<ChatMessage>): void
+  replyStart(entity: ChatEntity): void
+  replyEnd(entity: ChatEntity): void
+  replyFail(entity: ChatEntity, error: string): void
+  messagesClear(entity: ChatEntity): void
+  render(entity: ChatEntity, api: Api): TemplateResult
+  renderChat(props: ChatProps): TemplateResult
+  renderMessage(props: ChatProps, message: ChatMessage): TemplateResult
+  renderContent(props: ChatProps, message: ChatMessage): unknown
+  renderTyping(props: ChatProps): TemplateResult
+  renderSuggestions(props: ChatProps): TemplateResult
+  renderComposer(props: ChatProps): TemplateResult
+}
+
+export declare const Chat: ChatType

package/types/index.d.ts

@@ -16,6 +16,7 @@ export { Avatar } from "./data-display/avatar"
 export { Badge } from "./data-display/badge"
 export { BeforeAfter } from "./data-display/before-after"
 export { Carousel } from "./data-display/carousel"
+export { Chat } from "./data-display/chat"
 export { Chip } from "./data-display/chip"
 export { DataGrid } from "./data-display/data-grid"
 export { Divider } from "./data-display/divider"

package/src/styles/themes/material.css

@@ -1,170 +0,0 @@
-.iw-theme-material {
-  /* The theme on the page itself: the element with the theme class, usually
-     <body>, takes its background, text color and font. */
-  background-color: var(--iw-color-bg);
-  color: var(--iw-color-text);
-  font-family: var(--iw-font-family-sans);
-
-  /* ========================================
-     MATERIAL THEME - Material Design Inspired
-     ======================================== */
-
-  /* Semantic Colors */
-  --iw-color-bg: var(--iw-color-gray-50);
-  --iw-color-bg-secondary: var(--iw-color-white);
-  --iw-color-bg-tertiary: var(--iw-color-gray-100);
-  --iw-color-surface: var(--iw-color-white);
-  --iw-color-surface-hover: var(--iw-color-gray-50);
-  --iw-color-surface-active: var(--iw-color-gray-100);
-
-  --iw-color-text: var(--iw-color-gray-900);
-  --iw-color-text-secondary: var(--iw-color-gray-700);
-  --iw-color-text-muted: var(--iw-color-gray-500);
-
-  --iw-color-border: var(--iw-color-gray-300);
-  --iw-color-border-focus: #1a73e8;
-
-  --iw-color-primary: #1a73e8;
-  --iw-color-primary-hover: #1557b0;
-  --iw-color-primary-active: #0d47a1;
-  --iw-color-primary-text: var(--iw-color-white);
-
-  --iw-color-accent: #e91e63;
-  --iw-color-accent-hover: #c2185b;
-  --iw-color-accent-active: #ad1457;
-
-  /* Buttons and tabs carry their labels as Material UI does */
-  --iw-label-text-transform: uppercase;
-  --iw-label-letter-spacing: 0.02857em;
-  --iw-label-font-weight: var(--iw-font-weight-medium);
-
-  /* ========================================
-     COMPONENT TOKENS
-     ======================================== */
-
-  /* Button */
-  --iw-button-bg: var(--iw-color-primary);
-  --iw-button-bg-hover: var(--iw-color-primary-hover);
-  --iw-button-bg-active: var(--iw-color-primary-active);
-  --iw-button-text: var(--iw-color-primary-text);
-  --iw-button-border: var(--iw-color-primary);
-  --iw-button-radius: var(--iw-radius-full);
-  --iw-button-shadow:
-    0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
-  --iw-button-shadow-hover:
-    0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
-  --iw-button-shadow-active: 0 1px 3px rgba(60, 64, 67, 0.4);
-
-  /* A button's default color is primary, as in Material UI */
-  --iw-button-default-color: var(--iw-color-primary);
-  --iw-button-default-bg: var(--iw-color-primary);
-  --iw-button-default-bg-hover: var(--iw-color-primary-hover);
-  --iw-button-default-bg-active: var(--iw-color-primary-active);
-  --iw-button-default-border: var(--iw-color-primary);
-  --iw-button-default-text: var(--iw-color-primary-text);
-
-  --iw-button-outline-bg: transparent;
-  --iw-button-outline-bg-hover: rgba(26, 115, 232, 0.08);
-  --iw-button-outline-text: var(--iw-color-primary);
-  --iw-button-outline-text-hover: var(--iw-color-primary);
-  --iw-button-outline-border: transparent;
-
-  --iw-button-ghost-bg: transparent;
-  --iw-button-ghost-bg-hover: rgba(0, 0, 0, 0.04);
-  --iw-button-ghost-text: var(--iw-color-primary);
-  --iw-button-ghost-border: transparent;
-
-  /* Input */
-  --iw-input-bg: var(--iw-color-bg-secondary);
-  --iw-input-bg-hover: var(--iw-color-bg-secondary);
-  --iw-input-bg-focus: var(--iw-color-bg-secondary);
-  --iw-input-text: var(--iw-color-text);
-  --iw-input-text-placeholder: var(--iw-color-text-muted);
-  --iw-input-border: var(--iw-color-border);
-  --iw-input-border-hover: var(--iw-color-border);
-  --iw-input-border-focus: var(--iw-color-primary);
-  --iw-input-radius: var(--iw-radius-xs);
-  --iw-input-shadow-focus: none;
-
-  /* App bar */
-  --iw-app-bar-bg: var(--iw-color-surface);
-
-  /* Drawer */
-  --iw-drawer-bg: var(--iw-color-surface);
-
-  /* Card */
-  --iw-card-bg: var(--iw-color-surface);
-  --iw-card-border: transparent;
-  --iw-card-radius: var(--iw-radius-lg);
-  --iw-card-shadow:
-    0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
-  --iw-card-shadow-hover:
-    0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
-
-  /* Badge */
-  --iw-badge-radius: var(--iw-radius-sm);
-
-  /* Chip: a tint of the text, as cards and tables share the white background */
-  --iw-chip-bg: color-mix(in srgb, var(--iw-color-text) 8%, transparent);
-
-  /* List */
-  --iw-list-item: transparent;
-  --iw-list-item-selected: color-mix(
-    in srgb,
-    var(--iw-color-primary) 8%,
-    transparent
-  );
-
-  /* Alert */
-  --iw-alert-radius: var(--iw-radius-md);
-  --iw-alert-shadow: none;
-  color-scheme: light;
-}
-
-/* Dark variant */
-.iw-theme-material.iw-theme-dark {
-  color-scheme: dark;
-
-  --iw-color-bg: #121212;
-  --iw-color-bg-secondary: #1e1e1e;
-  --iw-color-bg-tertiary: #2d2d2d;
-  --iw-color-surface: #1e1e1e;
-  --iw-color-surface-hover: #2d2d2d;
-  --iw-color-surface-active: #3d3d3d;
-  --iw-color-text: var(--iw-color-gray-100);
-  --iw-color-text-secondary: var(--iw-color-gray-300);
-  --iw-color-text-muted: var(--iw-color-gray-400);
-  --iw-color-border: var(--iw-color-gray-700);
-
-  --iw-color-primary: #8ab4f8;
-  --iw-color-primary-hover: #aecbfa;
-  --iw-color-primary-active: #669df6;
-  --iw-color-primary-text: var(--iw-color-black);
-
-  --iw-color-border-focus: #8ab4f8;
-
-  --iw-input-bg: var(--iw-color-bg-secondary);
-  --iw-input-bg-hover: var(--iw-color-bg-secondary);
-  --iw-input-bg-focus: var(--iw-color-bg-secondary);
-  --iw-input-border: var(--iw-color-gray-600);
-  --iw-input-border-hover: var(--iw-color-gray-500);
-  --iw-input-border-focus: var(--iw-color-primary);
-
-  --iw-button-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
-  --iw-button-shadow-hover:
-    0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
-
-  --iw-card-shadow:
-    0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
-
-  --iw-chip-bg: color-mix(in srgb, var(--iw-color-text) 16%, transparent);
-
-  --iw-list-item: transparent;
-  --iw-list-item-active: #2d2d2d;
-  --iw-list-item-selected: color-mix(
-    in srgb,
-    var(--iw-color-primary) 12%,
-    transparent
-  );
-}