update latest changes

frontend/src/components/ContextMenu.tsx

@@ -90,7 +90,7 @@ export default function ContextMenu({
       onClick={(e) => e.stopPropagation()}
     >
       <div
-        className="flex w-32 flex-col rounded-xl text-sm shadow-xl md:w-36 dark:bg-charleston-green-2 bg-lotion"
+        className="flex w-32 flex-col rounded-xl bg-lotion text-sm shadow-xl dark:bg-charleston-green-2 md:w-36"
         style={{ minWidth: '144px' }}
       >
         {options.map((option, index) => (
@@ -102,26 +102,22 @@ export default function ContextMenu({
               option.onClick(event);
               setIsOpen(false);
             }}
-            className={`
-              flex justify-start items-center gap-4 p-3
-              transition-colors duration-200 ease-in-out
-              ${index === 0 ? 'rounded-t-xl' : ''}
-              ${index === options.length - 1 ? 'rounded-b-xl' : ''}
-              ${
-                option.variant === 'danger'
-                  ? 'dark:text-red-2000 dark:hover:bg-charcoal-grey text-rosso-corsa hover:bg-bright-gray'
-                  : 'dark:text-bright-gray dark:hover:bg-charcoal-grey text-eerie-black hover:bg-bright-gray'
-              }
-            `}
+            className={`flex items-center justify-start gap-4 p-3 transition-colors duration-200 ease-in-out ${index === 0 ? 'rounded-t-xl' : ''} ${index === options.length - 1 ? 'rounded-b-xl' : ''} ${
+              option.variant === 'danger'
+                ? 'text-rosso-corsa hover:bg-bright-gray dark:text-red-2000 dark:hover:bg-charcoal-grey'
+                : 'text-eerie-black hover:bg-bright-gray dark:text-bright-gray dark:hover:bg-charcoal-grey'
+            } `}
           >
             {option.icon && (
-              <img
-                width={option.iconWidth || 16}
-                height={option.iconHeight || 16}
-                src={option.icon}
-                alt={option.label}
-                className={`cursor-pointer hover:opacity-75 ${option.iconClassName || ''}`}
-              />
+              <div className="flex w-4 justify-center">
+                <img
+                  width={option.iconWidth || 16}
+                  height={option.iconHeight || 16}
+                  src={option.icon}
+                  alt={option.label}
+                  className={`cursor-pointer hover:opacity-75 ${option.iconClassName || ''}`}
+                />
+              </div>
             )}
             <span>{option.label}</span>
           </button>

frontend/src/components/Dropdown.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import Arrow2 from '../assets/dropdown-arrow.svg';
 import Edit from '../assets/edit.svg';
 import Trash from '../assets/trash.svg';
@@ -9,6 +10,10 @@ function Dropdown({
   onSelect,
   size = 'w-32',
   rounded = 'xl',
+  buttonBackgroundColor = 'white',
+  buttonDarkBackgroundColor = 'transparent',
+  optionsBackgroundColor = 'white',
+  optionsDarkBackgroundColor = 'dark-charcoal',
   border = 'border-2',
   borderColor = 'silver',
   darkBorderColor = 'dim-gray',
@@ -17,6 +22,8 @@ function Dropdown({
   showDelete,
   onDelete,
   placeholder,
+  placeholderTextColor = 'gray-500',
+  darkPlaceholderTextColor = 'gray-400',
   contentSize = 'text-base',
 }: {
   options:
@@ -37,6 +44,10 @@ function Dropdown({
     | ((value: { value: number; description: string }) => void);
   size?: string;
   rounded?: 'xl' | '3xl';
+  buttonBackgroundColor?: string;
+  buttonDarkBackgroundColor?: string;
+  optionsBackgroundColor?: string;
+  optionsDarkBackgroundColor?: string;
   border?: 'border' | 'border-2';
   borderColor?: string;
   darkBorderColor?: string;
@@ -45,6 +56,8 @@ function Dropdown({
   showDelete?: boolean;
   onDelete?: (value: string) => void;
   placeholder?: string;
+  placeholderTextColor?: string;
+  darkPlaceholderTextColor?: string;
   contentSize?: string;
 }) {
   const dropdownRef = React.useRef<HTMLDivElement>(null);
@@ -71,7 +84,7 @@ function Dropdown({
     <div
       className={[
         typeof selectedValue === 'string'
-          ? 'relative mt-2'
+          ? 'relative'
           : 'relative align-middle',
         size,
       ].join(' ')}
@@ -79,7 +92,7 @@ function Dropdown({
     >
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-white px-5 py-3 dark:border-${darkBorderColor} dark:bg-transparent ${
+        className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-${buttonBackgroundColor} px-5 py-3 dark:border-${darkBorderColor} dark:bg-${buttonDarkBackgroundColor} ${
           isOpen ? `${borderTopRadius}` : `${borderRadius}`
         }`}
       >
@@ -89,8 +102,9 @@ function Dropdown({
           </span>
         ) : (
           <span
-            className={`truncate dark:text-bright-gray ${
-              !selectedValue && 'text-silver dark:text-gray-400'
+            className={`truncate ${selectedValue && `dark:text-bright-gray`} ${
+              !selectedValue &&
+              `text-${placeholderTextColor} dark:text-${darkPlaceholderTextColor}`
             } ${contentSize}`}
           >
             {selectedValue && 'label' in selectedValue
@@ -116,7 +130,7 @@ function Dropdown({
       </button>
       {isOpen && (
         <div
-          className={`absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-white shadow-lg dark:border-${darkBorderColor} dark:bg-dark-charcoal`}
+          className={`absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-${optionsBackgroundColor} shadow-lg dark:border-${darkBorderColor} dark:bg-${optionsDarkBackgroundColor}`}
         >
           {options.map((option: any, index) => (
             <div

frontend/src/components/Input.tsx

@@ -13,6 +13,7 @@ const Input = ({
   className = '',
   colorVariant = 'silver',
   borderVariant = 'thick',
+  textSize = 'medium',
   children,
   labelBgClassName = 'bg-white dark:bg-raisin-black',
   onChange,
@@ -28,6 +29,10 @@ const Input = ({
     thin: 'border',
     thick: 'border-2',
   };
+  const textSizeStyles = {
+    small: 'text-sm',
+    medium: 'text-base',
+  };
 
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -35,15 +40,7 @@ const Input = ({
     <div className={`relative ${className}`}>
       <input
         ref={inputRef}
-        className={`peer h-[42px] w-full rounded-full px-3 py-1 
-          bg-transparent outline-none 
-          text-jet dark:text-bright-gray
-          placeholder-transparent 
-          ${colorStyles[colorVariant]} 
-          ${borderStyles[borderVariant]}
-          [&:-webkit-autofill]:bg-transparent
-          [&:-webkit-autofill]:appearance-none
-          [&:-webkit-autofill_selected]:bg-transparent`}
+        className={`peer h-[42px] w-full rounded-full bg-transparent px-3 py-1 text-jet placeholder-transparent outline-none dark:text-bright-gray ${colorStyles[colorVariant]} ${borderStyles[borderVariant]} ${textSizeStyles[textSize]} [&:-webkit-autofill]:appearance-none [&:-webkit-autofill]:bg-transparent [&:-webkit-autofill_selected]:bg-transparent`}
         type={type}
         id={id}
         name={name}
@@ -61,15 +58,11 @@ const Input = ({
       {placeholder && (
         <label
           htmlFor={id}
-          className={`absolute left-3 -top-2.5 px-2 text-xs transition-all 
-            peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 peer-placeholder-shown:text-base 
-            peer-placeholder-shown:text-gray-4000 peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs 
-            peer-focus:text-gray-4000 dark:text-silver dark:peer-placeholder-shown:text-gray-400 
-            cursor-none pointer-events-none ${labelBgClassName}`}
+          className={`absolute -top-2.5 left-3 px-2 ${textSizeStyles[textSize]} transition-all peer-placeholder-shown:left-3 peer-placeholder-shown:top-2.5 peer-placeholder-shown:${textSizeStyles[textSize]} pointer-events-none cursor-none peer-placeholder-shown:text-gray-4000 peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs peer-focus:text-gray-4000 dark:text-silver dark:peer-placeholder-shown:text-gray-400 ${labelBgClassName}`}
         >
           {placeholder}
           {required && (
-            <span className="text-[#D30000] dark:text-[#D42626] ml-0.5">*</span>
+            <span className="ml-0.5 text-[#D30000] dark:text-[#D42626]">*</span>
           )}
         </label>
       )}

frontend/src/components/MessageInput.tsx

@@ -1,43 +1,59 @@
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDarkTheme } from '../hooks';
-import { useSelector, useDispatch } from 'react-redux';
-import userService from '../api/services/userService';
+import { useDispatch, useSelector } from 'react-redux';
+
 import endpoints from '../api/endpoints';
+import userService from '../api/services/userService';
+import AlertIcon from '../assets/alert.svg';
+import ClipIcon from '../assets/clip.svg';
+import ExitIcon from '../assets/exit.svg';
 import PaperPlane from '../assets/paper_plane.svg';
 import SourceIcon from '../assets/source.svg';
-import ToolIcon from '../assets/tool.svg';
 import SpinnerDark from '../assets/spinner-dark.svg';
 import Spinner from '../assets/spinner.svg';
+import ToolIcon from '../assets/tool.svg';
+import {
+  addAttachment,
+  removeAttachment,
+  selectAttachments,
+  updateAttachment,
+} from '../conversation/conversationSlice';
+import { useDarkTheme } from '../hooks';
+import { ActiveState } from '../models/misc';
+import {
+  selectSelectedDocs,
+  selectToken,
+} from '../preferences/preferenceSlice';
+import Upload from '../upload/Upload';
+import { getOS, isTouchDevice } from '../utils/browserUtils';
 import SourcesPopup from './SourcesPopup';
 import ToolsPopup from './ToolsPopup';
-import { selectSelectedDocs, selectToken } from '../preferences/preferenceSlice';
-import { ActiveState } from '../models/misc';
-import Upload from '../upload/Upload';
-import ClipIcon from '../assets/clip.svg';
-import { setAttachments } from '../conversation/conversationSlice';
 
-interface MessageInputProps {
+type MessageInputProps = {
   value: string;
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   onSubmit: () => void;
   loading: boolean;
-}
+  showSourceButton?: boolean;
+  showToolButton?: boolean;
+};
 
-interface UploadState {
+type UploadState = {
   taskId: string;
   fileName: string;
   progress: number;
   attachment_id?: string;
   token_count?: number;
   status: 'uploading' | 'processing' | 'completed' | 'failed';
-}
+};
 
 export default function MessageInput({
   value,
   onChange,
   onSubmit,
   loading,
+  showSourceButton = true,
+  showToolButton = true,
 }: MessageInputProps) {
   const { t } = useTranslation();
   const [isDarkTheme] = useDarkTheme();
@@ -46,14 +62,37 @@ export default function MessageInput({
   const toolButtonRef = useRef<HTMLButtonElement>(null);
   const [isSourcesPopupOpen, setIsSourcesPopupOpen] = useState(false);
   const [isToolsPopupOpen, setIsToolsPopupOpen] = useState(false);
-  const [uploadModalState, setUploadModalState] = useState<ActiveState>('INACTIVE');
-  const [uploads, setUploads] = useState<UploadState[]>([]);
+  const [uploadModalState, setUploadModalState] =
+    useState<ActiveState>('INACTIVE');
 
   const selectedDocs = useSelector(selectSelectedDocs);
   const token = useSelector(selectToken);
-  
+  const attachments = useSelector(selectAttachments);
+
   const dispatch = useDispatch();
 
+  const browserOS = getOS();
+  const isTouch = isTouchDevice();
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        ((browserOS === 'win' || browserOS === 'linux') &&
+          event.ctrlKey &&
+          event.key === 'k') ||
+        (browserOS === 'mac' && event.metaKey && event.key === 'k')
+      ) {
+        event.preventDefault();
+        setIsSourcesPopupOpen(!isSourcesPopupOpen);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [browserOS]);
+
   const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files || e.target.files.length === 0) return;
 
@@ -64,56 +103,59 @@ export default function MessageInput({
     const apiHost = import.meta.env.VITE_API_HOST;
     const xhr = new XMLHttpRequest();
 
-    const uploadState: UploadState = {
-      taskId: '',
+    const newAttachment = {
       fileName: file.name,
       progress: 0,
-      status: 'uploading'
+      status: 'uploading' as const,
+      taskId: '',
     };
 
-    setUploads(prev => [...prev, uploadState]);
-    const uploadIndex = uploads.length;
+    dispatch(addAttachment(newAttachment));
 
     xhr.upload.addEventListener('progress', (event) => {
       if (event.lengthComputable) {
         const progress = Math.round((event.loaded / event.total) * 100);
-        setUploads(prev => prev.map((upload, index) =>
-          index === uploadIndex
-            ? { ...upload, progress }
-            : upload
-        ));
+        dispatch(
+          updateAttachment({
+            taskId: newAttachment.taskId,
+            updates: { progress },
+          }),
+        );
       }
     });
 
     xhr.onload = () => {
       if (xhr.status === 200) {
         const response = JSON.parse(xhr.responseText);
-        console.log('File uploaded successfully:', response);
-
         if (response.task_id) {
-          setUploads(prev => prev.map((upload, index) =>
-            index === uploadIndex
-              ? { ...upload, taskId: response.task_id, status: 'processing' }
-              : upload
-          ));
+          dispatch(
+            updateAttachment({
+              taskId: newAttachment.taskId,
+              updates: {
+                taskId: response.task_id,
+                status: 'processing',
+                progress: 10,
+              },
+            }),
+          );
         }
       } else {
-        setUploads(prev => prev.map((upload, index) =>
-          index === uploadIndex
-            ? { ...upload, status: 'failed' }
-            : upload
-        ));
-        console.error('Error uploading file:', xhr.responseText);
+        dispatch(
+          updateAttachment({
+            taskId: newAttachment.taskId,
+            updates: { status: 'failed' },
+          }),
+        );
       }
     };
 
     xhr.onerror = () => {
-      setUploads(prev => prev.map((upload, index) =>
-        index === uploadIndex
-          ? { ...upload, status: 'failed' }
-          : upload
-      ));
-      console.error('Network error during file upload');
+      dispatch(
+        updateAttachment({
+          taskId: newAttachment.taskId,
+          updates: { status: 'failed' },
+        }),
+      );
     };
 
     xhr.open('POST', `${apiHost}${endpoints.USER.STORE_ATTACHMENT}`);
@@ -123,64 +165,63 @@ export default function MessageInput({
   };
 
   useEffect(() => {
-    let timeoutIds: number[] = [];
-
     const checkTaskStatus = () => {
-      const processingUploads = uploads.filter(upload =>
-        upload.status === 'processing' && upload.taskId
+      const processingAttachments = attachments.filter(
+        (att) => att.status === 'processing' && att.taskId,
       );
 
-      processingUploads.forEach(upload => {
+      processingAttachments.forEach((attachment) => {
         userService
-          .getTaskStatus(upload.taskId, null)
+          .getTaskStatus(attachment.taskId!, null)
           .then((data) => data.json())
           .then((data) => {
-            console.log('Task status:', data);
-
-            setUploads(prev => prev.map(u => {
-              if (u.taskId !== upload.taskId) return u;
-
-              if (data.status === 'SUCCESS') {
-                return {
-                  ...u,
-                  status: 'completed',
-                  progress: 100,
-                  attachment_id: data.result?.attachment_id,
-                  token_count: data.result?.token_count
-                };
-              } else if (data.status === 'FAILURE') {
-                return { ...u, status: 'failed' };
-              } else if (data.status === 'PROGRESS' && data.result?.current) {
-                return { ...u, progress: data.result.current };
-              }
-              return u;
-            }));
-
-            if (data.status !== 'SUCCESS' && data.status !== 'FAILURE') {
-              const timeoutId = window.setTimeout(() => checkTaskStatus(), 2000);
-              timeoutIds.push(timeoutId);
+            if (data.status === 'SUCCESS') {
+              dispatch(
+                updateAttachment({
+                  taskId: attachment.taskId!,
+                  updates: {
+                    status: 'completed',
+                    progress: 100,
+                    id: data.result?.attachment_id,
+                    token_count: data.result?.token_count,
+                  },
+                }),
+              );
+            } else if (data.status === 'FAILURE') {
+              dispatch(
+                updateAttachment({
+                  taskId: attachment.taskId!,
+                  updates: { status: 'failed' },
+                }),
+              );
+            } else if (data.status === 'PROGRESS' && data.result?.current) {
+              dispatch(
+                updateAttachment({
+                  taskId: attachment.taskId!,
+                  updates: { progress: data.result.current },
+                }),
+              );
             }
           })
-          .catch((error) => {
-            console.error('Error checking task status:', error);
-            setUploads(prev => prev.map(u =>
-              u.taskId === upload.taskId
-                ? { ...u, status: 'failed' }
-                : u
-            ));
+          .catch(() => {
+            dispatch(
+              updateAttachment({
+                taskId: attachment.taskId!,
+                updates: { status: 'failed' },
+              }),
+            );
           });
       });
     };
 
-    if (uploads.some(upload => upload.status === 'processing')) {
-      const timeoutId = window.setTimeout(checkTaskStatus, 2000);
-      timeoutIds.push(timeoutId);
-    }
+    const interval = setInterval(() => {
+      if (attachments.some((att) => att.status === 'processing')) {
+        checkTaskStatus();
+      }
+    }, 2000);
 
-    return () => {
-      timeoutIds.forEach(id => clearTimeout(id));
-    };
-  }, [uploads]);
+    return () => clearInterval(interval);
+  }, [attachments, dispatch]);
 
   const handleInput = () => {
     if (inputRef.current) {
@@ -213,41 +254,57 @@ export default function MessageInput({
     console.log('Selected document:', doc);
   };
 
-
   const handleSubmit = () => {
-    const completedAttachments = uploads
-      .filter(upload => upload.status === 'completed' && upload.attachment_id)
-      .map(upload => ({
-        fileName: upload.fileName,
-        id: upload.attachment_id as string
-      }));
-    
-    dispatch(setAttachments(completedAttachments));
-    
     onSubmit();
   };
   return (
-    <div className="flex flex-col w-full mx-2">
-      <div className="flex flex-col w-full rounded-[23px] border dark:border-grey border-dark-gray bg-lotion dark:bg-transparent relative">
-        <div className="flex flex-wrap gap-1.5 sm:gap-2 px-4 sm:px-6 pt-3 pb-0">
-          {uploads.map((upload, index) => (
+    <div className="mx-2 flex w-full flex-col">
+      <div className="relative flex w-full flex-col rounded-[23px] border border-dark-gray bg-lotion dark:border-grey dark:bg-transparent">
+        <div className="flex flex-wrap gap-1.5 px-4 pb-0 pt-3 sm:gap-2 sm:px-6">
+          {attachments.map((attachment, index) => (
             <div
               key={index}
-              className="flex items-center px-2 sm:px-3 py-1 sm:py-1.5 rounded-[32px] border border-[#AAAAAA] dark:border-purple-taupe bg-white dark:bg-[#1F2028] text-[12px] sm:text-[14px] text-[#5D5D5D] dark:text-bright-gray"
+              className={`group relative flex items-center rounded-[32px] border border-[#AAAAAA] bg-white px-2 py-1 text-[12px] text-[#5D5D5D] dark:border-purple-taupe dark:bg-[#1F2028] dark:text-bright-gray sm:px-3 sm:py-1.5 sm:text-[14px] ${
+                attachment.status !== 'completed' ? 'opacity-70' : 'opacity-100'
+              }`}
+              title={attachment.fileName}
             >
-              <span className="font-medium truncate max-w-[120px] sm:max-w-[150px]">{upload.fileName}</span>
+              <span className="max-w-[120px] truncate font-medium sm:max-w-[150px]">
+                {attachment.fileName}
+              </span>
 
-              {upload.status === 'completed' && (
-                <span className="ml-2 text-green-500">✓</span>
+              {attachment.status === 'completed' && (
+                <button
+                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-white p-1 opacity-0 transition-opacity hover:bg-white/95 focus:opacity-100 group-hover:opacity-100 dark:bg-[#1F2028] dark:hover:bg-[#1F2028]/95"
+                  onClick={() => {
+                    if (attachment.id) {
+                      dispatch(removeAttachment(attachment.id));
+                    }
+                  }}
+                  aria-label="Remove attachment"
+                >
+                  <img
+                    src={ExitIcon}
+                    alt="Remove"
+                    className="h-2.5 w-2.5 filter dark:invert"
+                  />
+                </button>
               )}
 
-              {upload.status === 'failed' && (
-                <span className="ml-2 text-red-500">✗</span>
+              {attachment.status === 'failed' && (
+                <img
+                  src={AlertIcon}
+                  alt="Upload failed"
+                  className="ml-2 h-3.5 w-3.5"
+                  title="Upload failed"
+                />
               )}
 
-              {(upload.status === 'uploading' || upload.status === 'processing') && (
-                <div className="ml-2 w-4 h-4 relative">
-                  <svg className="w-4 h-4" viewBox="0 0 24 24">
+              {(attachment.status === 'uploading' ||
+                attachment.status === 'processing') && (
+                <div className="relative ml-2 h-4 w-4">
+                  <svg className="h-4 w-4" viewBox="0 0 24 24">
+                    {/* Background circle */}
                     <circle
                       className="text-gray-200 dark:text-gray-700"
                       cx="12"
@@ -266,7 +323,7 @@ export default function MessageInput({
                       strokeWidth="4"
                       fill="none"
                       strokeDasharray="62.83"
-                      strokeDashoffset={62.83 - (upload.progress / 100) * 62.83}
+                      strokeDashoffset={62.83 * (1 - attachment.progress / 100)}
                       transform="rotate(-90 12 12)"
                     />
                   </svg>
@@ -287,41 +344,67 @@ export default function MessageInput({
             onChange={onChange}
             tabIndex={1}
             placeholder={t('inputPlaceholder')}
-            className="inputbox-style w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-t-[23px] bg-lotion dark:bg-transparent py-3 sm:py-5 text-base leading-tight opacity-100 focus:outline-none dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50 px-4 sm:px-6 no-scrollbar"
+            className="inputbox-style no-scrollbar w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-t-[23px] bg-lotion px-4 py-3 text-base leading-tight opacity-100 focus:outline-none dark:bg-transparent dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50 sm:px-6 sm:py-5"
             onInput={handleInput}
             onKeyDown={handleKeyDown}
             aria-label={t('inputPlaceholder')}
           />
         </div>
 
-        <div className="flex items-center px-3 sm:px-4 py-1.5 sm:py-2">
-          <div className="flex-grow flex flex-wrap gap-1 sm:gap-2">
-            <button
-              ref={sourceButtonRef}
-              className="flex items-center px-2 xs:px-3 py-1 xs:py-1.5 rounded-[32px] border border-[#AAAAAA] dark:border-purple-taupe hover:bg-gray-100 dark:hover:bg-[#2C2E3C] transition-colors max-w-[130px] xs:max-w-[150px]"
-              onClick={() => setIsSourcesPopupOpen(!isSourcesPopupOpen)}
-            >
-              <img src={SourceIcon} alt="Sources" className="w-3.5 sm:w-4 h-3.5 sm:h-4 mr-1 sm:mr-1.5 flex-shrink-0" />
-              <span className="text-[10px] xs:text-[12px] sm:text-[14px] text-[#5D5D5D] dark:text-bright-gray font-medium truncate overflow-hidden">
-                {selectedDocs
-                  ? selectedDocs.name
-                  : t('conversation.sources.title')}
-              </span>
-            </button>
+        <div className="flex items-center px-3 py-1.5 sm:px-4 sm:py-2">
+          <div className="flex flex-grow flex-wrap gap-1 sm:gap-2">
+            {showSourceButton && (
+              <button
+                ref={sourceButtonRef}
+                className="xs:px-3 xs:py-1.5 flex max-w-[130px] items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:border-purple-taupe dark:hover:bg-[#2C2E3C] sm:max-w-[150px]"
+                onClick={() => setIsSourcesPopupOpen(!isSourcesPopupOpen)}
+                title={
+                  selectedDocs
+                    ? selectedDocs.name
+                    : t('conversation.sources.title')
+                }
+              >
+                <img
+                  src={SourceIcon}
+                  alt="Sources"
+                  className="mr-1 h-3.5 w-3.5 flex-shrink-0 sm:mr-1.5 sm:h-4"
+                />
+                <span className="xs:text-[12px] overflow-hidden truncate text-[10px] font-medium text-[#5D5D5D] dark:text-bright-gray sm:text-[14px]">
+                  {selectedDocs
+                    ? selectedDocs.name
+                    : t('conversation.sources.title')}
+                </span>
+                {!isTouch && (
+                  <span className="ml-1 hidden text-[10px] text-gray-500 dark:text-gray-400 sm:inline-block">
+                    {browserOS === 'mac' ? '(⌘K)' : '(ctrl+K)'}
+                  </span>
+                )}
+              </button>
+            )}
 
-            <button
-              ref={toolButtonRef}
-              className="flex items-center px-2 xs:px-3 py-1 xs:py-1.5 rounded-[32px] border border-[#AAAAAA] dark:border-purple-taupe hover:bg-gray-100 dark:hover:bg-[#2C2E3C] transition-colors max-w-[130px] xs:max-w-[150px]"
-              onClick={() => setIsToolsPopupOpen(!isToolsPopupOpen)}
-            >
-              <img src={ToolIcon} alt="Tools" className="w-3.5 sm:w-4 h-3.5 sm:h-4 mr-1 sm:mr-1.5 flex-shrink-0" />
-              <span className="text-[10px] xs:text-[12px] sm:text-[14px] text-[#5D5D5D] dark:text-bright-gray font-medium truncate overflow-hidden">
-                {t('settings.tools.label')}
-              </span>
-            </button>
-            <label className="flex items-center px-2 xs:px-3 py-1 xs:py-1.5 rounded-[32px] border border-[#AAAAAA] dark:border-purple-taupe hover:bg-gray-100 dark:hover:bg-[#2C2E3C] transition-colors cursor-pointer">
-              <img src={ClipIcon} alt="Attach" className="w-3.5 sm:w-4 h-3.5 sm:h-4 mr-1 sm:mr-1.5" />
-              <span className="text-[10px] xs:text-[12px] sm:text-[14px] text-[#5D5D5D] dark:text-bright-gray font-medium">
+            {showToolButton && (
+              <button
+                ref={toolButtonRef}
+                className="xs:px-3 xs:py-1.5 xs:max-w-[150px] flex max-w-[130px] items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:border-purple-taupe dark:hover:bg-[#2C2E3C]"
+                onClick={() => setIsToolsPopupOpen(!isToolsPopupOpen)}
+              >
+                <img
+                  src={ToolIcon}
+                  alt="Tools"
+                  className="mr-1 h-3.5 w-3.5 flex-shrink-0 sm:mr-1.5 sm:h-4 sm:w-4"
+                />
+                <span className="xs:text-[12px] overflow-hidden truncate text-[10px] font-medium text-[#5D5D5D] dark:text-bright-gray sm:text-[14px]">
+                  {t('settings.tools.label')}
+                </span>
+              </button>
+            )}
+            <label className="xs:px-3 xs:py-1.5 flex cursor-pointer items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:border-purple-taupe dark:hover:bg-[#2C2E3C]">
+              <img
+                src={ClipIcon}
+                alt="Attach"
+                className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4"
+              />
+              <span className="xs:text-[12px] text-[10px] font-medium text-[#5D5D5D] dark:text-bright-gray sm:text-[14px]">
                 Attach
               </span>
               <input
@@ -337,18 +420,18 @@ export default function MessageInput({
           <button
             onClick={loading ? undefined : handleSubmit}
             aria-label={loading ? t('loading') : t('send')}
-            className={`flex items-center justify-center p-2 sm:p-2.5 rounded-full ${loading ? 'bg-gray-300 dark:bg-gray-600' : 'bg-black dark:bg-white'} ml-auto flex-shrink-0`}
+            className={`flex items-center justify-center rounded-full p-2 sm:p-2.5 ${loading ? 'bg-gray-300 dark:bg-gray-600' : 'bg-black dark:bg-white'} ml-auto flex-shrink-0`}
             disabled={loading}
           >
             {loading ? (
               <img
                 src={isDarkTheme ? SpinnerDark : Spinner}
-                className="w-3.5 sm:w-4 h-3.5 sm:h-4 animate-spin"
+                className="h-3.5 w-3.5 animate-spin sm:h-4 sm:w-4"
                 alt={t('loading')}
               />
             ) : (
               <img
-                className={`w-3.5 sm:w-4 h-3.5 sm:h-4 ${isDarkTheme ? 'filter invert' : ''}`}
+                className={`h-3.5 w-3.5 sm:h-4 sm:w-4 ${isDarkTheme ? 'invert filter' : ''}`}
                 src={PaperPlane}
                 alt={t('send')}
               />

frontend/src/components/MultiSelectPopup.tsx

@@ -0,0 +1,278 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import CheckmarkIcon from '../assets/checkmark.svg';
+import NoFilesDarkIcon from '../assets/no-files-dark.svg';
+import NoFilesIcon from '../assets/no-files.svg';
+import { useDarkTheme } from '../hooks';
+import Input from './Input';
+
+export type OptionType = {
+  id: string | number;
+  label: string;
+  icon?: string | React.ReactNode;
+  [key: string]: any;
+};
+
+type MultiSelectPopupProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  anchorRef: React.RefObject<HTMLElement>;
+  options: OptionType[];
+  selectedIds: Set<string | number>;
+  onSelectionChange: (newSelectedIds: Set<string | number>) => void;
+  title?: string;
+  searchPlaceholder?: string;
+  noOptionsMessage?: string;
+  loading?: boolean;
+  footerContent?: React.ReactNode;
+  showSearch?: boolean;
+  singleSelect?: boolean;
+};
+
+export default function MultiSelectPopup({
+  isOpen,
+  onClose,
+  anchorRef,
+  options,
+  selectedIds,
+  onSelectionChange,
+  title,
+  searchPlaceholder,
+  noOptionsMessage,
+  loading = false,
+  footerContent,
+  showSearch = true,
+  singleSelect = false,
+}: MultiSelectPopupProps) {
+  const { t } = useTranslation();
+  const [isDarkTheme] = useDarkTheme();
+
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [popupPosition, setPopupPosition] = useState({
+    top: 0,
+    left: 0,
+    maxHeight: 0,
+    showAbove: false,
+  });
+
+  const filteredOptions = options.filter((option) =>
+    option.label.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  const handleOptionClick = (optionId: string | number) => {
+    let newSelectedIds: Set<string | number>;
+    if (singleSelect) newSelectedIds = new Set<string | number>();
+    else newSelectedIds = new Set(selectedIds);
+    if (newSelectedIds.has(optionId)) {
+      newSelectedIds.delete(optionId);
+    } else newSelectedIds.add(optionId);
+    onSelectionChange(newSelectedIds);
+  };
+
+  const renderIcon = (icon: string | React.ReactNode) => {
+    if (typeof icon === 'string') {
+      if (icon.startsWith('/') || icon.startsWith('http')) {
+        return (
+          <img
+            src={icon}
+            alt=""
+            className="mr-3 h-5 w-5 flex-shrink-0"
+            aria-hidden="true"
+          />
+        );
+      }
+      return (
+        <span className="mr-3 h-5 w-5 flex-shrink-0" aria-hidden="true">
+          {icon}
+        </span>
+      );
+    }
+    return <span className="mr-3 flex-shrink-0">{icon}</span>;
+  };
+
+  useLayoutEffect(() => {
+    if (!isOpen || !anchorRef.current) return;
+
+    const updatePosition = () => {
+      if (!anchorRef.current) return;
+
+      const rect = anchorRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const viewportWidth = window.innerWidth;
+      const popupPadding = 16;
+      const popupMinWidth = 300;
+      const popupMaxWidth = 462;
+      const popupDefaultHeight = 300;
+
+      const spaceAbove = rect.top;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const showAbove =
+        spaceBelow < popupDefaultHeight && spaceAbove >= popupDefaultHeight;
+
+      const maxHeight = Math.max(
+        150,
+        showAbove ? spaceAbove - popupPadding : spaceBelow - popupPadding,
+      );
+
+      const availableWidth = viewportWidth - 20;
+      const calculatedWidth = Math.min(popupMaxWidth, availableWidth);
+
+      let left = rect.left;
+      if (left + calculatedWidth > viewportWidth - 10) {
+        left = viewportWidth - calculatedWidth - 10;
+      }
+      left = Math.max(10, left);
+
+      setPopupPosition({
+        top: showAbove ? rect.top - 8 : rect.bottom + 8,
+        left: left,
+        maxHeight: Math.min(600, maxHeight),
+        showAbove,
+      });
+    };
+
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [isOpen, anchorRef]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popupRef.current &&
+        !popupRef.current.contains(event.target as Node) &&
+        anchorRef.current &&
+        !anchorRef.current.contains(event.target as Node)
+      )
+        onClose();
+    };
+    if (isOpen) document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [onClose, anchorRef, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) setSearchTerm('');
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+  return (
+    <div
+      ref={popupRef}
+      className="fixed z-[9999] flex flex-col rounded-lg border border-light-silver bg-lotion shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] dark:border-dim-gray dark:bg-charleston-green-2"
+      style={{
+        top: popupPosition.showAbove ? undefined : popupPosition.top,
+        bottom: popupPosition.showAbove
+          ? window.innerHeight - popupPosition.top + 8
+          : undefined,
+        left: popupPosition.left,
+        maxWidth: `${Math.min(462, window.innerWidth - 20)}px`,
+        width: '100%',
+        maxHeight: `${popupPosition.maxHeight}px`,
+      }}
+    >
+      {(title || showSearch) && (
+        <div className="flex-shrink-0 p-4">
+          {title && (
+            <h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
+              {title}
+            </h3>
+          )}
+          {showSearch && (
+            <Input
+              id="multi-select-search"
+              name="multi-select-search"
+              type="text"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              placeholder={
+                searchPlaceholder ||
+                t('settings.tools.searchPlaceholder', 'Search...')
+              }
+              labelBgClassName="bg-lotion dark:bg-charleston-green-2"
+              borderVariant="thin"
+              className="mb-4"
+              textSize="small"
+            />
+          )}
+        </div>
+      )}
+      <div className="mx-4 mb-4 flex-grow overflow-auto rounded-md border border-[#D9D9D9] dark:border-dim-gray">
+        {loading ? (
+          <div className="flex h-full items-center justify-center py-4">
+            <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900 dark:border-white"></div>
+          </div>
+        ) : (
+          <div className="h-full overflow-y-auto [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-gray-200 dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C] [&::-webkit-scrollbar]:w-2">
+            {filteredOptions.length === 0 ? (
+              <div className="flex h-full flex-col items-center justify-center px-4 py-8 text-center">
+                <img
+                  src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
+                  alt="No options found"
+                  className="mx-auto mb-3 h-16 w-16"
+                />
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  {searchTerm
+                    ? 'No results found'
+                    : noOptionsMessage || 'No options available'}
+                </p>
+              </div>
+            ) : (
+              filteredOptions.map((option) => {
+                const isSelected = selectedIds.has(option.id);
+                return (
+                  <div
+                    key={option.id}
+                    onClick={() => handleOptionClick(option.id)}
+                    className="flex cursor-pointer items-center justify-between border-b border-[#D9D9D9] p-3 last:border-b-0 hover:bg-gray-100 dark:border-dim-gray dark:hover:bg-charleston-green-3"
+                    role="option"
+                    aria-selected={isSelected}
+                  >
+                    <div className="mr-3 flex flex-grow items-center overflow-hidden">
+                      {option.icon && renderIcon(option.icon)}
+                      <p
+                        className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white"
+                        title={option.label}
+                      >
+                        {option.label}
+                      </p>
+                    </div>
+                    <div className="flex-shrink-0">
+                      <div
+                        className={`flex h-4 w-4 items-center justify-center rounded-sm border border-[#C6C6C6] bg-white dark:border-[#757783] dark:bg-charleston-green-2`}
+                        aria-hidden="true"
+                      >
+                        {isSelected && (
+                          <img
+                            src={CheckmarkIcon}
+                            alt="checkmark"
+                            width={10}
+                            height={10}
+                          />
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        )}
+      </div>
+      {footerContent && (
+        <div className="flex-shrink-0 border-t border-light-silver p-4 dark:border-dim-gray">
+          {footerContent}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/SettingsBar.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import ArrowLeft from '../assets/arrow-left.svg';
 import ArrowRight from '../assets/arrow-right.svg';
-import { useTranslation } from 'react-i18next';
 
 type HiddenGradientType = 'left' | 'right' | undefined;
 
@@ -10,7 +11,6 @@ const useTabs = () => {
   const tabs = [
     t('settings.general.label'),
     t('settings.documents.label'),
-    t('settings.apiKeys.label'),
     t('settings.analytics.label'),
     t('settings.logs.label'),
     t('settings.tools.label'),
@@ -48,18 +48,18 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
     [containerRef.current],
   );
   return (
-    <div className="relative mt-6 flex flex-row items-center space-x-1 md:space-x-0 overflow-auto">
+    <div className="relative mt-6 flex flex-row items-center space-x-1 overflow-auto md:space-x-0">
       <div
-        className={`${hiddenGradient === 'left' ? 'hidden' : ''} md:hidden absolute inset-y-0 left-6 w-14 bg-gradient-to-r from-white dark:from-raisin-black pointer-events-none`}
+        className={`${hiddenGradient === 'left' ? 'hidden' : ''} pointer-events-none absolute inset-y-0 left-6 w-14 bg-gradient-to-r from-white dark:from-raisin-black md:hidden`}
       ></div>
       <div
-        className={`${hiddenGradient === 'right' ? 'hidden' : ''} md:hidden absolute inset-y-0 right-6 w-14 bg-gradient-to-l from-white dark:from-raisin-black pointer-events-none`}
+        className={`${hiddenGradient === 'right' ? 'hidden' : ''} pointer-events-none absolute inset-y-0 right-6 w-14 bg-gradient-to-l from-white dark:from-raisin-black md:hidden`}
       ></div>
 
-      <div className="md:hidden z-10">
+      <div className="z-10 md:hidden">
         <button
           onClick={() => scrollTabs(-1)}
-          className="flex h-6 w-6 items-center rounded-full justify-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
+          className="flex h-6 w-6 items-center justify-center rounded-full transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
           aria-label="Scroll tabs left"
         >
           <img src={ArrowLeft} alt="left-arrow" className="h-3" />
@@ -67,7 +67,7 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
       </div>
       <div
         ref={containerRef}
-        className="flex flex-nowrap overflow-x-auto no-scrollbar md:space-x-4 scroll-smooth snap-x"
+        className="no-scrollbar flex snap-x flex-nowrap overflow-x-auto scroll-smooth md:space-x-4"
         role="tablist"
         aria-label="Settings tabs"
       >
@@ -75,7 +75,7 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
           <button
             key={index}
             onClick={() => setActiveTab(tab)}
-            className={`snap-start h-9 rounded-3xl px-4 font-bold transition-colors ${
+            className={`h-9 snap-start rounded-3xl px-4 font-bold transition-colors ${
               activeTab === tab
                 ? 'bg-[#F4F4F5] text-neutral-900 dark:bg-dark-charcoal dark:text-white'
                 : 'text-neutral-700 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-white'
@@ -89,10 +89,10 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
           </button>
         ))}
       </div>
-      <div className="md:hidden z-10">
+      <div className="z-10 md:hidden">
         <button
           onClick={() => scrollTabs(1)}
-          className="flex h-6 w-6 rounded-full items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700"
+          className="flex h-6 w-6 items-center justify-center rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
           aria-label="Scroll tabs right"
         >
           <img src={ArrowRight} alt="right-arrow" className="h-3" />

frontend/src/components/SourcesPopup.tsx

@@ -207,7 +207,7 @@ export default function SourcesPopup({
         <div className="px-4 md:px-6 py-4 opacity-75 hover:opacity-100 transition-opacity duration-200 flex-shrink-0">
           <a 
             href="/settings/documents" 
-            className="text-violets-are-blue text-base font-medium flex items-center gap-2"
+            className="text-violets-are-blue text-base font-medium inline-flex items-center gap-2"
             onClick={onClose}
           >
             Go to Documents

frontend/src/components/ToolsPopup.tsx

@@ -217,10 +217,10 @@ export default function ToolsPopup({
           </div>
         )}
 
-        <div className="p-4 flex-shrink-0">
+        <div className="p-4 flex-shrink-0 opacity-75 hover:opacity-100 transition-opacity duration-200">
           <a
             href="/settings/tools"
-            className="text-base text-purple-30 font-medium hover:text-violets-are-blue flex items-center"
+            className="text-base text-purple-30 font-medium inline-flex items-center"
           >
             {t('settings.tools.manageTools')}
             <img
@@ -233,4 +233,4 @@ export default function ToolsPopup({
       </div>
     </div>
   );
-}
+}

frontend/src/components/types/index.ts

@@ -3,6 +3,7 @@ export type InputProps = {
   value: string | string[] | number;
   colorVariant?: 'silver' | 'jet' | 'gray';
   borderVariant?: 'thin' | 'thick';
+  textSize?: 'small' | 'medium';
   isAutoFocused?: boolean;
   id?: string;
   maxLength?: number;