@assistant-ui/react 0.5.91 → 0.5.93

package/src/ui/assistant-action-bar.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import { forwardRef, type FC } from "react";
+import {
+  AudioLinesIcon,
+  CheckIcon,
+  CopyIcon,
+  RefreshCwIcon,
+  StopCircleIcon,
+  ThumbsDownIcon,
+  ThumbsUpIcon,
+} from "lucide-react";
+import { ActionBarPrimitive, MessagePrimitive } from "../primitives";
+import {
+  TooltipIconButton,
+  TooltipIconButtonProps,
+} from "./base/tooltip-icon-button";
+import { withDefaults } from "./utils/withDefaults";
+import { useThreadConfig } from "./thread-config";
+import { useThread } from "../context";
+
+const useAllowCopy = (ensureCapability = false) => {
+  const { assistantMessage: { allowCopy = true } = {} } = useThreadConfig();
+  const copySupported = useThread((t) => t.capabilities.unstable_copy);
+  return allowCopy && (!ensureCapability || copySupported);
+};
+
+const useAllowSpeak = (ensureCapability = false) => {
+  const { assistantMessage: { allowSpeak = true } = {} } = useThreadConfig();
+  const speechSupported = useThread((t) => t.capabilities.speech);
+  return allowSpeak && (!ensureCapability || speechSupported);
+};
+
+const useAllowReload = (ensureCapability = false) => {
+  const { assistantMessage: { allowReload = true } = {} } = useThreadConfig();
+  const reloadSupported = useThread((t) => t.capabilities.reload);
+  return allowReload && (!ensureCapability || reloadSupported);
+};
+
+const useAllowFeedbackPositive = (ensureCapability = false) => {
+  const { assistantMessage: { allowFeedbackPositive = true } = {} } =
+    useThreadConfig();
+  const feedbackSupported = useThread((t) => t.capabilities.feedback);
+  return allowFeedbackPositive && (!ensureCapability || feedbackSupported);
+};
+
+const useAllowFeedbackNegative = (ensureCapability = false) => {
+  const { assistantMessage: { allowFeedbackNegative = true } = {} } =
+    useThreadConfig();
+  const feedbackSupported = useThread((t) => t.capabilities.feedback);
+  return allowFeedbackNegative && (!ensureCapability || feedbackSupported);
+};
+
+const AssistantActionBar: FC = () => {
+  const allowCopy = useAllowCopy(true);
+  const allowReload = useAllowReload(true);
+  const allowSpeak = useAllowSpeak(true);
+  const allowFeedbackPositive = useAllowFeedbackPositive(true);
+  const allowFeedbackNegative = useAllowFeedbackNegative(true);
+  if (
+    !allowCopy &&
+    !allowReload &&
+    !allowSpeak &&
+    !allowFeedbackPositive &&
+    !allowFeedbackNegative
+  )
+    return null;
+
+  return (
+    <AssistantActionBarRoot
+      hideWhenRunning
+      autohide="not-last"
+      autohideFloat="single-branch"
+    >
+      {allowSpeak && <AssistantActionBarSpeechControl />}
+      {allowCopy && <AssistantActionBarCopy />}
+      {allowReload && <AssistantActionBarReload />}
+      {allowFeedbackPositive && <AssistantActionBarFeedbackPositive />}
+      {allowFeedbackNegative && <AssistantActionBarFeedbackNegative />}
+    </AssistantActionBarRoot>
+  );
+};
+
+AssistantActionBar.displayName = "AssistantActionBar";
+
+const AssistantActionBarRoot = withDefaults(ActionBarPrimitive.Root, {
+  className: "aui-assistant-action-bar-root",
+});
+
+AssistantActionBarRoot.displayName = "AssistantActionBarRoot";
+
+namespace AssistantActionBarCopy {
+  export type Element = ActionBarPrimitive.Copy.Element;
+  export type Props = Partial<TooltipIconButtonProps> & {
+    copiedDuration?: number | undefined;
+  };
+}
+
+const AssistantActionBarCopy = forwardRef<
+  AssistantActionBarCopy.Element,
+  AssistantActionBarCopy.Props
+>(({ copiedDuration, ...props }, ref) => {
+  const {
+    strings: {
+      assistantMessage: { copy: { tooltip = "Copy" } = {} } = {},
+    } = {},
+  } = useThreadConfig();
+
+  return (
+    <ActionBarPrimitive.Copy copiedDuration={copiedDuration} asChild>
+      <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
+        {props.children ?? (
+          <>
+            <MessagePrimitive.If copied>
+              <CheckIcon />
+            </MessagePrimitive.If>
+            <MessagePrimitive.If copied={false}>
+              <CopyIcon />
+            </MessagePrimitive.If>
+          </>
+        )}
+      </TooltipIconButton>
+    </ActionBarPrimitive.Copy>
+  );
+});
+
+AssistantActionBarCopy.displayName = "AssistantActionBarCopy";
+
+const AssistantActionBarSpeechControl: FC = () => {
+  return (
+    <>
+      <MessagePrimitive.If speaking={false}>
+        <AssistantActionBarSpeak />
+      </MessagePrimitive.If>
+      <MessagePrimitive.If speaking>
+        <AssistantActionBarStopSpeaking />
+      </MessagePrimitive.If>
+    </>
+  );
+};
+
+namespace AssistantActionBarSpeak {
+  export type Element = ActionBarPrimitive.Speak.Element;
+  export type Props = Partial<TooltipIconButtonProps>;
+}
+
+const AssistantActionBarSpeak = forwardRef<
+  AssistantActionBarSpeak.Element,
+  AssistantActionBarSpeak.Props
+>((props, ref) => {
+  const {
+    strings: {
+      assistantMessage: { speak: { tooltip = "Read aloud" } = {} } = {},
+    } = {},
+  } = useThreadConfig();
+  const allowSpeak = useAllowSpeak();
+
+  return (
+    <ActionBarPrimitive.Speak disabled={!allowSpeak} asChild>
+      <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
+        {props.children ?? <AudioLinesIcon />}
+      </TooltipIconButton>
+    </ActionBarPrimitive.Speak>
+  );
+});
+
+AssistantActionBarSpeak.displayName = "AssistantActionBarSpeak";
+
+namespace AssistantActionBarStopSpeaking {
+  export type Element = ActionBarPrimitive.StopSpeaking.Element;
+  export type Props = Partial<TooltipIconButtonProps>;
+}
+
+const AssistantActionBarStopSpeaking = forwardRef<
+  AssistantActionBarStopSpeaking.Element,
+  AssistantActionBarStopSpeaking.Props
+>((props, ref) => {
+  const {
+    strings: {
+      assistantMessage: {
+        speak: { stop: { tooltip: stopTooltip = "Stop" } = {} } = {},
+      } = {},
+    } = {},
+  } = useThreadConfig();
+  const allowSpeak = useAllowSpeak();
+
+  return (
+    <ActionBarPrimitive.StopSpeaking disabled={!allowSpeak} asChild>
+      <TooltipIconButton tooltip={stopTooltip} {...props} ref={ref}>
+        {props.children ?? <StopCircleIcon />}
+      </TooltipIconButton>
+    </ActionBarPrimitive.StopSpeaking>
+  );
+});
+
+AssistantActionBarStopSpeaking.displayName = "AssistantActionBarStopSpeaking";
+
+namespace AssistantActionBarReload {
+  export type Element = ActionBarPrimitive.Reload.Element;
+  export type Props = Partial<TooltipIconButtonProps>;
+}
+
+const AssistantActionBarReload = forwardRef<
+  AssistantActionBarReload.Element,
+  AssistantActionBarReload.Props
+>((props, ref) => {
+  const {
+    strings: {
+      assistantMessage: { reload: { tooltip = "Refresh" } = {} } = {},
+    } = {},
+  } = useThreadConfig();
+  const allowReload = useAllowReload();
+  return (
+    <ActionBarPrimitive.Reload disabled={!allowReload} asChild>
+      <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
+        {props.children ?? <RefreshCwIcon />}
+      </TooltipIconButton>
+    </ActionBarPrimitive.Reload>
+  );
+});
+
+AssistantActionBarReload.displayName = "AssistantActionBarReload";
+
+namespace AssistantActionBarFeedbackPositive {
+  export type Element = ActionBarPrimitive.FeedbackPositive.Element;
+  export type Props = Partial<TooltipIconButtonProps>;
+}
+
+const AssistantActionBarFeedbackPositive = forwardRef<
+  AssistantActionBarFeedbackPositive.Element,
+  AssistantActionBarFeedbackPositive.Props
+>((props, ref) => {
+  const {
+    strings: {
+      assistantMessage: {
+        feedback: { positive: { tooltip = "Good response" } = {} } = {},
+      } = {},
+    } = {},
+  } = useThreadConfig();
+  const allowFeedbackPositive = useAllowFeedbackPositive();
+  return (
+    <ActionBarPrimitive.FeedbackPositive
+      disabled={!allowFeedbackPositive}
+      className="aui-assistant-action-bar-feedback-positive"
+      asChild
+    >
+      <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
+        {props.children ?? <ThumbsUpIcon />}
+      </TooltipIconButton>
+    </ActionBarPrimitive.FeedbackPositive>
+  );
+});
+
+AssistantActionBarFeedbackPositive.displayName =
+  "AssistantActionBarFeedbackPositive";
+
+namespace AssistantActionBarFeedbackNegative {
+  export type Element = ActionBarPrimitive.FeedbackNegative.Element;
+  export type Props = Partial<TooltipIconButtonProps>;
+}
+
+const AssistantActionBarFeedbackNegative = forwardRef<
+  AssistantActionBarFeedbackNegative.Element,
+  AssistantActionBarFeedbackNegative.Props
+>((props, ref) => {
+  const {
+    strings: {
+      assistantMessage: {
+        feedback: { negative: { tooltip = "Bad response" } = {} } = {},
+      } = {},
+    } = {},
+  } = useThreadConfig();
+  const allowFeedbackNegative = useAllowFeedbackNegative();
+  return (
+    <ActionBarPrimitive.FeedbackNegative
+      disabled={!allowFeedbackNegative}
+      className="aui-assistant-action-bar-feedback-negative"
+      asChild
+    >
+      <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
+        {props.children ?? <ThumbsDownIcon />}
+      </TooltipIconButton>
+    </ActionBarPrimitive.FeedbackNegative>
+  );
+});
+
+AssistantActionBarFeedbackNegative.displayName =
+  "AssistantActionBarFeedbackNegative";
+
+const exports = {
+  Root: AssistantActionBarRoot,
+  Reload: AssistantActionBarReload,
+  Copy: AssistantActionBarCopy,
+  Speak: AssistantActionBarSpeak,
+  StopSpeaking: AssistantActionBarStopSpeaking,
+  SpeechControl: AssistantActionBarSpeechControl,
+  FeedbackPositive: AssistantActionBarFeedbackPositive,
+  FeedbackNegative: AssistantActionBarFeedbackNegative,
+};
+
+export default Object.assign(
+  AssistantActionBar,
+  exports,
+) as typeof AssistantActionBar & typeof exports;

package/src/ui/assistant-message.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { ComponentPropsWithoutRef, forwardRef, useMemo, type FC } from "react";
+import { MessagePrimitive } from "../primitives";
+import BranchPicker from "./branch-picker";
+import { Avatar } from "./base/avatar";
+import { withDefaults } from "./utils/withDefaults";
+import { useThreadConfig } from "./thread-config";
+import AssistantActionBar from "./assistant-action-bar";
+import ContentPart from "./content-part";
+
+const AssistantMessage: FC = () => {
+  return (
+    <AssistantMessageRoot>
+      <AssistantMessageAvatar />
+      <AssistantMessageContent />
+      <BranchPicker />
+      <AssistantActionBar />
+    </AssistantMessageRoot>
+  );
+};
+
+AssistantMessage.displayName = "AssistantMessage";
+
+const AssistantMessageAvatar: FC = () => {
+  const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
+  return <Avatar {...avatar} />;
+};
+
+const AssistantMessageRoot = withDefaults(MessagePrimitive.Root, {
+  className: "aui-assistant-message-root",
+});
+
+AssistantMessageRoot.displayName = "AssistantMessageRoot";
+
+const AssistantMessageContentWrapper = withDefaults("div", {
+  className: "aui-assistant-message-content",
+});
+
+/**
+ * @deprecated Use `AssistantMessage.Content.Props` instead. This will be removed in 0.6.
+ */
+export type AssistantMessageContentProps = AssistantMessageContent.Props;
+
+namespace AssistantMessageContent {
+  export type Element = HTMLDivElement;
+  export type Props = MessagePrimitive.Content.Props &
+    ComponentPropsWithoutRef<"div">;
+}
+
+const AssistantMessageContent = forwardRef<
+  AssistantMessageContent.Element,
+  AssistantMessageContent.Props
+>(({ components: componentsProp, ...rest }, ref) => {
+  const { tools, assistantMessage: { components = {} } = {} } =
+    useThreadConfig();
+
+  const toolsComponents = useMemo(
+    () => ({
+      by_name: !tools
+        ? undefined
+        : Object.fromEntries(
+            tools.map((t) => [
+              t.unstable_tool.toolName,
+              t.unstable_tool.render,
+            ]),
+          ),
+      Fallback: components.ToolFallback,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...(tools ?? []), components.ToolFallback],
+  );
+
+  return (
+    <AssistantMessageContentWrapper {...rest} ref={ref}>
+      <MessagePrimitive.Content
+        components={{
+          ...componentsProp,
+          Text: componentsProp?.Text ?? components.Text ?? ContentPart.Text,
+          tools: toolsComponents,
+        }}
+      />
+    </AssistantMessageContentWrapper>
+  );
+});
+
+AssistantMessageContent.displayName = "AssistantMessageContent";
+
+const exports = {
+  Root: AssistantMessageRoot,
+  Avatar: AssistantMessageAvatar,
+  Content: AssistantMessageContent,
+};
+
+export default Object.assign(
+  AssistantMessage,
+  exports,
+) as typeof AssistantMessage & typeof exports;

package/src/ui/assistant-modal.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { type FC, forwardRef } from "react";
+import { BotIcon, ChevronDownIcon } from "lucide-react";
+
+import { AssistantModalPrimitive } from "../primitives";
+import Thread from "./thread";
+import { withDefaults } from "./utils/withDefaults";
+import {
+  TooltipIconButton,
+  TooltipIconButtonProps,
+} from "./base/tooltip-icon-button";
+import {
+  ThreadConfig,
+  ThreadConfigProvider,
+  ThreadConfigProviderProps,
+  useThreadConfig,
+} from "./thread-config";
+
+const AssistantModal: FC<ThreadConfig> = (config) => {
+  return (
+    <AssistantModalRoot config={config}>
+      <AssistantModalTrigger />
+      <AssistantModalContent>
+        <Thread />
+      </AssistantModalContent>
+    </AssistantModalRoot>
+  );
+};
+
+AssistantModal.displayName = "AssistantModal";
+
+namespace AssistantModalRoot {
+  export type Props = AssistantModalPrimitive.Root.Props &
+    ThreadConfigProviderProps;
+}
+
+const AssistantModalRoot: FC<AssistantModalRoot.Props> = ({
+  config,
+  ...props
+}) => {
+  return (
+    <ThreadConfigProvider config={config}>
+      <AssistantModalPrimitive.Root {...props} />
+    </ThreadConfigProvider>
+  );
+};
+
+AssistantModalRoot.displayName = "AssistantModalRoot";
+
+namespace AssistantModalTrigger {
+  export type Element = HTMLButtonElement;
+  export type Props = Partial<TooltipIconButtonProps>;
+}
+
+const AssistantModalTrigger = forwardRef<
+  AssistantModalTrigger.Element,
+  AssistantModalTrigger.Props
+>((props, ref) => {
+  return (
+    <AssistantModalAnchor>
+      <AssistantModalPrimitive.Trigger asChild>
+        <AssistantModalButton {...props} ref={ref} />
+      </AssistantModalPrimitive.Trigger>
+    </AssistantModalAnchor>
+  );
+});
+
+AssistantModalTrigger.displayName = "AssistantModalTrigger";
+
+const AssistantModalAnchor = withDefaults(AssistantModalPrimitive.Anchor, {
+  className: "aui-root aui-modal-anchor",
+});
+
+AssistantModalAnchor.displayName = "AssistantModalAnchor";
+
+const ModalButtonStyled = withDefaults(TooltipIconButton, {
+  variant: "default",
+  className: "aui-modal-button",
+});
+
+namespace AssistantModalButton {
+  export type Element = HTMLButtonElement;
+  export type Props = Partial<TooltipIconButtonProps> & {
+    "data-state"?: "open" | "closed";
+  };
+}
+
+const AssistantModalButton = forwardRef<
+  AssistantModalButton.Element,
+  AssistantModalButton.Props
+>(({ "data-state": state, ...rest }, ref) => {
+  const {
+    strings: {
+      assistantModal: {
+        open: {
+          button: { tooltip: openTooltip = "Close Assistant" } = {},
+        } = {},
+        closed: {
+          button: { tooltip: closedTooltip = "Open Assistant" } = {},
+        } = {},
+      } = {},
+    } = {},
+  } = useThreadConfig();
+  const tooltip = state === "open" ? openTooltip : closedTooltip;
+
+  return (
+    <ModalButtonStyled
+      side="left"
+      tooltip={tooltip}
+      data-state={state}
+      {...rest}
+      ref={ref}
+    >
+      {rest.children ?? (
+        <>
+          <BotIcon
+            data-state={state}
+            className="aui-modal-button-closed-icon"
+          />
+          <ChevronDownIcon
+            data-state={state}
+            className="aui-modal-button-open-icon"
+          />
+        </>
+      )}
+    </ModalButtonStyled>
+  );
+});
+
+AssistantModalButton.displayName = "AssistantModalButton";
+
+const AssistantModalContent = withDefaults(AssistantModalPrimitive.Content, {
+  className: "aui-root aui-modal-content",
+  sideOffset: 16,
+});
+
+AssistantModalContent.displayName = "AssistantModalContent";
+
+const exports = {
+  Root: AssistantModalRoot,
+  Trigger: AssistantModalTrigger,
+  Content: AssistantModalContent,
+  Button: AssistantModalButton,
+  Anchor: AssistantModalAnchor,
+};
+
+export default Object.assign(AssistantModal, exports) as typeof AssistantModal &
+  typeof exports;