@sybilion/uilib 1.0.20

package/src/components/ui/Chat/ChatChrome/ChatChrome.styl

@@ -0,0 +1,125 @@
+@import 'lib/theme.styl'
+
+.panelRoot
+  position relative
+  display flex
+  flex-direction column
+  height 100%
+  min-height 0
+  overflow hidden
+
+  &.variant-sidebar
+    .footer
+      backdrop-filter blur(30px)
+      background-color var(--background-alpha-800)
+      box-shadow 0 0 20px 16px var(--background)
+      border-top 1px solid var(--border)
+
+  &.variant-default
+    .footer
+      --chat-chrome-footer-variant default
+
+.chatResizeHandle
+  position: absolute;
+  // top 0 !important
+  top -200px
+  // height 100% !important
+  height calc(100vh + 200px)
+  left 0
+  right auto
+  // z-index 1000
+  z-index 30
+
+  width 5px
+  border-radius 2.5px
+  user-select none
+  touch-action none
+  transition opacity 150ms ease-out
+  background-color var(--page-color)
+  opacity 0
+
+  &::before
+    left 0
+    right auto
+
+.panelHeader
+  position absolute
+  width 100%
+  z-index 100
+
+  flex-shrink 0
+  display flex
+  align-items center
+  justify-content flex-end
+  padding var(--p-2) var(--p-3)
+
+
+.panelClose
+  flex-shrink 0
+
+.content
+  flex 1
+  min-height 0
+  display flex
+  flex-direction column
+  position relative
+
+.scrollWrapper
+  position relative
+  flex 1
+  min-height 0
+
+.scroll
+  z-index 3
+  align-items flex-end
+  position absolute
+  height 100%
+  width 100%
+  max-height 100%
+  max-width 100%
+  padding-bottom var(--p-2)
+
+.scrollbar
+  right 0px !important
+
+.scrollInner
+  padding-top var(--p-10)
+  // padding-bottom 320px // goes under prompt
+
+  &::after
+    content ''
+    display block
+    height 170px
+
+
+// ---------------
+
+.footer
+  z-index 50
+  display flex
+  flex-direction column
+
+  position absolute
+  bottom 0
+  width 100%;
+
+
+.loader
+  // z-index 1
+  // position absolute
+  // top -150px
+  margin var(--p-2) var(--p-6) var(--p-10)
+  color var(--muted-foreground)
+
+.branchRow
+  display flex
+  flex-wrap wrap
+  gap 8px
+  width 100%
+  margin-top var(--p-6)
+  padding 0 var(--p-6)
+
+.branchBtnWrap
+  display inline-flex
+  vertical-align middle
+

package/src/components/ui/Chat/ChatChrome/ChatChrome.styl.d.ts

@@ -0,0 +1,21 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'branchBtnWrap': string;
+  'branchRow': string;
+  'chatResizeHandle': string;
+  'content': string;
+  'footer': string;
+  'loader': string;
+  'panelClose': string;
+  'panelHeader': string;
+  'panelRoot': string;
+  'scroll': string;
+  'scrollInner': string;
+  'scrollWrapper': string;
+  'scrollbar': string;
+  'variant-default': string;
+  'variant-sidebar': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Chat/ChatChrome/ChatChrome.tsx

@@ -0,0 +1,188 @@
+import cn from 'classnames';
+
+import {
+  displayLabelForBranchKeyFromMessages,
+  humanizeBranchKey,
+} from '#uilib/components/ui/Chat/ChatMessage/presetScript';
+import { TextShimmer } from '#uilib/components/ui/TextShimmer';
+import { Scroll } from '@homecode/ui';
+import { ChartLineIcon, PaperPlaneRightIcon, X } from '@phosphor-icons/react';
+
+import { Button } from '../../Button';
+import { PanelResizeHandle } from '../../Sidebar/Sidebar';
+import SidebarStem from '../../Sidebar/Sidebar.styl';
+import { Chat } from '../Chat';
+import S from './ChatChrome.styl';
+import type { ChatChromeProps } from './ChatChrome.types';
+
+export function ChatChrome({
+  showResizeHandle,
+  resizeHandle,
+  onClose,
+  isEmpty,
+  renderPresets,
+  messages,
+  onQuickReply,
+  suppressedQuickReplyKeys,
+  isLoading,
+  scriptContinueLabel,
+  onScriptContinue,
+  renderMessageChart,
+  showBranchActionsRow,
+  showSyntheticBranchButtons,
+  unusedBranchKeys,
+  isScriptComplete,
+  onGenerateDashboard,
+  generatingDashboard,
+  onGenerateDashboardClick,
+  showInlinePresets,
+  isLastMessageFromUser,
+  scrollRef,
+  effectiveScopeId,
+  onPromptSubmit,
+  onChatDeleted,
+  promptPrefill,
+  variant = 'sidebar',
+  footerClassName,
+  emptyState,
+}: ChatChromeProps) {
+  return (
+    <div className={cn(S.panelRoot, S[`variant-${variant}`])}>
+      {showResizeHandle && resizeHandle ? (
+        <PanelResizeHandle
+          edge="leading"
+          isActive={resizeHandle.isActive}
+          startWidthPx={resizeHandle.startWidthPx}
+          getShellWidth={resizeHandle.getShellWidth}
+          onDragWidth={resizeHandle.onDragWidth}
+          onDragComplete={resizeHandle.onDragComplete}
+          className={cn(SidebarStem.sidebarResizeHandle, S.chatResizeHandle)}
+        />
+      ) : null}
+      <div className={S.panelHeader}>
+        {onClose ? (
+          <Button
+            type="button"
+            variant="ghost"
+            icon
+            className={S.panelClose}
+            aria-label="Close chat"
+            onClick={onClose}
+          >
+            <X className="size-4" />
+          </Button>
+        ) : null}
+      </div>
+      <div className={S.content}>
+        <Chat isEmpty={isEmpty}>
+          {isEmpty ? (
+            <>
+              <Chat.EmptyState {...emptyState} />
+              {renderPresets('fixed')}
+            </>
+          ) : (
+            <div className={S.scrollWrapper}>
+              <Scroll
+                y
+                yScrollbarClassName={S.scrollbar}
+                className={S.scroll}
+                innerClassName={S.scrollInner}
+                offset={{ y: { before: 56, after: 180 } }}
+                fadeSize="m"
+                autoHide
+                ref={scrollRef}
+              >
+                {messages.map((msg, index, arr) => {
+                  const isLast = index === arr.length - 1;
+                  return (
+                    <Chat.Message
+                      key={msg.id}
+                      role={msg.role}
+                      text={msg.text}
+                      onQuickReply={onQuickReply}
+                      suppressedQuickReplyKeys={suppressedQuickReplyKeys}
+                      quickReplyDisabled={isLoading}
+                      isLastMessage={isLast}
+                      scriptContinue={
+                        isLast && scriptContinueLabel
+                          ? { label: scriptContinueLabel }
+                          : undefined
+                      }
+                      onScriptContinue={
+                        isLast && scriptContinueLabel
+                          ? onScriptContinue
+                          : undefined
+                      }
+                      renderMessageChart={renderMessageChart}
+                    />
+                  );
+                })}
+
+                {showBranchActionsRow && (
+                  <div className={S.branchRow}>
+                    {showSyntheticBranchButtons
+                      ? unusedBranchKeys.map(key => {
+                          const label =
+                            displayLabelForBranchKeyFromMessages(
+                              key,
+                              messages,
+                            ) ?? humanizeBranchKey(key);
+                          return (
+                            <span key={key} className={S.branchBtnWrap}>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                disabled={isLoading}
+                                onClick={() => onQuickReply(key, label)}
+                              >
+                                <PaperPlaneRightIcon />
+                                {label}
+                              </Button>
+                            </span>
+                          );
+                        })
+                      : null}
+
+                    {isScriptComplete &&
+                    onGenerateDashboard &&
+                    !generatingDashboard ? (
+                      <Button
+                        type="button"
+                        variant="default"
+                        size="lg"
+                        disabled={isLoading}
+                        onClick={onGenerateDashboardClick}
+                      >
+                        <ChartLineIcon />
+                        Generate Dashboard
+                      </Button>
+                    ) : null}
+                  </div>
+                )}
+
+                {showInlinePresets && renderPresets('inline')}
+
+                {isLoading && isLastMessageFromUser && (
+                  <TextShimmer duration={1} spread={5} className={S.loader}>
+                    Thinking...
+                  </TextShimmer>
+                )}
+              </Scroll>
+            </div>
+          )}
+
+          <div className={cn(S.footer, footerClassName)}>
+            <Chat.Prompt
+              id={effectiveScopeId}
+              onSubmit={onPromptSubmit}
+              disabled={isLoading}
+              onChatDeleted={onChatDeleted}
+              prefillMessage={promptPrefill ?? undefined}
+            />
+          </div>
+        </Chat>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/Chat/ChatChrome/ChatChrome.types.ts

@@ -0,0 +1,50 @@
+import type { RefObject } from 'react';
+
+import type { Message } from '#uilib/components/ui/Chat/Chat.types';
+import type { ChatEmptyStateProps } from '#uilib/components/ui/Chat/ChatEmptyState/ChatEmptyState.types';
+import type { ChatPresetsLayout } from '#uilib/components/ui/Chat/ChatPresets';
+import type { ScrollRef } from '@homecode/ui';
+
+export type ChatChromeResizeHandleConfig = {
+  isActive: boolean;
+  startWidthPx: number;
+  getShellWidth: () => number;
+  onDragWidth: (rawPx: number) => void;
+  onDragComplete: (finalRawPx: number) => void;
+};
+
+export interface ChatChromeProps {
+  showResizeHandle: boolean;
+  resizeHandle: ChatChromeResizeHandleConfig | undefined;
+  onClose: (() => void) | undefined;
+  isEmpty: boolean;
+  renderPresets: (layout: ChatPresetsLayout) => React.ReactNode;
+  /** Message list for the scroll area; use `[]` when empty. */
+  messages: Message[];
+  onQuickReply: (branchKey: string, displayLabel: string) => void;
+  suppressedQuickReplyKeys: ReadonlySet<string>;
+  isLoading: boolean;
+  scriptContinueLabel: string | undefined;
+  onScriptContinue: (() => void) | undefined;
+  renderMessageChart?: () => React.ReactNode;
+  showBranchActionsRow: boolean;
+  showSyntheticBranchButtons: boolean;
+  unusedBranchKeys: string[];
+  isScriptComplete: boolean;
+  onGenerateDashboard:
+    | ((transcript: string) => void | Promise<void>)
+    | undefined;
+  generatingDashboard: boolean;
+  onGenerateDashboardClick: () => void;
+  showInlinePresets: boolean;
+  isLastMessageFromUser: boolean;
+  scrollRef: RefObject<ScrollRef | null>;
+  effectiveScopeId: string;
+  onPromptSubmit: (message: string) => void | Promise<void>;
+  onChatDeleted: (sessionId: string) => void;
+  /** `?prompt=` deep link text for one-shot composer pre-fill. */
+  promptPrefill?: string | null;
+  variant?: 'default' | 'sidebar';
+  footerClassName?: string;
+  emptyState?: ChatEmptyStateProps;
+}

package/src/components/ui/Chat/ChatChrome/index.ts

@@ -0,0 +1,5 @@
+export { ChatChrome } from './ChatChrome';
+export type {
+  ChatChromeProps,
+  ChatChromeResizeHandleConfig,
+} from './ChatChrome.types';

package/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.styl

@@ -0,0 +1,20 @@
+.root
+  display flex
+  flex-direction column
+  align-items center
+  justify-content center
+  gap var(--p-2)
+
+  // height 450px
+  flex 1
+  padding var(--p-6)
+
+  text-align center
+  text-size var(--text-sm)
+  color var(--text-secondary)
+
+.icon
+  width 26px
+  height 26px
+  margin-bottom var(--p-4)
+  background url('./sparkles.svg') no-repeat center center;

package/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.styl.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'icon': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.tsx

@@ -0,0 +1,16 @@
+import S from './ChatEmptyState.styl';
+import type { ChatEmptyStateProps } from './ChatEmptyState.types';
+
+export function ChatEmptyState({
+  icon,
+  title,
+  description,
+}: ChatEmptyStateProps) {
+  return (
+    <div className={S.root}>
+      {icon && <div className={S.icon}>{icon}</div>}
+      {title && <h2>{title}</h2>}
+      {description && <p>{description}</p>}
+    </div>
+  );
+}

package/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.types.ts

@@ -0,0 +1,5 @@
+export interface ChatEmptyStateProps {
+  icon?: React.ReactNode;
+  title?: string;
+  description?: string;
+}

package/src/components/ui/Chat/ChatEmptyState/sparkles.svg

@@ -0,0 +1,22 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7493 18.8701L9.66504 22.665L8.58078 18.8701C8.01128 16.8768 6.4532 15.3188 4.45996 14.7493L0.665039 13.665L4.45996 12.5807C6.45321 12.0112 8.01128 10.4532 8.58078 8.45991L9.66504 4.66499L10.7493 8.45991C11.3188 10.4532 12.8769 12.0112 14.8701 12.5807L18.665 13.665L14.8701 14.7493C12.8769 15.3188 11.3188 16.8768 10.7493 18.8701Z" stroke="url(#paint0_linear_1097_5839)" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.0102 9.28438L21.665 10.665L21.3199 9.28438C20.9168 7.67209 19.6579 6.41322 18.0457 6.01015L16.665 5.66499L18.0457 5.31984C19.6579 4.91677 20.9168 3.65789 21.3199 2.04561L21.665 0.664993L22.0102 2.04561C22.4133 3.65789 23.6721 4.91677 25.2844 5.31984L26.665 5.66499L25.2844 6.01015C23.6721 6.41322 22.4133 7.67209 22.0102 9.28438Z" stroke="url(#paint1_linear_1097_5839)" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.1907 25.088L19.665 26.665L19.1394 25.088C18.8408 24.1922 18.1378 23.4893 17.242 23.1907L15.665 22.665L17.242 22.1393C18.1378 21.8407 18.8408 21.1378 19.1394 20.242L19.665 18.665L20.1907 20.242C20.4893 21.1378 21.1922 21.8407 22.0881 22.1393L23.665 22.665L22.0881 23.1907C21.1922 23.4893 20.4893 24.1922 20.1907 25.088Z" stroke="url(#paint2_linear_1097_5839)" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1097_5839" x1="0.665039" y1="13.665" x2="26.665" y2="13.665" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19BFE9"/>
+<stop offset="0.673077" stop-color="#C670E8"/>
+<stop offset="1" stop-color="#DA62AB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1097_5839" x1="0.665039" y1="13.665" x2="26.665" y2="13.665" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19BFE9"/>
+<stop offset="0.673077" stop-color="#C670E8"/>
+<stop offset="1" stop-color="#DA62AB"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1097_5839" x1="0.665039" y1="13.665" x2="26.665" y2="13.665" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19BFE9"/>
+<stop offset="0.673077" stop-color="#C670E8"/>
+<stop offset="1" stop-color="#DA62AB"/>
+</linearGradient>
+</defs>
+</svg>