@vectara/vectara-ui 18.4.0 → 19.0.0

package/src/docs/pages/colorPalette/Swatch.tsx

@@ -0,0 +1,59 @@
+import { VuiCopyButton, VuiFlexContainer, VuiFlexItem, VuiSpacer, VuiText, VuiTextColor } from "../../../lib";
+
+type Props = {
+  // Friendly name for the color.
+  name: string;
+  // The CSS custom property exposed by the theme, e.g. "--vui-color-primary-shade".
+  cssVariable: string;
+  // The value resolved in the light theme, shown for reference.
+  value?: string;
+};
+
+// Renders a single theme color as a live swatch alongside its CSS variable and value.
+// The swatch fills itself with var(cssVariable), so it always reflects the active theme.
+export const Swatch = ({ name, cssVariable, value }: Props) => {
+  return (
+    <VuiFlexItem grow={false}>
+      <div style={{ width: 200 }}>
+        <div
+          style={{
+            height: 64,
+            borderRadius: 6,
+            backgroundColor: `var(${cssVariable})`,
+            border: "1px solid var(--vui-color-border-medium)"
+          }}
+        />
+
+        <VuiSpacer size="xs" />
+
+        <VuiText size="xs">
+          <p>
+            <strong>{name}</strong>
+          </p>
+        </VuiText>
+
+        <VuiFlexContainer alignItems="center" spacing="xs" justifyContent="spaceBetween">
+          <VuiFlexItem grow={false}>
+            <VuiText size="xs">
+              <p>
+                <code>{cssVariable}</code>
+              </p>
+            </VuiText>
+          </VuiFlexItem>
+
+          <VuiFlexItem grow={false}>
+            <VuiCopyButton size="xs" value={`var(${cssVariable})`} title={`Copy var(${cssVariable})`} />
+          </VuiFlexItem>
+        </VuiFlexContainer>
+
+        {value && (
+          <VuiText size="xs">
+            <p>
+              <VuiTextColor color="subdued">{value}</VuiTextColor>
+            </p>
+          </VuiText>
+        )}
+      </div>
+    </VuiFlexItem>
+  );
+};

package/src/docs/pages/colorPalette/TextAndBorderColors.tsx

@@ -0,0 +1,37 @@
+import { VuiFlexContainer } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
+import { Swatch } from "./Swatch";
+
+// Foreground colors for body copy and form labels.
+const textSwatches = [
+  { name: "Text", cssVariable: "--vui-color-text", value: "#1c1d22" },
+  { name: "Label", cssVariable: "--vui-color-label", value: "#1c1d22" }
+];
+
+// Border colors for dividers, inputs, and surfaces.
+const borderSwatches = [
+  { name: "Border medium", cssVariable: "--vui-color-border-medium", value: "#cbd1de" },
+  { name: "Border light", cssVariable: "--vui-color-border-light", value: "#e3e4f3" }
+];
+
+export const TextAndBorderColors = () => {
+  return (
+    <>
+      <Subsection title="Text">
+        <VuiFlexContainer spacing="l" wrap>
+          {textSwatches.map((swatch) => (
+            <Swatch key={swatch.cssVariable} {...swatch} />
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+
+      <Subsection title="Border">
+        <VuiFlexContainer spacing="l" wrap>
+          {borderSwatches.map((swatch) => (
+            <Swatch key={swatch.cssVariable} {...swatch} />
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+    </>
+  );
+};

package/src/docs/pages/colorPalette/Usage.tsx

@@ -0,0 +1,72 @@
+import { VuiSpacer, VuiText, VuiTitle } from "../../../lib";
+
+// Demonstrates referencing theme colors from CSS, including the -rgb companion variables
+// that let you compose translucent colors at any opacity.
+export const Usage = () => {
+  return (
+    <>
+      <VuiText>
+        <p>
+          Every theme color is published as a CSS custom property prefixed with <code>--vui-color-</code>. Reference one
+          anywhere you write CSS with <code>var(...)</code>:
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="s" />
+
+      <VuiText>
+        <pre>
+          <code>{`.myElement {\n  color: var(--vui-color-primary-shade);\n  border: 1px solid var(--vui-color-border-medium);\n}`}</code>
+        </pre>
+      </VuiText>
+
+      <VuiSpacer size="m" />
+
+      <VuiText>
+        <p>
+          Each color also has an <code>-rgb</code> companion that holds just the{" "}
+          <code>r, g, b</code> channels. Pair it with <code>rgba()</code> to build a translucent color at any opacity:
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="s" />
+
+      <VuiText>
+        <pre>
+          <code>{`.myElement {\n  background-color: rgba(var(--vui-color-primary-shade-rgb), 0.08);\n}`}</code>
+        </pre>
+      </VuiText>
+
+      <VuiSpacer size="m" />
+
+      <VuiTitle size="xs">
+        <h4>Live example</h4>
+      </VuiTitle>
+
+      <VuiSpacer size="s" />
+
+      <div
+        style={{
+          padding: 16,
+          borderRadius: 8,
+          color: "var(--vui-color-primary-shade)",
+          backgroundColor: "rgba(var(--vui-color-primary-shade-rgb), 0.08)",
+          border: "1px solid var(--vui-color-border-medium)"
+        }}
+      >
+        This panel's text, background, and border are all driven by theme color variables, so it adapts automatically
+        when the theme changes.
+      </div>
+
+      <VuiSpacer size="m" />
+
+      <VuiText>
+        <p>
+          To change these values, pass a <code>theme</code> to <code>VuiContextProvider</code> — see the Theme page. The
+          neutral, text, and border colors invert between the light and dark themes, so prefer the semantic name (for
+          example <code>--vui-color-empty-shade</code>) over a literal lightness.
+        </p>
+      </VuiText>
+    </>
+  );
+};

package/src/docs/pages/colorPalette/index.tsx

@@ -0,0 +1,43 @@
+import { Usage } from "./Usage";
+import { SemanticColors } from "./SemanticColors";
+import { CategoricalColors } from "./CategoricalColors";
+import { NeutralColors } from "./NeutralColors";
+import { TextAndBorderColors } from "./TextAndBorderColors";
+
+const UsageSource = require("!!raw-loader!./Usage");
+const SemanticColorsSource = require("!!raw-loader!./SemanticColors");
+const CategoricalColorsSource = require("!!raw-loader!./CategoricalColors");
+const NeutralColorsSource = require("!!raw-loader!./NeutralColors");
+const TextAndBorderColorsSource = require("!!raw-loader!./TextAndBorderColors");
+
+export const colorPalette = {
+  name: "Color palette",
+  path: "/colorPalette",
+  examples: [
+    {
+      name: "Using color variables",
+      component: <Usage />,
+      source: UsageSource.default.toString()
+    },
+    {
+      name: "Semantic colors",
+      component: <SemanticColors />,
+      source: SemanticColorsSource.default.toString()
+    },
+    {
+      name: "Categorical colors",
+      component: <CategoricalColors />,
+      source: CategoricalColorsSource.default.toString()
+    },
+    {
+      name: "Neutral and special colors",
+      component: <NeutralColors />,
+      source: NeutralColorsSource.default.toString()
+    },
+    {
+      name: "Text and border colors",
+      component: <TextAndBorderColors />,
+      source: TextAndBorderColorsSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages/composer/Composer.tsx

@@ -0,0 +1,130 @@
+import { useState } from "react";
+import {
+  VuiButtonTertiary,
+  VuiComposer,
+  ComposerSubmission,
+  VuiFlexContainer,
+  VuiFlexItem,
+  VuiIcon,
+  VuiIconButton,
+  VuiSpacer,
+  VuiText,
+  VuiTextColor
+} from "../../../lib";
+import { BiBulb, BiError } from "react-icons/bi";
+
+const MAX_FILE_SIZE_BYTES = 5 * 1024 * 1024;
+
+type SentMessage = {
+  text: string;
+  fileNames: string[];
+};
+
+export const Composer = () => {
+  const [messages, setMessages] = useState<SentMessage[]>([]);
+  const [isRunning, setIsRunning] = useState(false);
+  const [rejectedFiles, setRejectedFiles] = useState<string[]>([]);
+  const [skillCount, setSkillCount] = useState(0);
+
+  const handleSubmit = ({ text, files }: ComposerSubmission) => {
+    setMessages((prev) => [...prev, { text, fileNames: files.map((file) => file.name) }]);
+    setRejectedFiles([]);
+
+    // Simulate a streaming response so the Send button toggles to Cancel.
+    setIsRunning(true);
+    window.setTimeout(() => setIsRunning(false), 2000);
+  };
+
+  return (
+    <>
+      {messages.length > 0 && (
+        <>
+          {messages.map((message, index) => (
+            <div key={index}>
+              <VuiText>
+                <p>{message.text || <VuiTextColor color="subdued">(no text)</VuiTextColor>}</p>
+              </VuiText>
+              {message.fileNames.length > 0 && (
+                <VuiText size="s">
+                  <p>
+                    <VuiTextColor color="subdued">Attached: {message.fileNames.join(", ")}</VuiTextColor>
+                  </p>
+                </VuiText>
+              )}
+              <VuiSpacer size="xs" />
+            </div>
+          ))}
+          <VuiSpacer size="m" />
+        </>
+      )}
+
+      <VuiComposer
+        placeholder="Ask a question, attach files, or press / for skills"
+        isRunning={isRunning}
+        onCancel={() => setIsRunning(false)}
+        onSubmit={handleSubmit}
+        enableHistory
+        historyKey="vuiComposerDocs:history"
+        canUploadFiles
+        validateFile={(file) => (file.size > MAX_FILE_SIZE_BYTES ? "File exceeds 5 MB" : null)}
+        onFilesRejected={(errors) => setRejectedFiles(errors.map((error) => error.file.name))}
+        onShortcutKeys={{
+          "/": (event, { value }) => {
+            // Open the skill picker only when the composer is empty.
+            if (value === "") {
+              event.preventDefault();
+              setSkillCount((count) => count + 1);
+            }
+          }
+        }}
+        leadingActions={
+          <VuiFlexItem>
+            <VuiFlexContainer alignItems="center" spacing="xxs">
+              <VuiIconButton
+                color="neutral"
+                aria-label="Select skill"
+                onClick={() => setSkillCount((count) => count + 1)}
+                icon={
+                  <VuiIcon>
+                    <BiBulb />
+                  </VuiIcon>
+                }
+              />
+              {skillCount > 0 && (
+                <VuiText size="s">
+                  <VuiTextColor color="subdued">({skillCount})</VuiTextColor>
+                </VuiText>
+              )}
+            </VuiFlexContainer>
+          </VuiFlexItem>
+        }
+        footer={
+          rejectedFiles.length > 0 ? (
+            <>
+              <VuiSpacer size="s" />
+              <VuiFlexContainer alignItems="center" spacing="xs">
+                <VuiFlexItem>
+                  <VuiIcon size="s" color="danger">
+                    <BiError />
+                  </VuiIcon>
+                </VuiFlexItem>
+                <VuiFlexItem>
+                  <VuiText size="s">
+                    <p>
+                      <VuiTextColor color="subdued">Could not attach: {rejectedFiles.join(", ")}</VuiTextColor>
+                    </p>
+                  </VuiText>
+                </VuiFlexItem>
+                <VuiFlexItem>
+                  <VuiButtonTertiary noPadding color="primary" size="s" onClick={() => setRejectedFiles([])}>
+                    Dismiss
+                  </VuiButtonTertiary>
+                </VuiFlexItem>
+              </VuiFlexContainer>
+            </>
+          ) : undefined
+        }
+      />
+    </>
+  );
+};

package/src/docs/pages/composer/index.tsx

@@ -0,0 +1,11 @@
+import { Composer } from "./Composer";
+const ComposerSource = require("!!raw-loader!./Composer");
+
+export const composer = {
+  name: "Composer",
+  path: "/composer",
+  example: {
+    component: <Composer />,
+    source: ComposerSource.default.toString()
+  }
+};

package/src/docs/pages/fileDropTarget/FileDropTarget.tsx

@@ -0,0 +1,80 @@
+import { useRef, useState } from "react";
+import { VuiFileDropTarget, VuiSpacer, VuiText, VuiTextColor, VuiToggle } from "../../../lib";
+
+export const FileDropTarget = () => {
+  const [isScoped, setIsScoped] = useState(false);
+  const [droppedFiles, setDroppedFiles] = useState<string[]>([]);
+  const scopeRef = useRef<HTMLDivElement>(null);
+
+  // Only one target is mounted at a time: the global target listens on the whole
+  // document, so it would intercept drops meant for a scoped target.
+  return (
+    <>
+      <VuiToggle
+        label="Scope drop target to an element"
+        checked={isScoped}
+        onChange={(e) => {
+          setIsScoped(e.target.checked);
+          setDroppedFiles([]);
+        }}
+      />
+
+      <VuiSpacer size="m" />
+
+      <VuiText>
+        <p>
+          <VuiTextColor color="subdued">
+            {isScoped
+              ? "Drag a file over the box below. The overlay is scoped to the positioned container."
+              : "Drag a file anywhere over the page to reveal a full-screen overlay."}
+          </VuiTextColor>
+        </p>
+      </VuiText>
+
+      {droppedFiles.length > 0 && (
+        <>
+          <VuiSpacer size="xs" />
+          <VuiText size="s">
+            <p>Dropped: {droppedFiles.join(", ")}</p>
+          </VuiText>
+        </>
+      )}
+
+      <VuiSpacer size="s" />
+
+      {isScoped ? (
+        <div
+          ref={scopeRef}
+          style={{
+            position: "relative",
+            minHeight: 160,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 16,
+            border: "1px dashed var(--vui-color-border)",
+            borderRadius: 8
+          }}
+        >
+          <VuiText>
+            <p>
+              <VuiTextColor color="subdued">Drop zone</VuiTextColor>
+            </p>
+          </VuiText>
+
+          <VuiFileDropTarget
+            scopeRef={scopeRef}
+            message={
+              <VuiText align="center" size="l">
+                <p>Release to drop here</p>
+              </VuiText>
+            }
+            onFilesDropped={(files) => setDroppedFiles(files.map((file) => file.name))}
+          />
+        </div>
+      ) : (
+        <VuiFileDropTarget onFilesDropped={(files) => setDroppedFiles(files.map((file) => file.name))} />
+      )}
+    </>
+  );
+};

package/src/docs/pages/fileDropTarget/index.tsx

@@ -0,0 +1,11 @@
+import { FileDropTarget } from "./FileDropTarget";
+const FileDropTargetSource = require("!!raw-loader!./FileDropTarget");
+
+export const fileDropTarget = {
+  name: "File drop target",
+  path: "/fileDropTarget",
+  example: {
+    component: <FileDropTarget />,
+    source: FileDropTargetSource.default.toString()
+  }
+};

package/src/docs/pages/patch/Icons.tsx

@@ -0,0 +1,16 @@
+import { BiHelpCircle } from "react-icons/bi";
+import { PATCH_COLOR, VuiIcon, VuiPatch, VuiFlexContainer } from "../../../lib";
+
+export const Icons = () => {
+  return (
+    <VuiFlexContainer spacing="m" wrap>
+      {PATCH_COLOR.map((color) => (
+        <VuiPatch color={color}>
+          <VuiIcon size="m">
+            <BiHelpCircle />
+          </VuiIcon>
+        </VuiPatch>
+      ))}
+    </VuiFlexContainer>
+  );
+};

package/src/docs/pages/patch/Sizes.tsx

@@ -0,0 +1,20 @@
+import { BiCompass } from "react-icons/bi";
+import { VuiPatch, VuiFlexContainer, VuiIcon } from "../../../lib";
+
+const sizes = ["xs", "s", "m"] as const;
+
+export const Sizes = () => {
+  return (
+    <VuiFlexContainer spacing="m" wrap>
+      {sizes.map((size) => (
+        <div>
+          <VuiPatch color="indigo" size={size}>
+            <VuiIcon>
+              <BiCompass />
+            </VuiIcon>
+          </VuiPatch>
+        </div>
+      ))}
+    </VuiFlexContainer>
+  );
+};

package/src/docs/pages/patch/index.tsx

@@ -0,0 +1,22 @@
+import { Icons } from "./Icons";
+import { Sizes } from "./Sizes";
+
+const IconsSource = require("!!raw-loader!./Icons");
+const SizesSource = require("!!raw-loader!./Sizes");
+
+export const patch = {
+  name: "Patch",
+  path: "/patch",
+  examples: [
+    {
+      name: "Icons",
+      component: <Icons />,
+      source: IconsSource.default.toString()
+    },
+    {
+      name: "Sizes",
+      component: <Sizes />,
+      source: SizesSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages.tsx

@@ -11,12 +11,15 @@ import { checkbox } from "./pages/checkbox";
 import { chip } from "./pages/chip";
 import { code } from "./pages/code";
 import { codeEditor } from "./pages/codeEditor";
+import { colorPalette } from "./pages/colorPalette";
 import { complexConfigurationButton } from "./pages/complexConfigurationButton";
+import { composer } from "./pages/composer";
 import { copyButton } from "./pages/copyButton";
 import { datePicker } from "./pages/datePicker";
 import { drawer } from "./pages/drawer";
 import { durationBar } from "./pages/durationBar";
 import { errorBoundary } from "./pages/errorBoundary";
+import { fileDropTarget } from "./pages/fileDropTarget";
 import { flex } from "./pages/flex";
 import { formGroup } from "./pages/formGroup";
 import { grid } from "./pages/grid";
@@ -40,6 +43,7 @@ import { optionsButton } from "./pages/optionsButton";
 import { optionsList } from "./pages/optionsList";
 import { pagination } from "./pages/pagination";
 import { panel } from "./pages/panel";
+import { patch } from "./pages/patch";
 import { popover } from "./pages/popover";
 import { progressBar } from "./pages/progressBar";
 import { prompt } from "./pages/prompt";
@@ -84,11 +88,11 @@ type Example = { component: React.ReactNode; source: string };
 export const categories: Category[] = [
   {
     name: "Query",
-    pages: [chat, prompt, searchInput, searchResult, summary]
+    pages: [chat, composer, prompt, searchInput, searchResult, summary]
   },
   {
     name: "Application",
-    pages: [app, drawer, modal, portalContainer, notifications, accountButton, theme]
+    pages: [app, drawer, modal, portalContainer, notifications, accountButton, theme, colorPalette]
   },
   {
     name: "Info",
@@ -106,6 +110,7 @@ export const categories: Category[] = [
     name: "Content",
     pages: [
       badge,
+      patch,
       status,
       callout,
       code,
@@ -138,7 +143,8 @@ export const categories: Category[] = [
       radioButton,
       superCheckboxGroup,
       superRadioGroup,
-      itemsInput
+      itemsInput,
+      fileDropTarget
     ]
   },
   {