coral-web: enabled data sources and tools in composer

src/interfaces/coral_web/src/components/Configuration/Files/Files.tsx

@@ -1,10 +1,10 @@
 import { Fragment, useEffect, useMemo } from 'react';
 
 import { ListFile } from '@/cohere-client';
-import { Text, Tooltip } from '@/components/Shared';
+import { Checkbox, Text, Tooltip } from '@/components/Shared';
 import { useFocusFileInput } from '@/hooks/actions';
-import { useFilesInConversation } from '@/hooks/files';
-import { useParamsStore } from '@/stores';
+import { useDefaultFileLoaderTool, useFilesInConversation } from '@/hooks/files';
+import { useFilesStore, useParamsStore } from '@/stores';
 import { cn, formatFileSize, getWeeksAgo } from '@/utils';
 
 export interface UploadedFile extends ListFile {
@@ -17,9 +17,15 @@ export interface UploadedFile extends ListFile {
 const Files: React.FC = () => {
   const {
     params: { fileIds },
+    setParams,
   } = useParamsStore();
+  const {
+    files: { composerFiles },
+    deleteComposerFile,
+  } = useFilesStore();
   const { isFileInputQueuedToFocus, focusFileInput } = useFocusFileInput();
   const { files } = useFilesInConversation();
+  const { enableDefaultFileLoaderTool } = useDefaultFileLoaderTool();
 
   useEffect(() => {
     if (isFileInputQueuedToFocus) {
@@ -56,6 +62,24 @@ const Files: React.FC = () => {
     return groupedFiles;
   }, {});
 
+  const handleToggle = (fileId?: string) => {
+    if (!fileId) return;
+
+    let newFileIds: string[] = [];
+    if (fileIds?.some((id) => id === fileId)) {
+      newFileIds = fileIds.filter((id) => id !== fileId);
+
+      if (composerFiles.some((file) => file.id === fileId)) {
+        deleteComposerFile(fileId);
+      }
+    } else {
+      newFileIds = [...(fileIds ?? []), fileId];
+    }
+
+    enableDefaultFileLoaderTool();
+    setParams({ fileIds: newFileIds });
+  };
+
   return (
     <div className="flex w-full flex-col gap-y-6">
       {uploadedFiles.length > 0 && (
@@ -69,11 +93,21 @@ const Files: React.FC = () => {
                       {title}
                     </Text>
                     {dateGroupedUploadedFiles[title].map(
-                      ({ file_name: name, file_size: size, id }) => (
+                      ({ file_name: name, file_size: size, id, checked }) => (
                         <div key={id} className="group flex w-full flex-col gap-y-2">
                           <div className="flex w-full items-center justify-between gap-x-2">
-                            <div className={cn('flex w-[60%] lg:w-[70%]')}>
-                              <Text className="ml-0 w-full truncate">{name || ''}</Text>
+                            <div className={cn('flex w-[60%] overflow-hidden lg:w-[70%]')}>
+                              <Checkbox
+                                checked={checked}
+                                onChange={() => handleToggle(id)}
+                                label={name}
+                                name={name}
+                                theme="secondary"
+                                className="w-full"
+                                labelClassName="ml-0 truncate w-full"
+                                labelSubContainerClassName="w-full"
+                                labelContainerClassName="w-full"
+                              />
                             </div>
                             <div className="flex h-5 w-32 grow items-center justify-end gap-x-1">
                               <Text styleAs="caption" className="text-volcanic-700">

src/interfaces/coral_web/src/components/Configuration/Tools.tsx

@@ -1,5 +1,5 @@
 import { uniq } from 'lodash';
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import { Tool } from '@/cohere-client';
 import { FilesSection } from '@/components/Configuration/Files';
@@ -65,7 +65,7 @@ const ToolSection = () => {
     updateEnabledTools(updatedTools);
   };
 
-  const onToolToggle = (name: string, checked: boolean) => {
+  const handleToolToggle = (name: string, checked: boolean) => {
     const updatedTools = checked
       ? [...enabledTools, { name }]
       : enabledTools.filter((enabledTool) => enabledTool.name !== name);
@@ -107,7 +107,7 @@ const ToolSection = () => {
                   <Checkbox
                     checked={checked}
                     onChange={(e) => {
-                      onToolToggle(name, e.target.checked);
+                      handleToolToggle(name, e.target.checked);
                     }}
                     label={name}
                     name={name}

src/interfaces/coral_web/src/components/Conversation/Composer/ComposerError.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { FileError } from '@/components/FileError';
+import { useFilesStore } from '@/stores';
+import { cn } from '@/utils';
+
+/**
+ * @description Renders an error message under the composer. Right now it is only for file upload
+ * errors.
+ */
+export const ComposerError: React.FC<{ className?: string }> = ({ className = '' }) => {
+  const {
+    files: { uploadingFiles },
+  } = useFilesStore();
+  const latestFile = uploadingFiles[uploadingFiles.length - 1];
+
+  return (
+    <FileError
+      error={latestFile?.error}
+      file={latestFile?.file}
+      className={cn('min-h-[14px]', className)}
+    />
+  );
+};

src/interfaces/coral_web/src/components/Conversation/Composer/ComposerFiles.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { MessageFile } from '@/components/MessageFile';
+import { useFilesStore } from '@/stores';
+
+/**
+ * @description Displays files that have been prepared to be uploaded along with the next chat request
+ */
+export const ComposerFiles = () => {
+  const {
+    files: { composerFiles, uploadingFiles },
+    deleteUploadingFile,
+    deleteComposerFile,
+  } = useFilesStore();
+
+  const noErrorUploadingFiles = uploadingFiles.filter((document) => !document.error);
+
+  if (composerFiles.length === 0 && noErrorUploadingFiles.length === 0) return null;
+
+  return (
+    <div className="flex max-h-36 flex-wrap gap-2 overflow-scroll p-2">
+      {composerFiles.map((file, index) => (
+        <MessageFile
+          key={index}
+          hoverAnimation
+          name={file.file_name ?? ''}
+          size={file.file_size ?? 0}
+          className="w-48 md:w-60"
+          onDelete={() => deleteComposerFile(file.id ?? '')}
+        />
+      ))}
+      {noErrorUploadingFiles.map((document, index) => (
+        <MessageFile
+          key={index}
+          hoverAnimation
+          name={document.file.name ?? ''}
+          progress={document.progress}
+          className="w-48 md:w-60"
+          onDelete={() => deleteUploadingFile(document.id ?? '')}
+        />
+      ))}
+    </div>
+  );
+};

src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx

@@ -0,0 +1,46 @@
+import React, { useRef } from 'react';
+
+import { EnabledDataSources } from '@/components/Conversation/Composer/EnabledDataSources';
+import IconButton from '@/components/IconButton';
+import { IconName } from '@/components/Shared';
+import { ACCEPTED_FILE_TYPES } from '@/constants';
+import { cn } from '@/utils';
+
+type Props = {
+  onUploadFile: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const ComposerToolbar: React.FC<Props> = ({ onUploadFile }) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleOpenFileExplorer = () => {
+    if (!fileInputRef.current) return;
+    fileInputRef.current.click();
+  };
+
+  return (
+    <div className={cn('flex items-center gap-x-2', 'border-t border-marble-400', 'mx-2 py-2')}>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={ACCEPTED_FILE_TYPES.join('')}
+        className="hidden"
+        onChange={onUploadFile}
+      />
+      <ToolbarActionButton
+        tooltipLabel="Attach file (.PDF, .TXT Max 20 MB)"
+        icon="clip"
+        onClick={handleOpenFileExplorer}
+      />
+      <EnabledDataSources isStreaming={false} />
+    </div>
+  );
+};
+
+const ToolbarActionButton: React.FC<{
+  tooltipLabel: string;
+  icon: IconName;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}> = ({ tooltipLabel, icon, onClick }) => {
+  return <IconButton iconName={icon} tooltipLabel={tooltipLabel} onClick={onClick} size="sm" />;
+};