coral-web: enabled data sources and tools in composer

[wujessica]

Description:

Part 1 of moving composer usability changes to toolkit. This PR includes:

• showing enabled data sources from the composer and ability to deselect
• allowing file selection from the drawer
• IconButton UI updates like adding a tooltip

Note: there are some drawer selection inconsistencies (e.g. I added the logic to deselect all files if you remove it from the composer) that will be addressed when I port over the drawer changes in the next PR.

Screen.Recording.2024-06-13.at.2.59.50.PM.mov

AI Description

This PR makes changes to the UI components of the Coral web interface, specifically related to file uploading, configuration, and conversation.

Files

• Adds a handleToggle function to enable/disable the default file loader tool and update the list of file IDs.
• Updates the Files component to include a Checkbox for each file, allowing users to select/deselect files.
• Updates the UploadedFile component to include a checkbox and handle file selection.
• Introduces the ComposerError component to display file upload errors.
• Modifies the ComposerFiles component to use the MessageFile component for displaying files.
• Adds the DragDropFileUploadOverlay component to handle drag and drop file uploads.
• Creates the ComposerToolbar component to manage file uploads and data sources.
• Implements the EnabledDataSources component to render enabled data sources in the composer toolbar.
• Updates the Conversation component to include the ComposerToolbar and ComposerError components.
• Removes the isDragDropInputActive state and related drag and drop event handlers from the Conversation component.
• Updates the Conversation component to use the chatWindowRef for dynamic textarea height adjustment.

Configuration

• Updates the ConfigurationDrawer component to include a tooltip label for the close drawer icon button.

Conversation

• Updates the Composer component to include the ComposerError and ComposerToolbar components.
• Removes the ComposerMenu component and replaces it with the ComposerToolbar component.
• Adds the DragDropFileUploadOverlay component to handle drag and drop file uploads.
• Updates the handleKeyDown function to prevent sending messages when composing is in progress.
• Introduces the handleCompositionStart and handleCompositionEnd functions to manage composition events and update the textarea value.
• Updates the ComposerFiles component to filter out files with errors and display them separately.
• Removes the useFileActions hook and related file actions.
• Updates the Conversation component to use the chatWindowRef for dynamic height adjustment.

Other Changes

• Updates the IconButton component to include a tooltip label prop and render the tooltip using the Tooltip component.
• Updates the MessageContent component to use the MessageFile component for displaying files.
• Adds a new tooltip class to the tailwind configuration.

[misspia-cohere]

works as advertised ✅

question: how come disabling search_file from underneath the composer disables the file but doesn't do the same when disabled from the right side panel?

[wujessica]

works as advertised ✅

question: how come disabling search_file from underneath the composer disables the file but doesn't do the same when disabled from the right side panel?

Yea I mentioned it in the description but I wanted to keep the changes a bit more contained, will address when I port over the drawer changes!