[LG-5527] feat(input-bar): add legal disclaimer text with link below input (#3147)

* refactor(input-bar): shared types, InputBarFeedback, and InputBarSendButton

* feat(input-bar): add DisclaimerText

* chore(input-bar): changeset

Author: stephl3

.changeset/sweet-eggs-wish.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/input-bar': minor
+---
+
+[LG-5527](https://jira.mongodb.org/browse/LG-5527): add legal disclaimer text with link below input

chat/input-bar/src/DisclaimerText/DisclaimerText.styles.ts

@@ -0,0 +1,5 @@
+import { css } from '@leafygreen-ui/emotion';
+
+export const linkStyles = css`
+  font-size: inherit;
+`;

chat/input-bar/src/DisclaimerText/DisclaimerText.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Disclaimer, Link } from '@leafygreen-ui/typography';
+
+import { linkStyles } from './DisclaimerText.styles';
+import { type DisclaimerTextProps } from './DisclaimerText.types';
+
+const DISCLAIMER_TEXT = 'AI can make mistakes, so review for accuracy.';
+const LEARN_MORE_TEXT = 'Learn more';
+const LEARN_MORE_URL = 'https://www.mongodb.com/docs/generative-ai-faq/';
+
+export const DisclaimerText = ({ className, ...rest }: DisclaimerTextProps) => (
+  <Disclaimer className={className} {...rest}>
+    {DISCLAIMER_TEXT}{' '}
+    <Link className={linkStyles} href={LEARN_MORE_URL}>
+      {LEARN_MORE_TEXT}
+    </Link>
+  </Disclaimer>
+);
+
+DisclaimerText.displayName = 'DisclaimerText';

chat/input-bar/src/DisclaimerText/DisclaimerText.types.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+export interface DisclaimerTextProps
+  extends Omit<ComponentPropsWithoutRef<'small'>, 'children'> {}

chat/input-bar/src/DisclaimerText/index.ts

@@ -0,0 +1 @@
+export { DisclaimerText } from './DisclaimerText';

chat/input-bar/src/InputBar/InputBar.spec.tsx

@@ -8,7 +8,8 @@ import userEvent from '@testing-library/user-event';
 
 import { transitionDuration } from '@leafygreen-ui/tokens';
 
-import { State } from './shared.types';
+import { State } from '../shared.types';
+
 import { InputBar, InputBarProps } from '.';
 
 const TEST_INPUT_TEXT = 'test';

chat/input-bar/src/InputBar/InputBar.styles.ts

@@ -321,3 +321,8 @@ export const getHotkeyIndicatorStyles = ({
     [hotkeyIndicatorFocusedStyles]: isFocused,
     [hotkeyIndicatorUnfocusedStyles]: !isFocused,
   });
+
+export const disclaimerTextStyles = css`
+  margin-top: ${spacing[50]}px;
+  margin-left: ${spacing[200]}px;
+`;

chat/input-bar/src/InputBar/InputBar.tsx

@@ -45,11 +45,16 @@ import {
 import { SearchResultsMenu } from '@leafygreen-ui/search-input';
 import { breakpoints } from '@leafygreen-ui/tokens';
 
+import { DisclaimerText } from '../DisclaimerText';
+import { InputBarFeedback } from '../InputBarFeedback';
+import { InputBarSendButton } from '../InputBarSendButton';
+import { State } from '../shared.types';
 import { setReactTextAreaValue } from '../utils/setReactTextAreaValue';
 
 import {
   actionContainerStyles,
   adornmentContainerStyles,
+  disclaimerTextStyles,
   getContentWrapperStyles,
   getFormStyles,
   getHotkeyIndicatorStyles,
@@ -58,9 +63,6 @@ import {
   outerFocusContainerStyles,
 } from './InputBar.styles';
 import { type InputBarProps } from './InputBar.types';
-import { InputBarFeedback } from './InputBarFeedback';
-import { InputBarSendButton } from './InputBarSendButton';
-import { State } from './shared.types';
 
 export const InputBar = forwardRef<HTMLFormElement, InputBarProps>(
   (
@@ -498,6 +500,7 @@ export const InputBar = forwardRef<HTMLFormElement, InputBarProps>(
               </div>
             </div>
           </div>
+          {isCompact && <DisclaimerText className={disclaimerTextStyles} />}
           {withTypeAhead && (
             <SearchResultsMenu
               open={isOpen}

chat/input-bar/src/InputBar/InputBar.types.ts

@@ -4,7 +4,7 @@ import { TextareaAutosizeProps } from 'react-textarea-autosize';
 import { DarkModeProps } from '@leafygreen-ui/lib';
 import { PopoverRenderModeProps } from '@leafygreen-ui/popover';
 
-import { SharedInputBarProps } from './shared.types';
+import { SharedInputBarProps } from '../shared.types';
 
 export type InputBarProps = React.ComponentPropsWithoutRef<'form'> &
   DarkModeProps &

chat/input-bar/src/InputBar/index.ts

@@ -5,4 +5,3 @@ export {
   type InputBarProps,
   type TextareaAutosizeProps,
 } from './InputBar.types';
-export { State } from './shared.types';