@databiosphere/findable-ui 49.0.0 → 49.2.0

package/src/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/types.ts

@@ -0,0 +1,10 @@
+import { KeyboardEvent, RefObject } from "react";
+
+export interface Refs {
+  draftRef: RefObject<string>;
+  historyIndexRef: RefObject<number>;
+}
+
+export interface UseKeyShortCutsProps {
+  onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+}

package/src/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/utils.ts

@@ -0,0 +1,93 @@
+import { KeyboardEvent } from "react";
+import { isUserMessage } from "../../../../../state/guards/guards";
+import { Message } from "../../../../../state/types";
+import { Refs } from "./types";
+import { KEY } from "./constants";
+
+/**
+ * Extracts the text of user messages from a list of messages and returns them in reverse order.
+ * @param messages - An array of Message objects to extract user messages from.
+ * @returns An array of strings containing the text of user messages, ordered from most recent to oldest.
+ */
+export function getHistory(messages: Message[]): string[] {
+  return messages
+    .filter(isUserMessage)
+    .map((message) => message.text)
+    .reverse();
+}
+
+/**
+ * Handles arrow up/down key presses to navigate through input history.
+ * @param e - The keyboard event.
+ * @param history - The history entries to navigate.
+ * @param refs - Refs for draft text and history index.
+ */
+export function handleArrowKey(
+  e: KeyboardEvent<HTMLInputElement>,
+  history: string[],
+  refs: Refs,
+): void {
+  const { draftRef, historyIndexRef } = refs;
+  const inputEl = e.currentTarget;
+
+  if (e.key === KEY.ARROW_DOWN && historyIndexRef.current === -1) {
+    return;
+  }
+
+  if (historyIndexRef.current === -1) {
+    draftRef.current = inputEl.value;
+  }
+
+  const currentIndex = historyIndexRef.current;
+  const newIndex =
+    e.key === KEY.ARROW_UP
+      ? Math.min(currentIndex + 1, history.length - 1)
+      : Math.max(currentIndex - 1, -1);
+
+  if (newIndex === -1) {
+    inputEl.value = draftRef.current;
+    historyIndexRef.current = -1;
+    return;
+  }
+
+  inputEl.value = history[newIndex] || "";
+  historyIndexRef.current = newIndex;
+}
+
+/**
+ * Handles the Enter key press to submit the form, or allows newline on Shift+Enter.
+ * @param e - The keyboard event.
+ */
+export function handleEnterKey(e: KeyboardEvent<HTMLInputElement>): void {
+  if (e.shiftKey) return;
+  e.preventDefault();
+  const formEl = e.currentTarget.form;
+  formEl?.requestSubmit();
+}
+
+/**
+ * Handles the Escape key press to clear the input and reset history navigation.
+ * @param e - The keyboard event.
+ * @param refs - Refs for draft text and history index.
+ */
+export function handleEscapeKey(
+  e: KeyboardEvent<HTMLInputElement>,
+  refs: Refs,
+): void {
+  const { draftRef, historyIndexRef } = refs;
+  const inputEl = e.currentTarget;
+  inputEl.value = "";
+  draftRef.current = "";
+  historyIndexRef.current = -1;
+}
+
+/**
+ * Handles the Tab key press to auto-fill the input with the placeholder.
+ * @param e - The keyboard event.
+ */
+export function handleTabKey(e: KeyboardEvent<HTMLInputElement>): void {
+  const inputEl = e.currentTarget;
+  if (inputEl.value) return;
+  e.preventDefault();
+  inputEl.value = inputEl.placeholder;
+}

package/src/views/ResearchView/assistant/components/Input/input.styles.ts

@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+import { RoundedPaper } from "../../../../../components/common/Paper/components/RoundedPaper/roundedPaper";
+import { Box } from "@mui/material";
+
+export const StyledBox = styled(Box)`
+  padding: 16px;
+`;
+
+export const StyledPaper = styled(RoundedPaper)`
+  display: flex;
+  flex-direction: column;
+
+  .MuiInputBase-root {
+    padding: 16px;
+  }
+
+  .MuiStack-root {
+    justify-content: flex-end;
+    padding: 8px;
+  }
+`;

package/src/views/ResearchView/assistant/components/Input/input.tsx

@@ -0,0 +1,37 @@
+import { IconButton, InputBase, Stack } from "@mui/material";
+import { JSX } from "react";
+import { INPUT_BASE_PROPS } from "./constants";
+import { StyledBox, StyledPaper } from "./input.styles";
+import { UpArrowIcon } from "../../../../../components/common/CustomIcon/components/UpArrowIcon/upArrowIcon";
+import { ICON_BUTTON_PROPS } from "../../../../../styles/common/mui/iconButton";
+import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
+import { STACK_PROPS } from "../../../../../styles/common/mui/stack";
+import { InputProps } from "./types";
+import { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
+
+/**
+ * Renders an input component for the research panel.
+ * @param props - Component props.
+ * @param props.disabled - Disabled state of the input, which is derived from the loading state of the query.
+ * @returns Research panel input component.
+ */
+export const Input = ({ disabled, ...props }: InputProps): JSX.Element => {
+  const { onKeyDown } = useKeyShortCuts();
+  return (
+    <StyledBox>
+      <StyledPaper elevation={0}>
+        <InputBase {...INPUT_BASE_PROPS} onKeyDown={onKeyDown} {...props} />
+        <Stack direction={STACK_PROPS.DIRECTION.ROW} gap={2}>
+          <IconButton
+            color={ICON_BUTTON_PROPS.COLOR.SECONDARY}
+            disabled={disabled}
+            size={ICON_BUTTON_PROPS.SIZE.XSMALL}
+            type="submit"
+          >
+            <UpArrowIcon fontSize={SVG_ICON_PROPS.FONT_SIZE.SMALL} />
+          </IconButton>
+        </Stack>
+      </StyledPaper>
+    </StyledBox>
+  );
+};

package/src/views/ResearchView/assistant/components/Input/stories/input.stories.tsx

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from "@storybook/nextjs-vite";
+import { Input } from "../input";
+import { Box } from "@mui/material";
+import { JSX } from "react";
+
+const meta: Meta<typeof Input> = {
+  component: Input,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box sx={{ width: "412px" }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/views/ResearchView/assistant/components/Input/types.ts

@@ -0,0 +1,3 @@
+import { IconButtonProps, InputBaseProps } from "@mui/material";
+
+export type InputProps = InputBaseProps & Pick<IconButtonProps, "disabled">;

package/src/views/ResearchView/assistant/components/Input/utils.ts

@@ -0,0 +1,34 @@
+import {
+  ChatState,
+  Message,
+  MESSAGE_TYPE,
+  PromptMessage,
+} from "../../../state/types";
+
+/**
+ * Gets the placeholder text for the input field based on the chat state.
+ * If there are no messages, it returns a default prompt. If there are messages,
+ * it looks for the last prompt message and uses its input prefill as the placeholder.
+ * @param state - The current state of the chat.
+ * @returns The placeholder text for the input field.
+ */
+export function getPlaceholder(state: ChatState): string {
+  if (state.messages.length === 0) return "Ask anything";
+
+  // Reverse messages, last is the latest.
+  const messages = [...state.messages].reverse();
+
+  // Find the last prompt message to use its input prefill as placeholder.
+  const lastPrompt = messages.find(isPromptMessage);
+
+  return lastPrompt?.inputPlaceholder || "Ask anything";
+}
+
+/**
+ * Type guard to check if a message is a PromptMessage.
+ * @param message - The message to check.
+ * @returns True if the message is a PromptMessage, false otherwise.
+ */
+function isPromptMessage(message: Message): message is PromptMessage {
+  return message.type === MESSAGE_TYPE.PROMPT;
+}

package/src/views/ResearchView/assistant/components/Messages/components/AssistantMessage/assistantMessage.tsx

@@ -0,0 +1,49 @@
+import { Stack, Typography } from "@mui/material";
+import { JSX } from "react";
+import { AssistantMessageProps } from "./types";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+import { getMappings, getMentions } from "./utils";
+
+/**
+ * Renders an assistant message.
+ * @param props - Component props.
+ * @param props.message - Assistant message.
+ * @returns The assistant message element.
+ */
+export const AssistantMessage = ({
+  message,
+}: AssistantMessageProps): JSX.Element => {
+  const mentions = getMentions(message);
+  const mappings = getMappings(message);
+  return (
+    <Stack gap={2} useFlexGap>
+      {message.response.message && (
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+          {message.response.message}
+        </Typography>
+      )}
+      {mentions && (
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}>
+          <Typography
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500}
+          >
+            Extracted mentions:
+          </Typography>{" "}
+          {mentions}
+        </Typography>
+      )}
+      {mappings && (
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}>
+          <Typography
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500}
+          >
+            Extracted mappings:
+          </Typography>{" "}
+          {mappings}
+        </Typography>
+      )}
+    </Stack>
+  );
+};

package/src/views/ResearchView/assistant/components/Messages/components/AssistantMessage/types.ts

@@ -0,0 +1,5 @@
+import { AssistantMessage } from "../../../../../state/types";
+
+export interface AssistantMessageProps {
+  message: AssistantMessage;
+}

package/src/views/ResearchView/assistant/components/Messages/components/AssistantMessage/utils.ts

@@ -0,0 +1,31 @@
+import { AssistantMessage } from "../../../../../state/types";
+
+/**
+ * Formats mention mappings from an assistant message as a readable string.
+ * @param message - Assistant message containing response mentions.
+ * @returns Formatted facet-value mappings separated by slashes, or empty string if no mentions.
+ */
+export function getMappings(message: AssistantMessage): string {
+  const mappings = message.response.query.mentions.reduce<
+    Record<string, string[]>
+  >((acc, m) => {
+    const key = m.exclude ? `${m.facet} (exclude)` : m.facet;
+    acc[key] = [...(acc[key] || []), ...m.values];
+    return acc;
+  }, {});
+
+  return Object.entries(mappings)
+    .map(([facet, values]) => `${facet}: ${values.join(", ")}`)
+    .join(" / ");
+}
+
+/**
+ * Extracts original mention text from an assistant message.
+ * @param message - Assistant message containing response mentions.
+ * @returns Comma-separated original mention text, or empty string if no mentions.
+ */
+export function getMentions(message: AssistantMessage): string {
+  return message.response.query.mentions
+    .map((mention) => mention.originalText)
+    .join(", ");
+}

package/src/views/ResearchView/assistant/components/Messages/components/ErrorMessage/errorMessage.tsx

@@ -0,0 +1,21 @@
+import { Typography } from "@mui/material";
+import { JSX } from "react";
+import { ErrorMessageProps } from "./types";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+
+/**
+ * Renders an error message.
+ * @param props - Component props.
+ * @param props.message - Error message.
+ * @returns The error message element.
+ */
+export const ErrorMessage = ({ message }: ErrorMessageProps): JSX.Element => {
+  return (
+    <Typography
+      color={TYPOGRAPHY_PROPS.COLOR.ERROR}
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
+    >
+      {message.error}
+    </Typography>
+  );
+};

package/src/views/ResearchView/assistant/components/Messages/components/ErrorMessage/types.ts

@@ -0,0 +1,5 @@
+import { ErrorMessage } from "../../../../../state/types";
+
+export interface ErrorMessageProps {
+  message: ErrorMessage;
+}

package/src/views/ResearchView/assistant/components/Messages/components/PromptMessage/components/Chips/chips.styles.ts

@@ -0,0 +1,27 @@
+import { Stack } from "@mui/material";
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
+
+export const StyledStack = styled(Stack)`
+  align-items: flex-start;
+
+  .MuiChip-root {
+    background-color: ${PALETTE.COMMON_WHITE};
+    border-color: ${PALETTE.SMOKE_MAIN};
+    color: ${PALETTE.INK_MAIN};
+    height: unset;
+    padding: 8px 12px;
+
+    &.MuiChip-clickable:hover {
+      background-color: transparent;
+    }
+
+    &:active {
+      box-shadow: none;
+    }
+
+    .MuiChip-label {
+      padding: 0;
+    }
+  }
+`;

package/src/views/ResearchView/assistant/components/Messages/components/PromptMessage/components/Chips/chips.tsx

@@ -0,0 +1,31 @@
+import { JSX } from "react";
+import { ChipsProps } from "./types";
+import { Chip } from "@mui/material";
+import { CHIP_PROPS } from "../../../../../../../../../styles/common/mui/chip";
+import { StyledStack } from "./chips.styles";
+
+export const Chips = ({
+  className,
+  message,
+}: ChipsProps): JSX.Element | null => {
+  const suggestions = message.suggestions;
+
+  if (!suggestions || suggestions.length === 0) return null;
+
+  return (
+    <StyledStack className={className} gap={2} useFlexGap>
+      {suggestions.map((suggestion) => (
+        <Chip
+          key={`${suggestion.label}-${suggestion.query}`}
+          clickable
+          color={CHIP_PROPS.COLOR.SECONDARY}
+          component="button"
+          data-query={suggestion.query}
+          label={suggestion.label}
+          type="submit"
+          variant={CHIP_PROPS.VARIANT.OUTLINED}
+        />
+      ))}
+    </StyledStack>
+  );
+};

package/src/views/ResearchView/assistant/components/Messages/components/PromptMessage/components/Chips/types.ts

@@ -0,0 +1,6 @@
+import { BaseComponentProps } from "../../../../../../../../../components/types";
+import { PromptMessage } from "../../../../../../../state/types";
+
+export interface ChipsProps extends BaseComponentProps {
+  message: PromptMessage;
+}

package/src/views/ResearchView/assistant/components/Messages/components/PromptMessage/promptMessage.tsx

@@ -0,0 +1,26 @@
+import { Stack, Typography } from "@mui/material";
+import { JSX } from "react";
+import { PromptMessageProps } from "./types";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+import { Chips } from "./components/Chips/chips";
+
+/**
+ * Renders a prompt message, and chip suggestions if present (and if it's the last message).
+ * @param props - Component props.
+ * @param props.isLast - Whether message is the last.
+ * @param props.message - Prompt message.
+ * @returns The prompt message element.
+ */
+export const PromptMessage = ({
+  isLast,
+  message,
+}: PromptMessageProps): JSX.Element => {
+  return (
+    <Stack gap={4} useFlexGap>
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+        {message.text}
+      </Typography>
+      {isLast && <Chips message={message} />}
+    </Stack>
+  );
+};

package/src/views/ResearchView/assistant/components/Messages/components/PromptMessage/types.ts

@@ -0,0 +1,6 @@
+import { PromptMessage } from "../../../../../state/types";
+
+export interface PromptMessageProps {
+  isLast: boolean;
+  message: PromptMessage;
+}

package/src/views/ResearchView/assistant/components/Messages/components/UserMessage/types.ts

@@ -0,0 +1,5 @@
+import { UserMessage } from "../../../../../state/types";
+
+export interface UserMessageProps {
+  message: UserMessage;
+}

package/src/views/ResearchView/assistant/components/Messages/components/UserMessage/useMessage.styles.ts

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { RoundedPaper } from "../../../../../../../components/common/Paper/components/RoundedPaper/roundedPaper";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+
+export const StyledRoundedPaper = styled(RoundedPaper)`
+  align-self: flex-end;
+  background-color: ${PALETTE.SMOKE_MAIN};
+  max-width: 332px;
+  min-height: fit-content;
+  padding: 8px 12px;
+`;

package/src/views/ResearchView/assistant/components/Messages/components/UserMessage/userMessage.tsx

@@ -0,0 +1,21 @@
+import { Typography } from "@mui/material";
+import { JSX } from "react";
+import { UserMessageProps } from "./types";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+import { StyledRoundedPaper } from "./useMessage.styles";
+
+/**
+ * Renders a user message.
+ * @param props - Component props.
+ * @param props.message - User message.
+ * @returns The user message element.
+ */
+export const UserMessage = ({ message }: UserMessageProps): JSX.Element => {
+  return (
+    <StyledRoundedPaper elevation={0}>
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+        {message.text}
+      </Typography>
+    </StyledRoundedPaper>
+  );
+};

package/src/views/ResearchView/assistant/components/Messages/hooks/UseScroll/hook.ts

@@ -0,0 +1,25 @@
+import { DependencyList, RefObject, useEffect, useRef } from "react";
+
+/**
+ * Provides a ref that scrolls to the bottom when dependencies change.
+ * Uses instant scroll on mount and smooth scroll on subsequent updates.
+ * @param deps - Dependency list that triggers scroll on change.
+ * @returns A ref to attach to the scrollable container.
+ */
+export function useScroll(
+  deps: DependencyList,
+): RefObject<HTMLDivElement | null> {
+  const behaviorRef = useRef<ScrollBehavior>("instant");
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    ref.current?.scrollTo({
+      behavior: behaviorRef.current,
+      top: ref.current.scrollHeight,
+    });
+    behaviorRef.current = "smooth";
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- deps are passed in as an argument
+  }, deps);
+
+  return ref;
+}

package/src/views/ResearchView/assistant/components/Messages/messages.styles.ts

@@ -0,0 +1,10 @@
+import { Stack } from "@mui/material";
+import styled from "@emotion/styled";
+
+export const StyledStack = styled(Stack)`
+  flex: 1;
+  gap: 24px;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  padding: 16px;
+`;

package/src/views/ResearchView/assistant/components/Messages/messages.tsx

@@ -0,0 +1,29 @@
+import { JSX } from "react";
+import { StyledStack } from "./messages.styles";
+import { MessagesProps } from "./types";
+import { MessageSelector } from "./selector/messageSelector";
+import { useScroll } from "./hooks/UseScroll/hook";
+
+/**
+ * Renders chat messages, delegating each to the message selector.
+ * @param props - Component props.
+ * @param props.state - Chat state.
+ * @returns The messages list element.
+ */
+export const Messages = ({ state }: MessagesProps): JSX.Element | null => {
+  const ref = useScroll([state.messages]);
+
+  if (state.messages.length === 0) return null;
+
+  return (
+    <StyledStack ref={ref} useFlexGap>
+      {state.messages.map((message, index) => (
+        <MessageSelector
+          key={message.createdAt}
+          isLast={index === state.messages.length - 1}
+          message={message}
+        />
+      ))}
+    </StyledStack>
+  );
+};

package/src/views/ResearchView/assistant/components/Messages/selector/messageSelector.tsx

@@ -0,0 +1,37 @@
+import { JSX } from "react";
+import { MESSAGE_TYPE } from "../../../../state/types";
+import { AssistantMessage } from "../components/AssistantMessage/assistantMessage";
+import { ErrorMessage } from "../components/ErrorMessage/errorMessage";
+import { PromptMessage } from "../components/PromptMessage/promptMessage";
+import { UserMessage } from "../components/UserMessage/userMessage";
+import { MessageSelectorProps } from "./types";
+
+/**
+ * Selects and renders the appropriate message component based on message type.
+ *
+ * Available types:
+ * - `ASSISTANT`: Displays assistant messages.
+ * - `ERROR`: Displays error messages.
+ * - `PROMPT`: Displays prompt messages.
+ * - `USER`: Displays user messages.
+ *
+ * @param props - Component props.
+ * @param props.isLast - Indicates if the message is the last one in the chat.
+ * @param props.message - Chat message.
+ * @returns The selected message component.
+ */
+export const MessageSelector = ({
+  isLast,
+  message,
+}: MessageSelectorProps): JSX.Element => {
+  switch (message.type) {
+    case MESSAGE_TYPE.ASSISTANT:
+      return <AssistantMessage message={message} />;
+    case MESSAGE_TYPE.ERROR:
+      return <ErrorMessage message={message} />;
+    case MESSAGE_TYPE.PROMPT:
+      return <PromptMessage isLast={isLast} message={message} />;
+    case MESSAGE_TYPE.USER:
+      return <UserMessage message={message} />;
+  }
+};

package/src/views/ResearchView/assistant/components/Messages/selector/types.ts

@@ -0,0 +1,6 @@
+import { Message } from "../../../../state/types";
+
+export interface MessageSelectorProps {
+  isLast: boolean;
+  message: Message;
+}