@vectara/vectara-ui 18.3.0 → 19.0.0

package/src/docs/pages/chip/Chip.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { VuiChip, VuiFlexContainer, VuiSpacer, VuiToggle } from "../../../lib";
+
+export const Chip = () => {
+  const [hasCounts, setHasCounts] = useState(false);
+  const [activeOption, setActiveOption] = useState<"all" | "a" | "b" | "c">("all");
+
+  return (
+    <>
+      <VuiToggle checked={hasCounts} onChange={() => setHasCounts(!hasCounts)} label="Append counts" />
+
+      <VuiSpacer size="m" />
+
+      <VuiFlexContainer spacing="xs">
+        <VuiChip
+          onClick={() => setActiveOption("all")}
+          isActive={activeOption === "all"}
+          append={hasCounts ? 100 : undefined}
+        >
+          All options
+        </VuiChip>
+
+        <VuiChip
+          onClick={() => setActiveOption("a")}
+          isActive={activeOption === "a"}
+          append={hasCounts ? 2 : undefined}
+        >
+          Option A
+        </VuiChip>
+
+        <VuiChip
+          onClick={() => setActiveOption("b")}
+          isActive={activeOption === "b"}
+          append={hasCounts ? 81 : undefined}
+        >
+          Option B
+        </VuiChip>
+
+        <VuiChip
+          onClick={() => setActiveOption("c")}
+          isActive={activeOption === "c"}
+          append={hasCounts ? 16 : undefined}
+        >
+          Option C
+        </VuiChip>
+      </VuiFlexContainer>
+    </>
+  );
+};

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

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

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

@@ -0,0 +1,89 @@
+import { BiSolidBookmark } from "react-icons/bi";
+import { VuiCopyButton, VuiFlexContainer, VuiFlexItem, VuiSpacer, VuiText, VuiTextColor } from "../../../lib";
+
+// Categorical colors carry no fixed meaning — the hue just distinguishes one category from another.
+// Each is a pair: a tinted background and a saturated foreground for text and icons.
+const categoricalColors = [
+  // Warm
+  { name: "Red", background: "--vui-color-red-background", text: "--vui-color-red-text" },
+  { name: "Orange", background: "--vui-color-orange-background", text: "--vui-color-orange-text" },
+  { name: "Amber", background: "--vui-color-amber-background", text: "--vui-color-amber-text" },
+  // Greens
+  { name: "Lime", background: "--vui-color-lime-background", text: "--vui-color-lime-text" },
+  { name: "Emerald", background: "--vui-color-emerald-background", text: "--vui-color-emerald-text" },
+  { name: "Teal", background: "--vui-color-teal-background", text: "--vui-color-teal-text" },
+  // Blues
+  { name: "Sky", background: "--vui-color-sky-background", text: "--vui-color-sky-text" },
+  { name: "Indigo", background: "--vui-color-indigo-background", text: "--vui-color-indigo-text" },
+  // Purples and pinks
+  { name: "Purple", background: "--vui-color-purple-background", text: "--vui-color-purple-text" },
+  { name: "Fuchsia", background: "--vui-color-fuchsia-background", text: "--vui-color-fuchsia-text" },
+  { name: "Pink", background: "--vui-color-pink-background", text: "--vui-color-pink-text" },
+  // Neutral
+  { name: "Slate", background: "--vui-color-slate-background", text: "--vui-color-slate-text" }
+];
+
+// A single CSS variable row: the variable name plus a button to copy its var() reference.
+const VariableRow = ({ cssVariable }: { cssVariable: string }) => (
+  <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>
+);
+
+export const CategoricalColors = () => {
+  return (
+    <>
+      <VuiText>
+        <p>
+          <VuiTextColor color="subdued">
+            Interchangeable hue pairs for color-coding categories. The icon inherits the foreground color via{" "}
+            <code>currentColor</code>, so a patch only needs the background and text variables.
+          </VuiTextColor>
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="l" />
+
+      <VuiFlexContainer spacing="l" wrap>
+        {categoricalColors.map(({ name, background, text }) => (
+          <VuiFlexItem grow={false} key={name}>
+            <div style={{ width: 220 }}>
+              {/* A representative patch built from the pair. */}
+              <div
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 6,
+                  padding: "4px 10px",
+                  borderRadius: 6,
+                  fontSize: 13,
+                  fontWeight: 600,
+                  backgroundColor: `var(${background})`,
+                  color: `var(${text})`
+                }}
+              >
+                <BiSolidBookmark />
+                {name}
+              </div>
+
+              <VuiSpacer size="s" />
+
+              <VariableRow cssVariable={background} />
+              <VariableRow cssVariable={text} />
+            </div>
+          </VuiFlexItem>
+        ))}
+      </VuiFlexContainer>
+    </>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { VuiFlexContainer } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
+import { Swatch } from "./Swatch";
+
+// Neutral shades run from the empty shade (the app background) to the full shade.
+// In the dark theme these invert, so reach for the semantic name rather than the literal lightness.
+const neutralSwatches = [
+  { name: "Empty shade", cssVariable: "--vui-color-empty-shade", value: "#ffffff" },
+  { name: "Light shade", cssVariable: "--vui-color-light-shade", value: "#f1f4f6" },
+  { name: "Medium shade", cssVariable: "--vui-color-medium-shade", value: "#cbd1de" },
+  { name: "Dark shade", cssVariable: "--vui-color-dark-shade", value: "#3f4551" },
+  { name: "Darker shade", cssVariable: "--vui-color-darker-shade", value: "#1c1d22" },
+  { name: "Full shade", cssVariable: "--vui-color-full-shade", value: "#0b0c0e" }
+];
+
+// Special-purpose accents that sit outside the semantic families.
+const specialSwatches = [
+  { name: "Primary highlight", cssVariable: "--vui-color-primary-highlight-shade", value: "#d9e2ff" },
+  { name: "Subdued", cssVariable: "--vui-color-subdued-shade", value: "#6d7686" }
+];
+
+export const NeutralColors = () => {
+  return (
+    <>
+      <Subsection title="Neutrals">
+        <VuiFlexContainer spacing="l" wrap>
+          {neutralSwatches.map((swatch) => (
+            <Swatch key={swatch.cssVariable} {...swatch} />
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+
+      <Subsection title="Special">
+        <VuiFlexContainer spacing="l" wrap>
+          {specialSwatches.map((swatch) => (
+            <Swatch key={swatch.cssVariable} {...swatch} />
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+    </>
+  );
+};

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

@@ -0,0 +1,64 @@
+import { VuiFlexContainer } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
+import { Swatch } from "./Swatch";
+
+// Each semantic family has three shades: a base "shade", a 50%-opacity "light shade",
+// and a tinted "lighter shade" suitable for backgrounds.
+const families = [
+  {
+    name: "Accent",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-accent-shade", value: "#5f30c3" },
+      { name: "Light shade", cssVariable: "--vui-color-accent-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-accent-lighter-shade", value: "#eee7ff" }
+    ]
+  },
+  {
+    name: "Primary",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-primary-shade", value: "#045dda" },
+      { name: "Light shade", cssVariable: "--vui-color-primary-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-primary-lighter-shade", value: "#f1f7ff" }
+    ]
+  },
+  {
+    name: "Success",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-success-shade", value: "#249719" },
+      { name: "Light shade", cssVariable: "--vui-color-success-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-success-lighter-shade", value: "#e2f2e0" }
+    ]
+  },
+  {
+    name: "Warning",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-warning-shade", value: "#a86f1b" },
+      { name: "Light shade", cssVariable: "--vui-color-warning-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-warning-lighter-shade", value: "#ffeed4" }
+    ]
+  },
+  {
+    name: "Danger",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-danger-shade", value: "#d22d2d" },
+      { name: "Light shade", cssVariable: "--vui-color-danger-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-danger-lighter-shade", value: "#fff1f1" }
+    ]
+  }
+];
+
+export const SemanticColors = () => {
+  return (
+    <>
+      {families.map((family) => (
+        <Subsection key={family.name} title={family.name}>
+          <VuiFlexContainer spacing="l" wrap>
+            {family.swatches.map((swatch) => (
+              <Swatch key={swatch.cssVariable} {...swatch} />
+            ))}
+          </VuiFlexContainer>
+        </Subsection>
+      ))}
+    </>
+  );
+};

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()
+  }
+};