coral-web: update first turn suggestions

[wujessica]

Description:

This PR adds in the new first turn suggestion design and prompts. It filters out prompts that use tools when all the tools it needs are not available.

Secondly, it fixes some behaviours to do with navigating between conversations and carrying over tools and files by properly resetting them. Specifically, between existing conversations and new conversations, we should always be resetting fileIds state since files are tied to conversations. tools should be reset between existing conversations since we do not currently save our last used tools in the conversation history so persisting them would be inaccurate and confusing BUT tools may be persisted across navigating from an existing conversation to a new one for convenience.

Untitled.mov

Screen.Recording.2024-06-17.at.3.27.42.PM.mov

AI Description

This PR makes changes to the Coral Web interface, specifically to the Avatar, CitationDocument, Files, Tools, Composer, ComposerError, ComposerFiles, ComposerToolbar, DragDropFileUploadOverlay, EnabledDataSources, ConversationListHeader, FileError, FirstTurnSuggestions, IconButton, MessageContent, MessageFile, StartModes, UploadedFile, and UploadingFile components.

• Avatar.tsx:
  • Exports BotAvatar as a React component.
• CitationDocument.tsx:
  • Removes the toLowerCase() method from the toolId prop in the CitationDocumentHeader and CitationDocumentSnippet components.
• Files.tsx:
  • Imports Checkbox and useDefaultFileLoaderTool from '@/components/Shared' and '@/hooks/files', respectively.
  • Adds setParams and composerFiles to the destructured object from useParamsStore.
  • Adds deleteComposerFile to the destructured object from useFilesStore.
  • Adds the handleToggle function, which updates the fileIds state based on the provided fileId.
• Tools.tsx:
  • Renames the onToolToggle function to handleToolToggle.
  • Updates the handleToolToggle function to use the new handleToggle function name.
• Composer.tsx:
  • Removes the entire file.
• ComposerError.tsx:
  • Adds a new file that imports React, FileError, useFilesStore, and cn from 'react', '@/components/FileError', '@/stores', and '@/utils', respectively.
  • Exports ComposerError as a React component that renders an error message for file upload errors.
• ComposerFiles.tsx:
  • Adds a new file that imports React, MessageFile, useFilesStore, and cn from 'react', '@/components/MessageFile', '@/stores', and '@/utils', respectively.
  • Exports ComposerFiles as a React component that displays files prepared for upload with the next chat request.
• ComposerToolbar.tsx:
  • Adds a new file that imports React, useRef, EnabledDataSources, IconButton, IconName, ACCEPTED_FILE_TYPES, and cn from 'react', '@/components/IconButton', '@/components/Shared', '@/constants', and '@/utils', respectively.
  • Exports ComposerToolbar as a React component that includes a file input field, a toolbar action button, and enabled data sources.
• DragDropFileUploadOverlay.tsx:
  • Adds a new file that imports React, DragDropFileInput, ACCEPTED_FILE_TYPES, useFocusFileInput, useSettingsStore, and cn from 'react', '@/components/Shared', '@/constants', '@/hooks/actions', '@/stores', and '@/utils', respectively.
  • Exports DragDropFileUploadOverlay as a React component that handles file uploads via drag and drop.
• EnabledDataSources.tsx:
  • Adds a new file that imports React, Icon, IconName, Text, useDefaultFileLoaderTool, useListFiles, useConversationStore, useFilesStore, useParamsStore, ConfigurableParams, and cn from 'react', '@/components/Shared', '@/constants', '@/hooks/files', '@/stores', '@/stores/slices/paramsSlice', and '@/utils', respectively.
  • Exports EnabledDataSources as a React component that renders enabled data sources in the composer toolbar.
• ConversationListHeader.tsx:
  • Updates the useCitationsStore, useConversationStore, and useSettingsStore imports to also include useParamsStore.
• FileError.tsx:
  • Adds a new file that imports React, useMemo, Text, and cn from 'react', '@/components/Shared', and '@/utils', respectively.
  • Exports FileError as a React component that renders an error message for file upload issues.
• FirstTurnSuggestions.tsx:
  • Adds a new file that imports React, useMemo, Transition, ButtonGroup, TOOL_CALCULATOR_ID, TOOL_INTERNET_SEARCH_ID, TOOL_PYTHON_INTERPRETER_ID, useListTools, useParamsStore, ConfigurableParams, and cn from 'react', '@headlessui/react', '@/components/ButtonGroup', '@/constants', '@/hooks/tools', '@/stores/slices/paramsSlice', and '@/utils', respectively.
  • Exports FirstTurnSuggestions as a React component that displays clickable suggestions for the user's first turn in the conversation.
• IconButton.tsx:
  • Updates the React, BasicButton, Icon, IconName, and cn imports to also include Target, Text, Tooltip, and cx from 'react', '@/components/Shared', and 'classnames', respectively.
  • Updates the Props interface to include an optional tooltipLabel and a size with a default value of `'md'.
  • Updates the IconButton component to include an optional tooltipLabel prop and to use cx for class name generation.
  • Wraps the iconButton element in a Tooltip component when a tooltipLabel is provided.
• MessageContent.tsx:
  • Updates the UploadedFile component to MessageFile.
• MessageFile.tsx:
  • Adds a new file that imports React, Icon, Skeleton, Text, cn, getFileExtension, and formatFileSize from 'react', '@/components/Shared', and '@/utils', respectively.
  • Exports MessageFile as a React component that renders a file card in a chat message or composer.
• StartModes.tsx:
  • Removes the entire file.
• UploadedFile.tsx:
  • Removes the entire file.
• UploadingFile.tsx:
  • Removes the entire file.