@sybilion/uilib 1.3.44 → 1.3.47

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.tsx

@@ -103,8 +103,15 @@ export function ChartAreaInteractive({
     const raw = selectedAnalysisId ?? selectedForecast?.id ?? null;
     const anchorId =
       raw == null ? null : typeof raw === 'number' ? raw : Number(raw);
+    const anchorForecastLoaded =
+      anchorId != null &&
+      Number.isFinite(anchorId) &&
+      chartData.some(row => {
+        const value = row[`forecast_${anchorId}`];
+        return typeof value === 'number' && Number.isFinite(value);
+      });
     const opts =
-      anchorId != null && Number.isFinite(anchorId)
+      anchorId != null && Number.isFinite(anchorId) && anchorForecastLoaded
         ? { endDateAnchorAnalysisId: anchorId }
         : undefined;
     return filterDataForTimeRange(chartData, timeRange, opts);

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

@@ -98,7 +98,7 @@ export interface ChatPromptProps {
   onAttachmentFiles?: (files: File[]) => void;
   /** Slash menu (`/`); omit or pass empty to disable Mention trigger (no default items). */
   slashCommandItems?: SlashCommandItem[];
-  /** Custom slash pick handler; return true to skip default mention insert. */
+  /** Custom slash pick handler; return true to skip default mention insert and insert via composer API. */
   onSlashItemCommand?: SlashOnItemCommand;
 }
 

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

@@ -69,6 +69,31 @@ INPUT_MAX_HEIGHT = 200px
     height 0
     pointer-events none
 
+  & :global(.ProseMirror .slash-mention)
+    display inline-flex
+    align-items center
+    padding 0 var(--p-1)
+    border-radius var(--radius-sm)
+    background var(--muted)
+    font-size 0.875em
+    line-height 1.4
+    white-space nowrap
+    user-select none
+    vertical-align baseline
+
+  & :global(.ProseMirror .chat-prompt-command-chip)
+    display inline-flex
+    align-items center
+    padding 0 var(--p-1)
+    border-radius var(--radius-sm)
+    background var(--muted)
+    color var(--foreground)
+    font-size 0.875em
+    line-height 1.4
+    white-space nowrap
+    user-select none
+    vertical-align baseline
+
 .submitColumn
   display flex
   flex-direction column

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

@@ -1,85 +1,108 @@
 import cn from 'classnames';
-import { FormEvent, useCallback, useRef } from 'react';
+import {
+  FormEvent,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 
 import type { ChatPromptProps } from '../Chat.types';
 import S from './ChatPrompt.styl';
 import { ChatPromptAttachments } from './ChatPromptAttachments';
-import { ChatPromptComposer } from './ChatPromptComposer';
+import {
+  ChatPromptComposer,
+  type ChatPromptComposerHandle,
+} from './ChatPromptComposer';
+import { createChatPromptComposerHandle } from './chatPromptComposerInsert';
 import { useChatPromptEditor } from './useChatPromptEditor';
 
-export function ChatPrompt({
-  onSubmit,
-  placeholder,
-  className,
-  footer,
-  prefillMessage,
-  slashCommandItems,
-  onSlashItemCommand,
-  attachments = [],
-  onRemoveAttachment,
-  disabled = false,
-  attachmentAccept,
-  onAttachmentFiles,
-}: ChatPromptProps) {
-  const attachmentsCount = attachments.length;
+export type { ChatPromptComposerHandle } from './ChatPromptComposer';
 
-  const emitSubmitRef = useRef(() => {});
-  const { editor, trimmedMessage, resetAfterSend } = useChatPromptEditor({
-    disabled,
-    placeholder,
-    slashCommandItems,
-    onSlashItemCommand,
-    prefillMessage,
-    attachmentsCount,
-    onEnterSubmit: () => emitSubmitRef.current(),
-  });
+export const ChatPrompt = forwardRef<ChatPromptComposerHandle, ChatPromptProps>(
+  function ChatPrompt(
+    {
+      onSubmit,
+      placeholder,
+      className,
+      footer,
+      prefillMessage,
+      slashCommandItems,
+      onSlashItemCommand,
+      attachments = [],
+      onRemoveAttachment,
+      disabled = false,
+      attachmentAccept,
+      onAttachmentFiles,
+    },
+    ref,
+  ) {
+    const attachmentsCount = attachments.length;
 
-  const emitSubmitAndClear = useCallback(() => {
-    if (!editor) return;
-    if (!trimmedMessage && attachmentsCount === 0) return;
+    const emitSubmitRef = useRef(() => {});
+    const { editor, trimmedMessage, resetAfterSend } = useChatPromptEditor({
+      disabled,
+      placeholder,
+      slashCommandItems,
+      onSlashItemCommand,
+      prefillMessage,
+      attachmentsCount,
+      onEnterSubmit: () => emitSubmitRef.current(),
+    });
 
-    const msg = trimmedMessage;
-    resetAfterSend();
-    onSubmit(msg, attachmentsCount > 0 ? attachments : undefined);
-  }, [
-    attachments,
-    attachmentsCount,
-    editor,
-    onSubmit,
-    resetAfterSend,
-    trimmedMessage,
-  ]);
+    useImperativeHandle(
+      ref,
+      () => (editor ? createChatPromptComposerHandle(editor) : null!),
+      [editor],
+    );
 
-  emitSubmitRef.current = emitSubmitAndClear;
+    const emitSubmitAndClear = useCallback(() => {
+      if (!editor) return;
+      if (!trimmedMessage && attachmentsCount === 0) return;
 
-  const handleSubmitForm = useCallback(
-    (e?: FormEvent) => {
-      e?.preventDefault();
-      emitSubmitAndClear();
-    },
-    [emitSubmitAndClear],
-  );
+      const msg = trimmedMessage;
+      resetAfterSend();
+      onSubmit(msg, attachmentsCount > 0 ? attachments : undefined);
+    }, [
+      attachments,
+      attachmentsCount,
+      editor,
+      onSubmit,
+      resetAfterSend,
+      trimmedMessage,
+    ]);
+
+    emitSubmitRef.current = emitSubmitAndClear;
+
+    const handleSubmitForm = useCallback(
+      (e?: FormEvent) => {
+        e?.preventDefault();
+        emitSubmitAndClear();
+      },
+      [emitSubmitAndClear],
+    );
 
-  if (!editor) {
-    return null;
-  }
+    if (!editor) {
+      return null;
+    }
 
-  return (
-    <form onSubmit={handleSubmitForm} className={cn(S.root, className)}>
-      <ChatPromptAttachments
-        attachments={attachments}
-        onRemove={index => onRemoveAttachment?.(index)}
-        disabled={disabled}
-      />
-      <ChatPromptComposer
-        editor={editor}
-        disabled={disabled}
-        trimmedMessage={trimmedMessage}
-        attachments={attachments}
-        attachmentAccept={attachmentAccept}
-        onAttachmentFiles={onAttachmentFiles}
-      />
-      {footer}
-    </form>
-  );
-}
+    return (
+      <form onSubmit={handleSubmitForm} className={cn(S.root, className)}>
+        <ChatPromptAttachments
+          attachments={attachments}
+          onRemove={index => onRemoveAttachment?.(index)}
+          disabled={disabled}
+        />
+        <ChatPromptComposer
+          editor={editor}
+          disabled={disabled}
+          trimmedMessage={trimmedMessage}
+          attachments={attachments}
+          attachmentAccept={attachmentAccept}
+          onAttachmentFiles={onAttachmentFiles}
+        />
+        {footer}
+      </form>
+    );
+  },
+);

package/src/components/ui/Chat/ChatPrompt/ChatPromptComposer.tsx

@@ -1,4 +1,10 @@
-import { type ChangeEvent, useCallback, useRef } from 'react';
+import {
+  type ChangeEvent,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 
 import type { Editor } from '@tiptap/core';
 import { EditorContent } from '@tiptap/react';
@@ -7,6 +13,15 @@ import { PaperclipIcon, SendHorizontalIcon } from 'lucide-react';
 import { Button } from '../../Button';
 import type { ChatAttachmentDropItem } from '../Chat.types';
 import S from './ChatPrompt.styl';
+import {
+  type ChatPromptComposerHandle,
+  createChatPromptComposerHandle,
+} from './chatPromptComposerInsert';
+
+export type {
+  ChatPromptComposerHandle,
+  ChatPromptComposerInsertOptions,
+} from './ChatPromptComposer.types';
 
 export type ChatPromptComposerProps = {
   editor: Editor;
@@ -17,17 +32,27 @@ export type ChatPromptComposerProps = {
   onAttachmentFiles?: (files: File[]) => void;
 };
 
-export function ChatPromptComposer({
-  editor,
-  disabled,
-  trimmedMessage,
-  attachments,
-  attachmentAccept,
-  onAttachmentFiles,
-}: ChatPromptComposerProps) {
+export const ChatPromptComposer = forwardRef<
+  ChatPromptComposerHandle,
+  ChatPromptComposerProps
+>(function ChatPromptComposer(
+  {
+    editor,
+    disabled,
+    trimmedMessage,
+    attachments,
+    attachmentAccept,
+    onAttachmentFiles,
+  },
+  ref,
+) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const showAttachButton = Boolean(attachmentAccept && onAttachmentFiles);
 
+  useImperativeHandle(ref, () => createChatPromptComposerHandle(editor), [
+    editor,
+  ]);
+
   const handleFileInputChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       const files = Array.from(e.target.files ?? []);
@@ -88,4 +113,4 @@ export function ChatPromptComposer({
       </div>
     </div>
   );
-}
+});

package/src/components/ui/Chat/ChatPrompt/ChatPromptComposer.types.ts

@@ -0,0 +1,11 @@
+export type {
+  ChatPromptComposerHandle,
+  ChatPromptComposerInsertOptions,
+} from './chatPromptComposerInsert';
+export {
+  CHAT_PROMPT_COMMAND_CHIP_CLASS,
+  chatPromptChipHtml,
+  createChatPromptComposerHandle,
+  getChatPromptTokenRangeBeforePos,
+  insertChatPromptContentAtCaret,
+} from './chatPromptComposerInsert';

package/src/components/ui/Chat/ChatPrompt/chatPromptComposerInsert.ts

@@ -0,0 +1,122 @@
+import type { Editor, JSONContent } from '@tiptap/core';
+
+export type ChatPromptComposerInsertOptions = {
+  /**
+   * Doc range to replace before insert (e.g. slash suggestion `range` covering `/query`).
+   * When set, `replaceTriggerToken` is ignored.
+   */
+  replaceRange?: { from: number; to: number };
+  /**
+   * When true and no `replaceRange`, delete text from caret back to the preceding
+   * space or start of line before insert. Default true.
+   */
+  replaceTriggerToken?: boolean;
+  /** Append a space after inserted content so the user can keep typing. Default true. */
+  trailingSpace?: boolean;
+};
+
+/** Global class for inline command chips inserted via `insertAtCaret`. */
+export const CHAT_PROMPT_COMMAND_CHIP_CLASS = 'chat-prompt-command-chip';
+
+export type ChatPromptComposerHandle = {
+  /** Insert HTML string or TipTap JSON at the caret (or after clearing trigger text). */
+  insertAtCaret: (
+    content: string | JSONContent,
+    options?: ChatPromptComposerInsertOptions,
+  ) => void;
+  focus: () => void;
+  getEditor: () => Editor;
+};
+
+/** Range of the unfinished token immediately before `pos` (back to space or line start). */
+export function getChatPromptTokenRangeBeforePos(
+  editor: Editor,
+  pos: number,
+): { from: number; to: number } {
+  const $pos = editor.state.doc.resolve(pos);
+  const textBefore = $pos.parent.textBetween(
+    0,
+    $pos.parentOffset,
+    undefined,
+    '\ufffc',
+  );
+  const token = textBefore.match(/[^\s]*$/)?.[0] ?? '';
+  return { from: pos - token.length, to: pos };
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;');
+}
+
+/** Build inline chip HTML for `insertAtCaret` (uses global `CHAT_PROMPT_COMMAND_CHIP_CLASS`). */
+export function chatPromptChipHtml(
+  text: string,
+  className: string = CHAT_PROMPT_COMMAND_CHIP_CLASS,
+): string {
+  const cls = className ? ` class="${className}"` : '';
+  return `<span${cls} data-chat-prompt-chip="true">${escapeHtml(text)}</span>`;
+}
+
+export function insertChatPromptContentAtCaret(
+  editor: Editor,
+  content: string | JSONContent,
+  options?: ChatPromptComposerInsertOptions,
+): void {
+  if (editor.isDestroyed) return;
+
+  const {
+    replaceRange,
+    replaceTriggerToken = true,
+    trailingSpace = true,
+  } = options ?? {};
+
+  const { from: selFrom, to: selTo } = editor.state.selection;
+  let from: number;
+  let to: number;
+
+  if (replaceRange) {
+    from = replaceRange.from;
+    to = replaceRange.to;
+  } else if (replaceTriggerToken) {
+    ({ from, to } = getChatPromptTokenRangeBeforePos(editor, selFrom));
+  } else {
+    from = selFrom;
+    to = selTo;
+  }
+
+  const chain = editor.chain().focus().deleteRange({ from, to });
+
+  if (typeof content === 'string') {
+    chain.insertContentAt(from, trailingSpace ? `${content} ` : content);
+  } else {
+    chain.insertContentAt(from, content);
+    if (trailingSpace) {
+      chain.insertContent(' ');
+    }
+  }
+
+  chain.run();
+
+  queueMicrotask(() => {
+    editor.view.dom.ownerDocument?.defaultView
+      ?.getSelection?.()
+      ?.collapseToEnd();
+  });
+}
+
+export function createChatPromptComposerHandle(
+  editor: Editor,
+): ChatPromptComposerHandle {
+  return {
+    insertAtCaret: (content, options) =>
+      insertChatPromptContentAtCaret(editor, content, options),
+    focus: () => {
+      editor.commands.focus();
+    },
+    getEditor: () => editor,
+  };
+}

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

@@ -27,6 +27,15 @@ export type {
 } from './ChatSheet/useChatPanelChromeModel';
 export { ChatMessage } from './ChatMessage';
 export { ChatPrompt } from './ChatPrompt';
+export type { ChatPromptComposerHandle } from './ChatPrompt/ChatPromptComposer';
+export {
+  CHAT_PROMPT_COMMAND_CHIP_CLASS,
+  chatPromptChipHtml,
+  createChatPromptComposerHandle,
+  getChatPromptTokenRangeBeforePos,
+  insertChatPromptContentAtCaret,
+} from './ChatPrompt/chatPromptComposerInsert';
+export type { ChatPromptComposerInsertOptions } from './ChatPrompt/ChatPromptComposer.types';
 export { ChatPresets } from './ChatPresets';
 export type {
   ChatEmptyStateConfig,

package/src/components/ui/Logo/Logo.styl

@@ -9,6 +9,7 @@
   flex-shrink 0
   height 24px
   width auto
+  color var(--brand-color)
 
 .text
   font-family var(--font-family-heading)

package/src/components/ui/Logo/logo.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-	<path fill="#C259FF" d="M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z" style="stroke-width:.13252" />
+	<path fill="currentColor" d="M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z" style="stroke-width:.13252" />
 </svg>

package/src/components/ui/Page/PageFooter/PageFooter.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 
+import { Logo } from '#uilib/components/ui/Logo';
 import { GlobeIcon, MailIcon } from 'lucide-react';
 
 import S from './PageFooter.styl';
@@ -14,7 +15,6 @@ export interface PageFooterLinkItem {
 }
 
 export interface PageFooterProps {
-  logo?: ReactNode;
   /** Rendered between logo block and copyright (e.g. debug UI from the app). */
   children?: ReactNode;
   /** When non-empty, version badge links here (e.g. `/releases`). */
@@ -55,7 +55,6 @@ export function PageFooter({
   versionLabel,
   homeTo = '/',
   brandText = 'Sybilion',
-  logo,
   websiteHref = 'https://sybilion.com',
   mailHref = 'mailto:support@sybilion.com',
   copyrightText = '© 2026 Sybilion. All rights reserved.',
@@ -84,7 +83,7 @@ export function PageFooter({
       <div className={S.line}>
         <div className={S.logo}>
           <Link to={homeTo}>
-            {logo}
+            <Logo />
             &nbsp;{brandText}
           </Link>
           {versionLink !== '' && (

package/src/docs/DocsShell.tsx

@@ -1,7 +1,6 @@
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { AppHeaderHost } from '#uilib/components/ui/AppHeader';
-import { LogoMark } from '#uilib/components/ui/Logo';
 import { AppShell, AppShellMainContent } from '#uilib/components/ui/Page';
 import { PageFooter } from '#uilib/components/ui/Page/PageFooter/PageFooter';
 import { PageScroll } from '#uilib/components/ui/Page/PageScroll/PageScroll';
@@ -23,11 +22,7 @@ export function DocsShell() {
         <AppShellMainContent
           header={<AppHeaderHost />}
           footer={
-            <PageFooter
-              logo={<LogoMark />}
-              versionLink="/releases"
-              versionLabel="1.0.0-docs"
-            />
+            <PageFooter versionLink="/releases" versionLabel="1.0.0-docs" />
           }
         >
           <SybilionAppHeader