@databiosphere/findable-ui 48.1.0 → 49.1.0

package/src/views/ResearchView/assistant/components/Form/form.tsx

@@ -0,0 +1,55 @@
+import { JSX } from "react";
+import { TEST_IDS } from "../../../../../tests/testIds";
+import { useChatDispatch } from "../../../state/hooks/UseChatDispatch/hook";
+import { MessageResponse } from "../../../state/types";
+import { FIELD_NAME } from "./constants";
+import { FormProps } from "./types";
+import { getPayload } from "./utils";
+import { StyledForm } from "./form.styles";
+
+/**
+ * Renders the research form.
+ * @param props - Component props.
+ * @param props.actions - Form actions.
+ * @param props.children - Form children.
+ * @param props.className - Class name for styling.
+ * @param props.status - Form status.
+ * @returns The research form container element.
+ */
+export const Form = ({
+  actions,
+  children,
+  className,
+  status,
+}: FormProps): JSX.Element => {
+  const dispatch = useChatDispatch();
+  return (
+    <StyledForm
+      className={className}
+      data-testid={TEST_IDS.RESEARCH_FORM}
+      onSubmit={async (e) => {
+        await actions.onSubmit(e, getPayload(e), {
+          onError: (error) => {
+            dispatch.onSetError(error.message);
+          },
+          onMutate: (form, query) => {
+            dispatch.onSetQuery(query);
+            dispatch.onSetStatus(true);
+            form.reset();
+          },
+          onSettled: (form) => {
+            dispatch.onSetStatus(false);
+            const input = form.elements.namedItem(FIELD_NAME.AI_PROMPT);
+            if (input instanceof HTMLElement) input.focus();
+          },
+          onSuccess: (data) => {
+            dispatch.onSetMessage(data as MessageResponse);
+          },
+          status,
+        });
+      }}
+    >
+      {children}
+    </StyledForm>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { UseQuery } from "../../../query/types";
+import {
+  BaseComponentProps,
+  ChildrenProps,
+} from "../../../../../components/types";
+import { ChatState } from "../../../state/types";
+
+export type FormProps = BaseComponentProps &
+  ChildrenProps &
+  Pick<UseQuery, "actions"> &
+  Pick<ChatState, "status">;

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

@@ -0,0 +1,51 @@
+import { FormEvent } from "react";
+import { FIELD_NAME } from "./constants";
+import { OnSubmitPayload } from "../../../query/types";
+
+/**
+ * Extracts and trims form values from a form element.
+ * @param form - Form element.
+ * @returns An object mapping form field names to their trimmed string values.
+ */
+export const getFormValues = (
+  form: HTMLFormElement,
+): Record<string, string> => {
+  const formData = new FormData(form);
+
+  const values: Record<string, string> = {};
+  formData.forEach((value, key) => {
+    values[key] = value.toString().trim();
+  });
+
+  return values;
+};
+
+/**
+ * Returns the payload for the query form submission.
+ * If the submitter has a data-query attribute (e.g. a suggestion chip), uses that as the query.
+ * Otherwise, falls back to the form input value.
+ * @param e - Form event.
+ * @returns The payload object containing the query value.
+ */
+export const getPayload = (e: FormEvent<HTMLFormElement>): OnSubmitPayload => {
+  // Check for a query from the submitter's data-query attribute first
+  const query = getSubmitterQuery(e);
+
+  // The onSubmit handler will ignore empty queries which acts as a safeguard against empty data-query values.
+  if (query !== undefined) return { query };
+
+  // If no submitter query, fall back to form values
+  const formValues = getFormValues(e.currentTarget);
+  return { query: formValues[FIELD_NAME.AI_PROMPT] || "" };
+};
+
+/**
+ * Returns the query from the form submitter's data-query attribute, if present.
+ * @param e - Form event.
+ * @returns The query string, or undefined if the submitter has no data-query.
+ */
+function getSubmitterQuery(e: FormEvent<HTMLFormElement>): string | undefined {
+  const submitter = (e.nativeEvent as SubmitEvent).submitter;
+  // We should expect a defined value here if the submitter is a data-query element, but we trim it just in case.
+  return submitter?.dataset.query?.trim();
+}

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

@@ -0,0 +1,16 @@
+import { InputBaseProps } from "@mui/material";
+import { INPUT_BASE_PROPS as MUI_INPUT_BASE_PROPS } from "../../../../../styles/common/mui/inputBase";
+import { FIELD_NAME } from "../Form/constants";
+
+export const INPUT_BASE_PROPS: InputBaseProps = {
+  autoFocus: true,
+  color: MUI_INPUT_BASE_PROPS.COLOR.PRIMARY,
+  fullWidth: true,
+  inputProps: { autoComplete: "off", spellCheck: false },
+  margin: MUI_INPUT_BASE_PROPS.MARGIN.DENSE,
+  maxRows: 4,
+  minRows: 1,
+  multiline: true,
+  name: FIELD_NAME.AI_PROMPT,
+  placeholder: "Ask anything",
+};

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

@@ -0,0 +1,7 @@
+export const KEY = {
+  ARROW_DOWN: "ArrowDown",
+  ARROW_UP: "ArrowUp",
+  ENTER: "Enter",
+  ESCAPE: "Escape",
+  TAB: "Tab",
+} as const;

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

@@ -0,0 +1,45 @@
+import { KeyboardEvent, useCallback, useEffect, useRef } from "react";
+import { useChatState } from "../../../../../state/hooks/UseChatState/hook";
+import { KEY } from "./constants";
+import { UseKeyShortCutsProps } from "./types";
+import {
+  getHistory,
+  handleArrowKey,
+  handleEnterKey,
+  handleEscapeKey,
+  handleTabKey,
+} from "./utils";
+
+/**
+ * Provides a keydown handler that implements keyboard shortcuts for the assistant input.
+ * @returns An object containing the onKeyDown handler.
+ */
+export const useKeyShortCuts = (): UseKeyShortCutsProps => {
+  const { state } = useChatState();
+  const { messages } = state;
+
+  const history = getHistory(messages);
+
+  const draftRef = useRef<string>("");
+  const historyIndexRef = useRef<number>(-1);
+
+  useEffect(() => {
+    // Resets history navigation when messages change.
+    draftRef.current = "";
+    historyIndexRef.current = -1;
+  }, [messages]);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      const refs = { draftRef, historyIndexRef };
+      if (e.key === KEY.ENTER) return handleEnterKey(e);
+      if (e.key === KEY.ESCAPE) return handleEscapeKey(e, refs);
+      if (e.key === KEY.ARROW_UP || e.key === KEY.ARROW_DOWN)
+        return handleArrowKey(e, history, refs);
+      if (e.key === KEY.TAB) return handleTabKey(e);
+    },
+    [history],
+  );
+
+  return { onKeyDown };
+};

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;
+`;