AnythingLLM | Your personal LLM trained on anything

Mount the storage locally and run AnythingLLM in Docker
+ Linux/MacOs +	+ +```shell +export STORAGE_LOCATION=$HOME/anythingllm && \ +mkdir -p $STORAGE_LOCATION && \ +touch "$STORAGE_LOCATION/.env" && \ +docker run -d -p 3001:3001 \ +--cap-add SYS_ADMIN \ +-v ${STORAGE_LOCATION}:/app/server/storage \ +-v ${STORAGE_LOCATION}/.env:/app/server/.env \ +-e STORAGE_DIR="/app/server/storage" \ +mintplexlabs/anythingllm +``` + +
+ Windows +	+ +```powershell +# Run this in powershell terminal +$env:STORAGE_LOCATION="$HOME\Documents\anythingllm"; ` +If(!(Test-Path $env:STORAGE_LOCATION)) {New-Item $env:STORAGE_LOCATION -ItemType Directory}; ` +If(!(Test-Path "$env:STORAGE_LOCATION\.env")) {New-Item "$env:STORAGE_LOCATION\.env" -ItemType File}; ` +docker run -d -p 3001:3001 ` +--cap-add SYS_ADMIN ` +-v "$env:STORAGE_LOCATION`:/app/server/storage" ` +-v "$env:STORAGE_LOCATION\.env:/app/server/.env" ` +-e STORAGE_DIR="/app/server/storage" ` +mintplexlabs/anythingllm; +``` + +
Docker Compose	+ + +```yaml +version: '3.8' +services: + anythingllm: + image: mintplexlabs/anythingllm + container_name: anythingllm + ports: + - "3001:3001" + cap_add: + - SYS_ADMIN + environment: + # Adjust for your environment + - STORAGE_DIR=/app/server/storage + - JWT_SECRET="make this a large list of random numbers and letters 20+" + - LLM_PROVIDER=ollama + - OLLAMA_BASE_PATH=http://127.0.0.1:11434 + - OLLAMA_MODEL_PREF=llama2 + - OLLAMA_MODEL_TOKEN_LIMIT=4096 + - EMBEDDING_ENGINE=ollama + - EMBEDDING_BASE_PATH=http://127.0.0.1:11434 + - EMBEDDING_MODEL_PREF=nomic-embed-text:latest + - EMBEDDING_MODEL_MAX_CHUNK_LENGTH=8192 + - VECTOR_DB=lancedb + - WHISPER_PROVIDER=local + - TTS_PROVIDER=native + - PASSWORDMINCHAR=8 + # Add any other keys here for services or settings + # you can find in the docker/.env.example file + volumes: + - anythingllm_storage:/app/server/storage + restart: always + +volumes: + anythingllm_storage: + driver: local + driver_opts: + type: none + o: bind + device: /path/on/local/disk +``` + +

+ {selected &&

} +

+ +

+ {middleTruncate(item.title, 55)} +

+ {item?.cached && ( +

Cached

+ )} +

+ + ); +} diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx new file mode 100644 index 0000000..320c2b1 --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx @@ -0,0 +1,81 @@ +import { useState } from "react"; +import FileRow from "../FileRow"; +import { CaretDown, FolderNotch } from "@phosphor-icons/react"; +import { middleTruncate } from "@/utils/directories"; + +export default function FolderRow({ + item, + selected, + onRowClick, + toggleSelection, + isSelected, + autoExpanded = false, +}) { + const [expanded, setExpanded] = useState(autoExpanded); + + const handleExpandClick = (event) => { + event.stopPropagation(); + setExpanded(!expanded); + }; + + return ( + <> + +

{ + event.stopPropagation(); + toggleSelection(item); + }} + > + {selected &&

} +

+ +

+ {middleTruncate(item.name, 35)} +

+ + {expanded && ( + <> + {item.items.map((fileItem) => ( + + ))} + + )} + + ); +} diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderSelectionPopup/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderSelectionPopup/index.jsx new file mode 100644 index 0000000..5261b89 --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderSelectionPopup/index.jsx @@ -0,0 +1,24 @@ +import { middleTruncate } from "@/utils/directories"; + +export default function FolderSelectionPopup({ folders, onSelect, onClose }) { + const handleFolderSelect = (folder) => { + onSelect(folder); + onClose(); + }; + + return ( +

handleFolderSelect(folder)} + className="px-4 py-2 text-xs text-gray-700 hover:bg-gray-200 rounded-lg cursor-pointer whitespace-nowrap" + > + {middleTruncate(folder.name, 25)} +

+ ); +} diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/MoveToFolderIcon.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/MoveToFolderIcon.jsx new file mode 100644 index 0000000..3916fc7 --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/MoveToFolderIcon.jsx @@ -0,0 +1,44 @@ +export default function MoveToFolderIcon({ + className, + width = 18, + height = 18, +}) { + return ( + + ); +} diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx new file mode 100644 index 0000000..bd740c8 --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx @@ -0,0 +1,91 @@ +import React, { useState } from "react"; +import { X } from "@phosphor-icons/react"; +import Document from "@/models/document"; + +export default function NewFolderModal({ closeModal, files, setFiles }) { + const [error, setError] = useState(null); + const [folderName, setFolderName] = useState(""); + + const handleCreate = async (e) => { + e.preventDefault(); + setError(null); + if (folderName.trim() !== "") { + const newFolder = { + name: folderName, + type: "folder", + items: [], + }; + const { success } = await Document.createFolder(folderName); + if (success) { + setFiles({ + ...files, + items: [...files.items, newFolder], + }); + closeModal(); + } else { + setError("Failed to create folder"); + } + } + }; + + return ( +

+ Create New Folder +

+ +

+ ); +} diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx new file mode 100644 index 0000000..d29e893 --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx @@ -0,0 +1,369 @@ +import UploadFile from "../UploadFile"; +import PreLoader from "@/components/Preloader"; +import { memo, useEffect, useState } from "react"; +import FolderRow from "./FolderRow"; +import System from "@/models/system"; +import { MagnifyingGlass, Plus, Trash } from "@phosphor-icons/react"; +import Document from "@/models/document"; +import showToast from "@/utils/toast"; +import FolderSelectionPopup from "./FolderSelectionPopup"; +import MoveToFolderIcon from "./MoveToFolderIcon"; +import { useModal } from "@/hooks/useModal"; +import NewFolderModal from "./NewFolderModal"; +import debounce from "lodash.debounce"; +import { filterFileSearchResults } from "./utils"; +import ContextMenu from "./ContextMenu"; +import { Tooltip } from "react-tooltip"; +import { safeJsonParse } from "@/utils/request"; + +function Directory({ + files, + setFiles, + loading, + setLoading, + workspace, + fetchKeys, + selectedItems, + setSelectedItems, + setHighlightWorkspace, + moveToWorkspace, + setLoadingMessage, + loadingMessage, +}) { + const [amountSelected, setAmountSelected] = useState(0); + const [showFolderSelection, setShowFolderSelection] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const { + isOpen: isFolderModalOpen, + openModal: openFolderModal, + closeModal: closeFolderModal, + } = useModal(); + const [contextMenu, setContextMenu] = useState({ + visible: false, + x: 0, + y: 0, + }); + + useEffect(() => { + setAmountSelected(Object.keys(selectedItems).length); + }, [selectedItems]); + + const deleteFiles = async (event) => { + event.stopPropagation(); + if ( + !window.confirm( + "Are you sure you want to delete these files and folders?\nThis will remove the files from the system and remove them from any existing workspaces automatically.\nThis action is not reversible." + ) + ) { + return false; + } + + try { + const toRemove = []; + const foldersToRemove = []; + + for (const itemId of Object.keys(selectedItems)) { + for (const folder of files.items) { + const foundItem = folder.items.find((file) => file.id === itemId); + if (foundItem) { + toRemove.push(`${folder.name}/${foundItem.name}`); + break; + } + } + } + for (const folder of files.items) { + if (folder.name === "custom-documents") { + continue; + } + + if (isSelected(folder.id, folder)) { + foldersToRemove.push(folder.name); + } + } + + setLoading(true); + setLoadingMessage( + `Removing ${toRemove.length} documents and ${foldersToRemove.length} folders. Please wait.` + ); + await System.deleteDocuments(toRemove); + for (const folderName of foldersToRemove) { + await System.deleteFolder(folderName); + } + + await fetchKeys(true); + setSelectedItems({}); + } catch (error) { + console.error("Failed to delete files and folders:", error); + } finally { + setLoading(false); + setSelectedItems({}); + } + }; + + const toggleSelection = (item) => { + setSelectedItems((prevSelectedItems) => { + const newSelectedItems = { ...prevSelectedItems }; + if (item.type === "folder") { + // select all files in the folder + if (newSelectedItems[item.name]) { + delete newSelectedItems[item.name]; + item.items.forEach((file) => delete newSelectedItems[file.id]); + } else { + newSelectedItems[item.name] = true; + item.items.forEach((file) => (newSelectedItems[file.id] = true)); + } + } else { + // single file selections + if (newSelectedItems[item.id]) { + delete newSelectedItems[item.id]; + } else { + newSelectedItems[item.id] = true; + } + } + + return newSelectedItems; + }); + }; + + // check if item is selected based on selectedItems state + const isSelected = (id, item) => { + if (item && item.type === "folder") { + if (!selectedItems[item.name]) { + return false; + } + return item.items.every((file) => selectedItems[file.id]); + } + + return !!selectedItems[id]; + }; + + const moveToFolder = async (folder) => { + const toMove = []; + for (const itemId of Object.keys(selectedItems)) { + for (const currentFolder of files.items) { + const foundItem = currentFolder.items.find( + (file) => file.id === itemId + ); + if (foundItem) { + toMove.push({ ...foundItem, folderName: currentFolder.name }); + break; + } + } + } + setLoading(true); + setLoadingMessage(`Moving ${toMove.length} documents. Please wait.`); + const { success, message } = await Document.moveToFolder( + toMove, + folder.name + ); + if (!success) { + showToast(`Error moving files: ${message}`, "error"); + setLoading(false); + return; + } + + if (success && message) { + // show info if some files were not moved due to being embedded + showToast(message, "info"); + } else { + showToast(`Successfully moved ${toMove.length} documents.`, "success"); + } + await fetchKeys(true); + setSelectedItems({}); + setLoading(false); + }; + + const handleSearch = debounce((e) => { + const searchValue = e.target.value; + setSearchTerm(searchValue); + }, 500); + + const filteredFiles = filterFileSearchResults(files, searchTerm); + + const handleContextMenu = (event) => { + event.preventDefault(); + setContextMenu({ visible: true, x: event.clientX, y: event.clientY }); + }; + + const closeContextMenu = () => { + setContextMenu({ visible: false, x: 0, y: 0 }); + }; + + return ( + <> +

My Documents

+ + +

+ +

Name

+ +

+ {loading ? ( +

+ +

+ {loadingMessage} +

+ ) : filteredFiles.length > 0 ? ( + filteredFiles.map( + (item, index) => + item.type === "folder" && ( + toggleSelection(item)} + toggleSelection={toggleSelection} + isSelected={isSelected} + autoExpanded={index === 0} + /> + ) + ) + ) : ( +

+ No Documents +

+ )} +

+ {amountSelected !== 0 && ( +

+ +

+ + {showFolderSelection && ( + item.type === "folder" + )} + onSelect={moveToFolder} + onClose={() => setShowFolderSelection(false)} + /> + )} +

+ +

+ )} +

+ + +

+ {isFolderModalOpen && ( +

+ +

+ )} + +

+ + + ); +} + +/** + * Tooltips for the directory components. Renders when the directory is shown + * or updated so that tooltips are attached as the items are changed. + */ +function DirectoryTooltips() { + return ( + { + const data = safeJsonParse(content, null); + if (!data) return null; + return ( +

{data.title}

+ Date: {data.date} +

+ Type: {data.extension} +

+ ); + }} + /> + ); +} + +export default memo(Directory); diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/utils.js b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/utils.js new file mode 100644 index 0000000..3cce544 --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/utils.js @@ -0,0 +1,62 @@ +import strDistance from "js-levenshtein"; + +const LEVENSHTEIN_MIN = 2; + +// Regular expression pattern to match the v4 UUID and the ending .json +const uuidPattern = + /-[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/; +const jsonPattern = /\.json$/; + +// Function to strip UUID v4 and JSON from file names as that will impact search results. +export const stripUuidAndJsonFromString = (input = "") => { + return input + ?.replace(uuidPattern, "") // remove v4 uuid + ?.replace(jsonPattern, "") // remove trailing .json + ?.replace("-", " "); // turn slugged names into spaces +}; + +export function filterFileSearchResults(files = [], searchTerm = "") { + if (!searchTerm) return files?.items || []; + + const normalizedSearchTerm = searchTerm.toLowerCase().trim(); + + const searchResult = []; + for (const folder of files?.items) { + const folderNameNormalized = folder.name.toLowerCase(); + + // Check for exact match first, then fuzzy match + if (folderNameNormalized.includes(normalizedSearchTerm)) { + searchResult.push(folder); + continue; + } + + // Check children for matches + const fileSearchResults = []; + for (const file of folder?.items) { + const fileNameNormalized = stripUuidAndJsonFromString( + file.name + ).toLowerCase(); + + // Exact match check + if (fileNameNormalized.includes(normalizedSearchTerm)) { + fileSearchResults.push(file); + } + // Fuzzy match only if no exact matches found + else if ( + fileSearchResults.length === 0 && + strDistance(fileNameNormalized, normalizedSearchTerm) <= LEVENSHTEIN_MIN + ) { + fileSearchResults.push(file); + } + } + + if (fileSearchResults.length > 0) { + searchResult.push({ + ...folder, + items: fileSearchResults, + }); + } + } + + return searchResult; +} diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx new file mode 100644 index 0000000..e066fe9 --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx @@ -0,0 +1,151 @@ +import React, { useState, useEffect, memo } from "react"; +import truncate from "truncate"; +import { CheckCircle, XCircle } from "@phosphor-icons/react"; +import Workspace from "../../../../../../models/workspace"; +import { humanFileSize, milliToHms } from "../../../../../../utils/numbers"; +import PreLoader from "../../../../../Preloader"; + +function FileUploadProgressComponent({ + slug, + uuid, + file, + setFiles, + rejected = false, + reason = null, + onUploadSuccess, + onUploadError, + setLoading, + setLoadingMessage, +}) { + const [timerMs, setTimerMs] = useState(10); + const [status, setStatus] = useState("pending"); + const [error, setError] = useState(""); + const [isFadingOut, setIsFadingOut] = useState(false); + + const fadeOut = (cb) => { + setIsFadingOut(true); + cb?.(); + }; + + const beginFadeOut = () => { + setIsFadingOut(false); + setFiles((prev) => { + return prev.filter((item) => item.uid !== uuid); + }); + }; + + useEffect(() => { + async function uploadFile() { + setLoading(true); + setLoadingMessage("Uploading file..."); + const start = Number(new Date()); + const formData = new FormData(); + formData.append("file", file, file.name); + const timer = setInterval(() => { + setTimerMs(Number(new Date()) - start); + }, 100); + + // Chunk streaming not working in production so we just sit and wait + const { response, data } = await Workspace.uploadFile(slug, formData); + if (!response.ok) { + setStatus("failed"); + clearInterval(timer); + onUploadError(data.error); + setError(data.error); + } else { + setLoading(false); + setLoadingMessage(""); + setStatus("complete"); + clearInterval(timer); + onUploadSuccess(); + } + + // Begin fadeout timer to clear uploader queue. + setTimeout(() => { + fadeOut(() => setTimeout(() => beginFadeOut(), 300)); + }, 5000); + } + !!file && !rejected && uploadFile(); + }, []); + + if (rejected) { + return ( +

+ +

+ {truncate(file.name, 30)} +

+ {reason || "this file failed to upload"} +

+ ); + } + + if (status === "failed") { + return ( +

+ +

+ {truncate(file.name, 30)} +

+ {error} +

+ ); + } + + return ( +

+ {status !== "complete" ? ( +

+ +

+ ) : ( + + )} +

+ {truncate(file.name, 30)} +

+ {humanFileSize(file.size)} | {milliToHms(timerMs)} +

+ ); +} + +export default memo(FileUploadProgressComponent); diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx new file mode 100644 index 0000000..4dd04b0 --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx @@ -0,0 +1,159 @@ +import { CloudArrowUp } from "@phosphor-icons/react"; +import { useEffect, useState } from "react"; +import showToast from "../../../../../utils/toast"; +import System from "../../../../../models/system"; +import { useDropzone } from "react-dropzone"; +import { v4 } from "uuid"; +import FileUploadProgress from "./FileUploadProgress"; +import Workspace from "../../../../../models/workspace"; +import debounce from "lodash.debounce"; + +export default function UploadFile({ + workspace, + fetchKeys, + setLoading, + setLoadingMessage, +}) { + const [ready, setReady] = useState(false); + const [files, setFiles] = useState([]); + const [fetchingUrl, setFetchingUrl] = useState(false); + + const handleSendLink = async (e) => { + e.preventDefault(); + setLoading(true); + setLoadingMessage("Scraping link..."); + setFetchingUrl(true); + const formEl = e.target; + const form = new FormData(formEl); + const { response, data } = await Workspace.uploadLink( + workspace.slug, + form.get("link") + ); + if (!response.ok) { + showToast(`Error uploading link: ${data.error}`, "error"); + } else { + fetchKeys(true); + showToast("Link uploaded successfully", "success"); + formEl.reset(); + } + setLoading(false); + setFetchingUrl(false); + }; + + // Queue all fetchKeys calls through the same debouncer to prevent spamming the server. + // either a success or error will trigger a fetchKeys call so the UI is not stuck loading. + const debouncedFetchKeys = debounce(() => fetchKeys(true), 1000); + const handleUploadSuccess = () => debouncedFetchKeys(); + const handleUploadError = () => debouncedFetchKeys(); + + const onDrop = async (acceptedFiles, rejections) => { + const newAccepted = acceptedFiles.map((file) => { + return { + uid: v4(), + file, + }; + }); + const newRejected = rejections.map((file) => { + return { + uid: v4(), + file: file.file, + rejected: true, + reason: file.errors[0].code, + }; + }); + setFiles([...newAccepted, ...newRejected]); + }; + + useEffect(() => { + async function checkProcessorOnline() { + const online = await System.checkDocumentProcessorOnline(); + setReady(online); + } + checkProcessorOnline(); + }, []); + + const { getRootProps, getInputProps } = useDropzone({ + onDrop, + disabled: !ready, + }); + + return ( +

+ + {ready === false ? ( +

+ +

+ Document Processor Unavailable +

+ We can't upload your files right now because the document + processor is offline. Please try again later. +

+ ) : files.length === 0 ? ( +

+ +

+ Click to upload or drag and drop +

+ supports text files, csv's, spreadsheets, audio files, and more! +

+ ) : ( +

+ {files.map((file) => ( + + ))} +

+ )} +

+ or submit a link +

+ +

+ These files will be uploaded to the document processor running on this + AnythingLLM instance. These files are not sent or shared with a third + party. +

+ ); +} diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx new file mode 100644 index 0000000..f31a6e9 --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx @@ -0,0 +1,260 @@ +import { memo, useState } from "react"; +import { + formatDate, + getFileExtension, + middleTruncate, +} from "@/utils/directories"; +import { ArrowUUpLeft, Eye, File, PushPin } from "@phosphor-icons/react"; +import Workspace from "@/models/workspace"; +import showToast from "@/utils/toast"; +import System from "@/models/system"; + +export default function WorkspaceFileRow({ + item, + folderName, + workspace, + setLoading, + setLoadingMessage, + fetchKeys, + hasChanges, + movedItems, + selected, + toggleSelection, + disableSelection, + setSelectedItems, +}) { + const onRemoveClick = async (e) => { + e.stopPropagation(); + setLoading(true); + + try { + setLoadingMessage(`Removing file from workspace`); + await Workspace.modifyEmbeddings(workspace.slug, { + adds: [], + deletes: [`${folderName}/${item.name}`], + }); + await fetchKeys(true); + } catch (error) { + console.error("Failed to remove document:", error); + } + setSelectedItems({}); + setLoadingMessage(""); + setLoading(false); + }; + + function toggleRowSelection(e) { + if (disableSelection) return; + e.stopPropagation(); + toggleSelection(); + } + + function handleRowSelection(e) { + e.stopPropagation(); + toggleSelection(); + } + + const isMovedItem = movedItems?.some((movedItem) => movedItem.id === item.id); + return ( +

+ {!disableSelection ? ( +

+ {selected &&

} +

+ ) : null} +

+ +

+ {middleTruncate(item.title, 50)} +

+ {hasChanges ? ( +

+ ) : ( +

+ + + +

+ )} +

+ ); +} + +const PinItemToWorkspace = memo(({ workspace, docPath, item }) => { + const [pinned, setPinned] = useState( + item?.pinnedWorkspaces?.includes(workspace.id) || false + ); + const [hover, setHover] = useState(false); + const pinEvent = new CustomEvent("pinned_document"); + + const updatePinStatus = async (e) => { + try { + e.stopPropagation(); + if (!pinned) window.dispatchEvent(pinEvent); + const success = await Workspace.setPinForDocument( + workspace.slug, + docPath, + !pinned + ); + + if (!success) { + showToast(`Failed to ${!pinned ? "pin" : "unpin"} document.`, "error", { + clear: true, + }); + return; + } + + showToast( + `Document ${!pinned ? "pinned to" : "unpinned from"} workspace`, + "success", + { clear: true } + ); + setPinned(!pinned); + } catch (error) { + showToast(`Failed to pin document. ${error.message}`, "error", { + clear: true, + }); + return; + } + }; + + if (!item) return

; + + return ( +

setHover(true)} + onMouseLeave={() => setHover(false)} + className="flex gap-x-2 items-center hover:bg-theme-file-picker-hover p-[2px] rounded ml-2" + > + +

+ ); +}); + +const WatchForChanges = memo(({ workspace, docPath, item }) => { + const [watched, setWatched] = useState(item?.watched || false); + const [hover, setHover] = useState(false); + const watchEvent = new CustomEvent("watch_document_for_changes"); + + const updateWatchStatus = async () => { + try { + if (!watched) window.dispatchEvent(watchEvent); + const success = + await System.experimentalFeatures.liveSync.setWatchStatusForDocument( + workspace.slug, + docPath, + !watched + ); + + if (!success) { + showToast( + `Failed to ${!watched ? "watch" : "unwatch"} document.`, + "error", + { + clear: true, + } + ); + return; + } + + showToast( + `Document ${ + !watched + ? "will be watched for changes" + : "will no longer be watched for changes" + }.`, + "success", + { clear: true } + ); + setWatched(!watched); + } catch (error) { + showToast(`Failed to watch document. ${error.message}`, "error", { + clear: true, + }); + return; + } + }; + + if (!item || !item.canWatch) return

; + + return ( +

setHover(true)} + onMouseLeave={() => setHover(false)} + className="flex gap-x-2 items-center hover:bg-theme-file-picker-hover p-[2px] rounded ml-2" + > + +

+ ); +}); + +const RemoveItemFromWorkspace = ({ item, onClick }) => { + return ( +

+ +

+ ); +}; diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx new file mode 100644 index 0000000..18a73de --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx @@ -0,0 +1,456 @@ +import PreLoader from "@/components/Preloader"; +import { dollarFormat } from "@/utils/numbers"; +import WorkspaceFileRow from "./WorkspaceFileRow"; +import { memo, useEffect, useState } from "react"; +import ModalWrapper from "@/components/ModalWrapper"; +import { Eye, PushPin, X } from "@phosphor-icons/react"; +import { SEEN_DOC_PIN_ALERT, SEEN_WATCH_ALERT } from "@/utils/constants"; +import paths from "@/utils/paths"; +import { Link } from "react-router-dom"; +import Workspace from "@/models/workspace"; +import { Tooltip } from "react-tooltip"; +import { safeJsonParse } from "@/utils/request"; + +function WorkspaceDirectory({ + workspace, + files, + highlightWorkspace, + loading, + loadingMessage, + setLoadingMessage, + setLoading, + fetchKeys, + hasChanges, + saveChanges, + embeddingCosts, + movedItems, +}) { + const [selectedItems, setSelectedItems] = useState({}); + + const toggleSelection = (item) => { + setSelectedItems((prevSelectedItems) => { + const newSelectedItems = { ...prevSelectedItems }; + if (newSelectedItems[item.id]) { + delete newSelectedItems[item.id]; + } else { + newSelectedItems[item.id] = true; + } + return newSelectedItems; + }); + }; + + const toggleSelectAll = () => { + const allItems = files.items.flatMap((folder) => folder.items); + const allSelected = allItems.every((item) => selectedItems[item.id]); + if (allSelected) { + setSelectedItems({}); + } else { + const newSelectedItems = {}; + allItems.forEach((item) => { + newSelectedItems[item.id] = true; + }); + setSelectedItems(newSelectedItems); + } + }; + + const removeSelectedItems = async () => { + setLoading(true); + setLoadingMessage("Removing selected files from workspace"); + + const itemsToRemove = Object.keys(selectedItems).map((itemId) => { + const folder = files.items.find((f) => + f.items.some((i) => i.id === itemId) + ); + const item = folder.items.find((i) => i.id === itemId); + return `${folder.name}/${item.name}`; + }); + + try { + await Workspace.modifyEmbeddings(workspace.slug, { + adds: [], + deletes: itemsToRemove, + }); + await fetchKeys(true); + setSelectedItems({}); + } catch (error) { + console.error("Failed to remove documents:", error); + } + + setLoadingMessage(""); + setLoading(false); + }; + + const handleSaveChanges = (e) => { + setSelectedItems({}); + saveChanges(e); + }; + + if (loading) { + return ( +

+ {workspace.name} +

Name

+ +

+ {loadingMessage} +

+ ); + } + + return ( + <> +

+ {workspace.name} +

+ {!hasChanges && + files.items.some((folder) => folder.items.length > 0) ? ( +

sum + folder.items.length, + 0 + ) + } + tabIndex={0} + onClick={toggleSelectAll} + > + {Object.keys(selectedItems).length === + files.items.reduce( + (sum, folder) => sum + folder.items.length, + 0 + ) &&

} +

+ ) : ( +

+ )} +

Name

+ {files.items.some((folder) => folder.items.length > 0) || + movedItems.length > 0 ? ( + + {({ item, folder }) => ( + toggleSelection(item)} + disableSelection={hasChanges} + setSelectedItems={setSelectedItems} + /> + )} + + ) : ( +

+ No Documents +

+ )} +

+ + {Object.keys(selectedItems).length > 0 && !hasChanges && ( +

+ + +

+ )} +

+ {hasChanges && ( +

+ {embeddingCosts === 0 + ? "" + : `Estimated Cost: ${ + embeddingCosts < 0.01 + ? `< $0.01` + : dollarFormat(embeddingCosts) + }`} +

+ +

+ + +

+ )} +

+ + + + + ); +} + +const PinAlert = memo(() => { + const [showAlert, setShowAlert] = useState(false); + function dismissAlert() { + setShowAlert(false); + window.localStorage.setItem(SEEN_DOC_PIN_ALERT, "1"); + window.removeEventListener(handlePinEvent); + } + + function handlePinEvent() { + if (!!window?.localStorage?.getItem(SEEN_DOC_PIN_ALERT)) return; + setShowAlert(true); + } + + useEffect(() => { + if (!window || !!window?.localStorage?.getItem(SEEN_DOC_PIN_ALERT)) return; + window?.addEventListener("pinned_document", handlePinEvent); + }, []); + + return ( + +

+ +

+ What is document pinning? +

+ When you pin a document in AnythingLLM we will inject the + entire content of the document into your prompt window for your + LLM to fully comprehend. +

+ This works best with large-context models or small files + that are critical to its knowledge-base. +

+ If you are not getting the answers you desire from AnythingLLM by + default then pinning is a great way to get higher quality answers + in a click. +

+ +

+ + ); +}); + +const DocumentWatchAlert = memo(() => { + const [showAlert, setShowAlert] = useState(false); + function dismissAlert() { + setShowAlert(false); + window.localStorage.setItem(SEEN_WATCH_ALERT, "1"); + window.removeEventListener(handlePinEvent); + } + + function handlePinEvent() { + if (!!window?.localStorage?.getItem(SEEN_WATCH_ALERT)) return; + setShowAlert(true); + } + + useEffect(() => { + if (!window || !!window?.localStorage?.getItem(SEEN_WATCH_ALERT)) return; + window?.addEventListener("watch_document_for_changes", handlePinEvent); + }, []); + + return ( + +

+ +

+ What does watching a document do? +

+ When you watch a document in AnythingLLM we will{" "} + automatically sync your document content from it's original + source on regular intervals. This will automatically update the + content in every workspace where this file is managed. +

+ This feature currently supports online-based content and will not + be available for manually uploaded documents. +

+ You can manage what documents are watched from the{" "} + + File manager + {" "} + admin view. +

+ +

+ + ); +}); + +function RenderFileRows({ files, movedItems, children }) { + function sortMovedItemsAndFiles(a, b) { + const aIsMovedItem = movedItems.some((movedItem) => movedItem.id === a.id); + const bIsMovedItem = movedItems.some((movedItem) => movedItem.id === b.id); + if (aIsMovedItem && !bIsMovedItem) return -1; + if (!aIsMovedItem && bIsMovedItem) return 1; + return 0; + } + + return files.items + .flatMap((folder) => folder.items) + .sort(sortMovedItemsAndFiles) + .map((item) => { + const folder = files.items.find((f) => f.items.includes(item)); + return children({ item, folder }); + }); +} + +/** + * Tooltips for the workspace directory components. Renders when the workspace directory is shown + * or updated so that tooltips are attached as the items are changed. + */ +function WorkspaceDocumentTooltips() { + return ( + <> + { + const data = safeJsonParse(content, null); + if (!data) return null; + return ( +

+ {data.title} +

+ Date: {data.date} +

+ Type: {data.extension} +

+ ); + }} + /> + + + + + ); +} + +export default memo(WorkspaceDirectory); diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/index.jsx new file mode 100644 index 0000000..98244d5 --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/index.jsx @@ -0,0 +1,230 @@ +import { ArrowsDownUp } from "@phosphor-icons/react"; +import { useEffect, useState } from "react"; +import Workspace from "../../../../models/workspace"; +import System from "../../../../models/system"; +import showToast from "../../../../utils/toast"; +import Directory from "./Directory"; +import WorkspaceDirectory from "./WorkspaceDirectory"; + +// OpenAI Cost per token +// ref: https://openai.com/pricing#:~:text=%C2%A0/%201K%20tokens-,Embedding%20models,-Build%20advanced%20search + +const MODEL_COSTS = { + "text-embedding-ada-002": 0.0000001, // $0.0001 / 1K tokens + "text-embedding-3-small": 0.00000002, // $0.00002 / 1K tokens + "text-embedding-3-large": 0.00000013, // $0.00013 / 1K tokens +}; + +export default function DocumentSettings({ workspace, systemSettings }) { + const [highlightWorkspace, setHighlightWorkspace] = useState(false); + const [availableDocs, setAvailableDocs] = useState([]); + const [loading, setLoading] = useState(true); + const [workspaceDocs, setWorkspaceDocs] = useState([]); + const [selectedItems, setSelectedItems] = useState({}); + const [hasChanges, setHasChanges] = useState(false); + const [movedItems, setMovedItems] = useState([]); + const [embeddingsCost, setEmbeddingsCost] = useState(0); + const [loadingMessage, setLoadingMessage] = useState(""); + + async function fetchKeys(refetchWorkspace = false) { + setLoading(true); + const localFiles = await System.localFiles(); + const currentWorkspace = refetchWorkspace + ? await Workspace.bySlug(workspace.slug) + : workspace; + + const documentsInWorkspace = + currentWorkspace.documents.map((doc) => doc.docpath) || []; + + // Documents that are not in the workspace + const availableDocs = { + ...localFiles, + items: localFiles.items.map((folder) => { + if (folder.items && folder.type === "folder") { + return { + ...folder, + items: folder.items.filter( + (file) => + file.type === "file" && + !documentsInWorkspace.includes(`${folder.name}/${file.name}`) + ), + }; + } else { + return folder; + } + }), + }; + + // Documents that are already in the workspace + const workspaceDocs = { + ...localFiles, + items: localFiles.items.map((folder) => { + if (folder.items && folder.type === "folder") { + return { + ...folder, + items: folder.items.filter( + (file) => + file.type === "file" && + documentsInWorkspace.includes(`${folder.name}/${file.name}`) + ), + }; + } else { + return folder; + } + }), + }; + + setAvailableDocs(availableDocs); + setWorkspaceDocs(workspaceDocs); + setLoading(false); + } + + useEffect(() => { + fetchKeys(true); + }, []); + + const updateWorkspace = async (e) => { + e.preventDefault(); + setLoading(true); + showToast("Updating workspace...", "info", { autoClose: false }); + setLoadingMessage("This may take a while for large documents"); + + const changesToSend = { + adds: movedItems.map((item) => `${item.folderName}/${item.name}`), + }; + + setSelectedItems({}); + setHasChanges(false); + setHighlightWorkspace(false); + await Workspace.modifyEmbeddings(workspace.slug, changesToSend) + .then((res) => { + if (!!res.message) { + showToast(`Error: ${res.message}`, "error", { clear: true }); + return; + } + showToast("Workspace updated successfully.", "success", { + clear: true, + }); + }) + .catch((error) => { + showToast(`Workspace update failed: ${error}`, "error", { + clear: true, + }); + }); + + setMovedItems([]); + await fetchKeys(true); + setLoading(false); + setLoadingMessage(""); + }; + + const moveSelectedItemsToWorkspace = () => { + setHighlightWorkspace(false); + setHasChanges(true); + + const newMovedItems = []; + + for (const itemId of Object.keys(selectedItems)) { + for (const folder of availableDocs.items) { + const foundItem = folder.items.find((file) => file.id === itemId); + if (foundItem) { + newMovedItems.push({ ...foundItem, folderName: folder.name }); + break; + } + } + } + + let totalTokenCount = 0; + newMovedItems.forEach((item) => { + const { cached, token_count_estimate } = item; + if (!cached) { + totalTokenCount += token_count_estimate; + } + }); + + // Do not do cost estimation unless the embedding engine is OpenAi. + if (systemSettings?.EmbeddingEngine === "openai") { + const COST_PER_TOKEN = + MODEL_COSTS[ + systemSettings?.EmbeddingModelPref || "text-embedding-ada-002" + ]; + + const dollarAmount = (totalTokenCount / 1000) * COST_PER_TOKEN; + setEmbeddingsCost(dollarAmount); + } + + setMovedItems([...movedItems, ...newMovedItems]); + + let newAvailableDocs = JSON.parse(JSON.stringify(availableDocs)); + let newWorkspaceDocs = JSON.parse(JSON.stringify(workspaceDocs)); + + for (const itemId of Object.keys(selectedItems)) { + let foundItem = null; + let foundFolderIndex = null; + + newAvailableDocs.items = newAvailableDocs.items.map( + (folder, folderIndex) => { + const remainingItems = folder.items.filter((file) => { + const match = file.id === itemId; + if (match) { + foundItem = { ...file }; + foundFolderIndex = folderIndex; + } + return !match; + }); + + return { + ...folder, + items: remainingItems, + }; + } + ); + + if (foundItem) { + newWorkspaceDocs.items[foundFolderIndex].items.push(foundItem); + } + } + + setAvailableDocs(newAvailableDocs); + setWorkspaceDocs(newWorkspaceDocs); + setSelectedItems({}); + }; + + return ( +

+ +

+ ); +} diff --git a/frontend/src/components/Modals/ManageWorkspace/index.jsx b/frontend/src/components/Modals/ManageWorkspace/index.jsx new file mode 100644 index 0000000..33c9fa8 --- /dev/null +++ b/frontend/src/components/Modals/ManageWorkspace/index.jsx @@ -0,0 +1,172 @@ +import React, { useState, useEffect, memo } from "react"; +import { X } from "@phosphor-icons/react"; +import { useParams } from "react-router-dom"; +import Workspace from "../../../models/workspace"; +import System from "../../../models/system"; +import { isMobile } from "react-device-detect"; +import useUser from "../../../hooks/useUser"; +import DocumentSettings from "./Documents"; +import DataConnectors from "./DataConnectors"; +import ModalWrapper from "@/components/ModalWrapper"; + +const noop = () => {}; +const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => { + const { slug } = useParams(); + const { user } = useUser(); + const [workspace, setWorkspace] = useState(null); + const [settings, setSettings] = useState({}); + const [selectedTab, setSelectedTab] = useState("documents"); + + useEffect(() => { + async function getSettings() { + const _settings = await System.keys(); + setSettings(_settings ?? {}); + } + getSettings(); + }, []); + + useEffect(() => { + async function fetchWorkspace() { + const workspace = await Workspace.bySlug(providedSlug ?? slug); + setWorkspace(workspace); + } + fetchWorkspace(); + }, [providedSlug, slug]); + + if (!workspace) return null; + + if (isMobile) { + return ( + +

+ Editing "{workspace.name}" +

+ +

+ Editing these settings are only available on a desktop device. + Please access this page on your desktop to continue. +

+ +

+ + ); + } + + return ( +

+ +

+ + {user?.role !== "default" && ( + + )} + + {selectedTab === "documents" ? ( + + ) : ( + + )} +

+ ); +}; + +export default memo(ManageWorkspace); + +const ModalTabSwitcher = ({ selectedTab, setSelectedTab }) => { + return ( +

+ + +

+ ); +}; + +export function useManageWorkspaceModal() { + const { user } = useUser(); + const [showing, setShowing] = useState(false); + + function showModal() { + if (user?.role !== "default") { + setShowing(true); + } + } + + function hideModal() { + setShowing(false); + } + + useEffect(() => { + function onEscape(event) { + if (!showing || event.key !== "Escape") return; + setShowing(false); + } + + document.addEventListener("keydown", onEscape); + return () => { + document.removeEventListener("keydown", onEscape); + }; + }, [showing]); + + return { showing, showModal, hideModal }; +} diff --git a/frontend/src/components/Modals/NewWorkspace.jsx b/frontend/src/components/Modals/NewWorkspace.jsx new file mode 100644 index 0000000..5eed377 --- /dev/null +++ b/frontend/src/components/Modals/NewWorkspace.jsx @@ -0,0 +1,97 @@ +import React, { useRef, useState } from "react"; +import { X } from "@phosphor-icons/react"; +import Workspace from "@/models/workspace"; +import paths from "@/utils/paths"; +import { useTranslation } from "react-i18next"; +import ModalWrapper from "@/components/ModalWrapper"; + +const noop = () => false; +export default function NewWorkspaceModal({ hideModal = noop }) { + const formEl = useRef(null); + const [error, setError] = useState(null); + const { t } = useTranslation(); + const handleCreate = async (e) => { + setError(null); + e.preventDefault(); + const data = {}; + const form = new FormData(formEl.current); + for (var [key, value] of form.entries()) data[key] = value; + const { workspace, message } = await Workspace.new(data); + if (!!workspace) { + window.location.href = paths.workspace.chat(workspace.slug); + } + setError(message); + }; + + return ( + +

+ {t("new-workspace.title")} +

+ +

+ + ); +} + +export function useNewWorkspaceModal() { + const [showing, setShowing] = useState(false); + const showModal = () => { + setShowing(true); + }; + const hideModal = () => { + setShowing(false); + }; + + return { showing, showModal, hideModal }; +} diff --git a/frontend/src/components/Modals/Password/MultiUserAuth.jsx b/frontend/src/components/Modals/Password/MultiUserAuth.jsx new file mode 100644 index 0000000..30036ff --- /dev/null +++ b/frontend/src/components/Modals/Password/MultiUserAuth.jsx @@ -0,0 +1,357 @@ +import React, { useEffect, useState } from "react"; +import System from "../../../models/system"; +import { AUTH_TOKEN, AUTH_USER } from "../../../utils/constants"; +import paths from "../../../utils/paths"; +import showToast from "@/utils/toast"; +import ModalWrapper from "@/components/ModalWrapper"; +import { useModal } from "@/hooks/useModal"; +import RecoveryCodeModal from "@/components/Modals/DisplayRecoveryCodeModal"; +import { useTranslation } from "react-i18next"; +import { t } from "i18next"; + +const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => { + const [username, setUsername] = useState(""); + const [recoveryCodeInputs, setRecoveryCodeInputs] = useState( + Array(2).fill("") + ); + + const handleRecoveryCodeChange = (index, value) => { + const updatedCodes = [...recoveryCodeInputs]; + updatedCodes[index] = value; + setRecoveryCodeInputs(updatedCodes); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + const recoveryCodes = recoveryCodeInputs.filter( + (code) => code.trim() !== "" + ); + onSubmit(username, recoveryCodes); + }; + + return ( +

+ {t("login.password-reset.title")} +

+ {t("login.password-reset.description")} +

+ + {t("login.multi-user.placeholder-username")} + + setUsername(e.target.value)} + className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" + required + /> +

+ + {t("login.password-reset.recovery-codes")} + + {recoveryCodeInputs.map((code, index) => ( +

+ + handleRecoveryCodeChange(index, e.target.value) + } + className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" + required + /> +

+ ))} +

+ + +

+ ); +}; + +const ResetPasswordForm = ({ onSubmit }) => { + const [newPassword, setNewPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + + const handleSubmit = (e) => { + e.preventDefault(); + onSubmit(newPassword, confirmPassword); + }; + + return ( +

+ Reset Password +

+ Enter your new password. +

+ setNewPassword(e.target.value)} + className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" + required + /> +

+ setConfirmPassword(e.target.value)} + className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" + required + /> +

+ +

+ ); +}; + +export default function MultiUserAuth() { + const { t } = useTranslation(); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const [recoveryCodes, setRecoveryCodes] = useState([]); + const [downloadComplete, setDownloadComplete] = useState(false); + const [user, setUser] = useState(null); + const [token, setToken] = useState(null); + const [showRecoveryForm, setShowRecoveryForm] = useState(false); + const [showResetPasswordForm, setShowResetPasswordForm] = useState(false); + const [customAppName, setCustomAppName] = useState(null); + + const { + isOpen: isRecoveryCodeModalOpen, + openModal: openRecoveryCodeModal, + closeModal: closeRecoveryCodeModal, + } = useModal(); + + const handleLogin = async (e) => { + setError(null); + setLoading(true); + e.preventDefault(); + const data = {}; + const form = new FormData(e.target); + for (var [key, value] of form.entries()) data[key] = value; + const { valid, user, token, message, recoveryCodes } = + await System.requestToken(data); + if (valid && !!token && !!user) { + setUser(user); + setToken(token); + + if (recoveryCodes) { + setRecoveryCodes(recoveryCodes); + openRecoveryCodeModal(); + } else { + window.localStorage.setItem(AUTH_USER, JSON.stringify(user)); + window.localStorage.setItem(AUTH_TOKEN, token); + window.location = paths.home(); + } + } else { + setError(message); + setLoading(false); + } + setLoading(false); + }; + + const handleDownloadComplete = () => setDownloadComplete(true); + const handleResetPassword = () => setShowRecoveryForm(true); + const handleRecoverySubmit = async (username, recoveryCodes) => { + const { success, resetToken, error } = await System.recoverAccount( + username, + recoveryCodes + ); + + if (success && resetToken) { + window.localStorage.setItem("resetToken", resetToken); + setShowRecoveryForm(false); + setShowResetPasswordForm(true); + } else { + showToast(error, "error", { clear: true }); + } + }; + + const handleResetSubmit = async (newPassword, confirmPassword) => { + const resetToken = window.localStorage.getItem("resetToken"); + + if (resetToken) { + const { success, error } = await System.resetPassword( + resetToken, + newPassword, + confirmPassword + ); + + if (success) { + window.localStorage.removeItem("resetToken"); + setShowResetPasswordForm(false); + showToast("Password reset successful", "success", { clear: true }); + } else { + showToast(error, "error", { clear: true }); + } + } else { + showToast("Invalid reset token", "error", { clear: true }); + } + }; + + useEffect(() => { + if (downloadComplete && user && token) { + window.localStorage.setItem(AUTH_USER, JSON.stringify(user)); + window.localStorage.setItem(AUTH_TOKEN, token); + window.location = paths.home(); + } + }, [downloadComplete, user, token]); + + useEffect(() => { + const fetchCustomAppName = async () => { + const { appName } = await System.fetchCustomAppName(); + setCustomAppName(appName || ""); + setLoading(false); + }; + fetchCustomAppName(); + }, []); + + if (showRecoveryForm) { + return ( + + ); + } + + if (showResetPasswordForm) + return ; + return ( + <> +

+ {t("login.multi-user.welcome")} +

+ {customAppName || "AnythingLLM"} +

+ {t("login.sign-in.start")} {customAppName || "AnythingLLM"}{" "} + {t("login.sign-in.end")} +

+ +

+ {error &&

Error: {error}

} +

+ + +

+ + + + + + ); +} diff --git a/frontend/src/components/Modals/Password/SingleUserAuth.jsx b/frontend/src/components/Modals/Password/SingleUserAuth.jsx new file mode 100644 index 0000000..06e3d78 --- /dev/null +++ b/frontend/src/components/Modals/Password/SingleUserAuth.jsx @@ -0,0 +1,128 @@ +import React, { useEffect, useState } from "react"; +import System from "../../../models/system"; +import { AUTH_TOKEN } from "../../../utils/constants"; +import paths from "../../../utils/paths"; +import ModalWrapper from "@/components/ModalWrapper"; +import { useModal } from "@/hooks/useModal"; +import RecoveryCodeModal from "@/components/Modals/DisplayRecoveryCodeModal"; +import { useTranslation } from "react-i18next"; + +export default function SingleUserAuth() { + const { t } = useTranslation(); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const [recoveryCodes, setRecoveryCodes] = useState([]); + const [downloadComplete, setDownloadComplete] = useState(false); + const [token, setToken] = useState(null); + const [customAppName, setCustomAppName] = useState(null); + + const { + isOpen: isRecoveryCodeModalOpen, + openModal: openRecoveryCodeModal, + closeModal: closeRecoveryCodeModal, + } = useModal(); + + const handleLogin = async (e) => { + setError(null); + setLoading(true); + e.preventDefault(); + const data = {}; + const form = new FormData(e.target); + for (var [key, value] of form.entries()) data[key] = value; + const { valid, token, message, recoveryCodes } = + await System.requestToken(data); + if (valid && !!token) { + setToken(token); + if (recoveryCodes) { + setRecoveryCodes(recoveryCodes); + openRecoveryCodeModal(); + } else { + window.localStorage.setItem(AUTH_TOKEN, token); + window.location = paths.home(); + } + } else { + setError(message); + setLoading(false); + } + setLoading(false); + }; + + const handleDownloadComplete = () => { + setDownloadComplete(true); + }; + + useEffect(() => { + if (downloadComplete && token) { + window.localStorage.setItem(AUTH_TOKEN, token); + window.location = paths.home(); + } + }, [downloadComplete, token]); + + useEffect(() => { + const fetchCustomAppName = async () => { + const { appName } = await System.fetchCustomAppName(); + setCustomAppName(appName || ""); + setLoading(false); + }; + fetchCustomAppName(); + }, []); + + return ( + <> + + + + + + + ); +} diff --git a/frontend/src/components/Modals/Password/index.jsx b/frontend/src/components/Modals/Password/index.jsx new file mode 100644 index 0000000..6f3f24e --- /dev/null +++ b/frontend/src/components/Modals/Password/index.jsx @@ -0,0 +1,152 @@ +import React, { useState, useEffect } from "react"; +import System from "../../../models/system"; +import SingleUserAuth from "./SingleUserAuth"; +import MultiUserAuth from "./MultiUserAuth"; +import { + AUTH_TOKEN, + AUTH_USER, + AUTH_TIMESTAMP, +} from "../../../utils/constants"; +import useLogo from "../../../hooks/useLogo"; +import illustration from "@/media/illustrations/login-illustration.svg"; + +export default function PasswordModal({ mode = "single" }) { + const { loginLogo } = useLogo(); + return ( +

+ {mode === "single" ? : } +

+ ); +} + +export function usePasswordModal(notry = false) { + const [auth, setAuth] = useState({ + loading: true, + requiresAuth: false, + mode: "single", + }); + + useEffect(() => { + async function checkAuthReq() { + if (!window) return; + + // If the last validity check is still valid + // we can skip the loading. + if (!System.needsAuthCheck() && notry === false) { + setAuth({ + loading: false, + requiresAuth: false, + mode: "multi", + }); + return; + } + + const settings = await System.keys(); + if (settings?.MultiUserMode) { + const currentToken = window.localStorage.getItem(AUTH_TOKEN); + if (!!currentToken) { + const valid = notry ? false : await System.checkAuth(currentToken); + if (!valid) { + setAuth({ + loading: false, + requiresAuth: true, + mode: "multi", + }); + window.localStorage.removeItem(AUTH_USER); + window.localStorage.removeItem(AUTH_TOKEN); + window.localStorage.removeItem(AUTH_TIMESTAMP); + return; + } else { + setAuth({ + loading: false, + requiresAuth: false, + mode: "multi", + }); + return; + } + } else { + setAuth({ + loading: false, + requiresAuth: true, + mode: "multi", + }); + return; + } + } else { + // Running token check in single user Auth mode. + // If Single user Auth is disabled - skip check + const requiresAuth = settings?.RequiresAuth || false; + if (!requiresAuth) { + setAuth({ + loading: false, + requiresAuth: false, + mode: "single", + }); + return; + } + + const currentToken = window.localStorage.getItem(AUTH_TOKEN); + if (!!currentToken) { + const valid = notry ? false : await System.checkAuth(currentToken); + if (!valid) { + setAuth({ + loading: false, + requiresAuth: true, + mode: "single", + }); + window.localStorage.removeItem(AUTH_TOKEN); + window.localStorage.removeItem(AUTH_USER); + window.localStorage.removeItem(AUTH_TIMESTAMP); + return; + } else { + setAuth({ + loading: false, + requiresAuth: false, + mode: "single", + }); + return; + } + } else { + setAuth({ + loading: false, + requiresAuth: true, + mode: "single", + }); + return; + } + } + } + checkAuthReq(); + }, []); + + return auth; +} diff --git a/frontend/src/components/Preloader.jsx b/frontend/src/components/Preloader.jsx new file mode 100644 index 0000000..ce17582 --- /dev/null +++ b/frontend/src/components/Preloader.jsx @@ -0,0 +1,18 @@ +export default function PreLoader({ size = "16" }) { + return ( +

+ ); +} + +export function FullScreenLoader() { + return ( +

+ ); +} diff --git a/frontend/src/components/PrivateRoute/index.jsx b/frontend/src/components/PrivateRoute/index.jsx new file mode 100644 index 0000000..98308fe --- /dev/null +++ b/frontend/src/components/PrivateRoute/index.jsx @@ -0,0 +1,145 @@ +import { useEffect, useState } from "react"; +import { Navigate } from "react-router-dom"; +import { FullScreenLoader } from "../Preloader"; +import validateSessionTokenForUser from "@/utils/session"; +import paths from "@/utils/paths"; +import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants"; +import { userFromStorage } from "@/utils/request"; +import System from "@/models/system"; +import UserMenu from "../UserMenu"; + +// Used only for Multi-user mode only as we permission specific pages based on auth role. +// When in single user mode we just bypass any authchecks. +function useIsAuthenticated() { + const [isAuthd, setIsAuthed] = useState(null); + const [shouldRedirectToOnboarding, setShouldRedirectToOnboarding] = + useState(false); + const [multiUserMode, setMultiUserMode] = useState(false); + + useEffect(() => { + const validateSession = async () => { + const { + MultiUserMode, + RequiresAuth, + LLMProvider = null, + VectorDB = null, + } = await System.keys(); + + setMultiUserMode(MultiUserMode); + + // Check for the onboarding redirect condition + if ( + !MultiUserMode && + !RequiresAuth && // Not in Multi-user AND no password set. + !LLMProvider && + !VectorDB + ) { + setShouldRedirectToOnboarding(true); + setIsAuthed(true); + return; + } + + if (!MultiUserMode && !RequiresAuth) { + setIsAuthed(true); + return; + } + + // Single User password mode check + if (!MultiUserMode && RequiresAuth) { + const localAuthToken = localStorage.getItem(AUTH_TOKEN); + if (!localAuthToken) { + setIsAuthed(false); + return; + } + + const isValid = await validateSessionTokenForUser(); + setIsAuthed(isValid); + return; + } + + const localUser = localStorage.getItem(AUTH_USER); + const localAuthToken = localStorage.getItem(AUTH_TOKEN); + if (!localUser || !localAuthToken) { + setIsAuthed(false); + return; + } + + const isValid = await validateSessionTokenForUser(); + if (!isValid) { + localStorage.removeItem(AUTH_USER); + localStorage.removeItem(AUTH_TOKEN); + localStorage.removeItem(AUTH_TIMESTAMP); + setIsAuthed(false); + return; + } + + setIsAuthed(true); + }; + validateSession(); + }, []); + + return { isAuthd, shouldRedirectToOnboarding, multiUserMode }; +} + +// Allows only admin to access the route and if in single user mode, +// allows all users to access the route +export function AdminRoute({ Component, hideUserMenu = false }) { + const { isAuthd, shouldRedirectToOnboarding, multiUserMode } = + useIsAuthenticated(); + if (isAuthd === null) return ; + + if (shouldRedirectToOnboarding) { + return ; + } + + const user = userFromStorage(); + return isAuthd && (user?.role === "admin" || !multiUserMode) ? ( + hideUserMenu ? ( + + ) : ( + + + + ) + ) : ( + + ); +} + +// Allows manager and admin to access the route and if in single user mode, +// allows all users to access the route +export function ManagerRoute({ Component }) { + const { isAuthd, shouldRedirectToOnboarding, multiUserMode } = + useIsAuthenticated(); + if (isAuthd === null) return ; + + if (shouldRedirectToOnboarding) { + return ; + } + + const user = userFromStorage(); + return isAuthd && (user?.role !== "default" || !multiUserMode) ? ( + + + + ) : ( + + ); +} + +export default function PrivateRoute({ Component }) { + const { isAuthd, shouldRedirectToOnboarding } = useIsAuthenticated(); + if (isAuthd === null) return ; + + if (shouldRedirectToOnboarding) { + return ; + } + + return isAuthd ? ( + + + + ) : ( + + ); +} diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx new file mode 100644 index 0000000..98140bc --- /dev/null +++ b/frontend/src/components/SettingsButton/index.jsx @@ -0,0 +1,50 @@ +import useUser from "@/hooks/useUser"; +import paths from "@/utils/paths"; +import { ArrowUUpLeft, Wrench } from "@phosphor-icons/react"; +import { Link } from "react-router-dom"; +import { useMatch } from "react-router-dom"; + +export default function SettingsButton() { + const isInSettings = !!useMatch("/settings/*"); + const { user } = useUser(); + + if (user && user?.role === "default") return null; + + if (isInSettings) + return ( +

+ + + +

+ ); + + return ( +

+ + + +

+ ); +} diff --git a/frontend/src/components/SettingsSidebar/MenuOption/index.jsx b/frontend/src/components/SettingsSidebar/MenuOption/index.jsx new file mode 100644 index 0000000..7b2e429 --- /dev/null +++ b/frontend/src/components/SettingsSidebar/MenuOption/index.jsx @@ -0,0 +1,187 @@ +import React, { useEffect, useState } from "react"; +import { CaretRight } from "@phosphor-icons/react"; +import { Link, useLocation } from "react-router-dom"; + +export default function MenuOption({ + btnText, + icon, + href, + childOptions = [], + flex = false, + user = null, + roles = [], + hidden = false, + isChild = false, +}) { + const storageKey = generateStorageKey({ key: btnText }); + const location = useLocation(); + const hasChildren = childOptions.length > 0; + const hasVisibleChildren = hasVisibleOptions(user, childOptions); + const { isExpanded, setIsExpanded } = useIsExpanded({ + storageKey, + hasVisibleChildren, + childOptions, + location: location.pathname, + }); + + if (hidden) return null; + + // If this option is a parent level option + if (!isChild) { + // and has no children then use its flex props and roles prop directly + if (!hasChildren) { + if (!flex && !roles.includes(user?.role)) return null; + if (flex && !!user && !roles.includes(user?.role)) return null; + } + + // if has children and no visible children - remove it. + if (hasChildren && !hasVisibleChildren) return null; + } else { + // is a child so we use it's permissions + if (!flex && !roles.includes(user?.role)) return null; + if (flex && !!user && !roles.includes(user?.role)) return null; + } + + const isActive = hasChildren + ? (!isExpanded && + childOptions.some((child) => child.href === location.pathname)) || + location.pathname === href + : location.pathname === href; + + const handleClick = (e) => { + if (hasChildren) { + e.preventDefault(); + const newExpandedState = !isExpanded; + setIsExpanded(newExpandedState); + localStorage.setItem(storageKey, JSON.stringify(newExpandedState)); + } + }; + + return ( +

+ + {icon} +

+ {btnText} +

+ + {hasChildren && ( + + )} +

+ {isExpanded && hasChildren && ( +

+ {childOptions.map((childOption, index) => ( + + ))} +

+ )} +

+ ); +} + +function useIsExpanded({ + storageKey = "", + hasVisibleChildren = false, + childOptions = [], + location = null, +}) { + const [isExpanded, setIsExpanded] = useState(() => { + if (hasVisibleChildren) { + const storedValue = localStorage.getItem(storageKey); + if (storedValue !== null) { + return JSON.parse(storedValue); + } + return childOptions.some((child) => child.href === location); + } + return false; + }); + + useEffect(() => { + if (hasVisibleChildren) { + const shouldExpand = childOptions.some( + (child) => child.href === location + ); + if (shouldExpand && !isExpanded) { + setIsExpanded(true); + localStorage.setItem(storageKey, JSON.stringify(true)); + } + } + }, [location]); + + return { isExpanded, setIsExpanded }; +} + +/** + * Checks if the child options are visible to the user. + * This hides the top level options if the child options are not visible + * for either the users permissions or the child options hidden prop is set to true by other means. + * If all child options return false for `isVisible` then the parent option will not be visible as well. + * @param {object} user - The user object. + * @param {array} childOptions - The child options. + * @returns {boolean} - True if the child options are visible, false otherwise. + */ +function hasVisibleOptions(user = null, childOptions = []) { + if (!Array.isArray(childOptions) || childOptions?.length === 0) return false; + + function isVisible({ + roles = [], + user = null, + flex = false, + hidden = false, + }) { + if (hidden) return false; + if (!flex && !roles.includes(user?.role)) return false; + if (flex && !!user && !roles.includes(user?.role)) return false; + return true; + } + + return childOptions.some((opt) => + isVisible({ roles: opt.roles, user, flex: opt.flex, hidden: opt.hidden }) + ); +} + +function generateStorageKey({ key = "" }) { + const _key = key.replace(/\s+/g, "_").toLowerCase(); + return `anything_llm_menu_${_key}_expanded`; +} diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx new file mode 100644 index 0000000..a20c2fe --- /dev/null +++ b/frontend/src/components/SettingsSidebar/index.jsx @@ -0,0 +1,436 @@ +import React, { useEffect, useRef, useState } from "react"; +import paths from "@/utils/paths"; +import useLogo from "@/hooks/useLogo"; +import { + House, + List, + Robot, + Flask, + Gear, + UserCircleGear, + PencilSimpleLine, + Nut, + Toolbox, + Globe, +} from "@phosphor-icons/react"; +import useUser from "@/hooks/useUser"; +import { isMobile } from "react-device-detect"; +import Footer from "../Footer"; +import { Link } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import showToast from "@/utils/toast"; +import System from "@/models/system"; +import Option from "./MenuOption"; +import { CanViewChatHistoryProvider } from "../CanViewChatHistory"; + +export default function SettingsSidebar() { + const { t } = useTranslation(); + const { logo } = useLogo(); + const { user } = useUser(); + const sidebarRef = useRef(null); + const [showSidebar, setShowSidebar] = useState(false); + const [showBgOverlay, setShowBgOverlay] = useState(false); + + useEffect(() => { + function handleBg() { + if (showSidebar) { + setTimeout(() => { + setShowBgOverlay(true); + }, 300); + } else { + setShowBgOverlay(false); + } + } + handleBg(); + }, [showSidebar]); + + if (isMobile) { + return ( + <> +

+ +

setShowSidebar(false)} + /> +

+ {/* Header Information */} +

+ + + +

+ + {/* Primary Body */} +

+ +

+ + + {t("settings.privacy")} + +

+ + ); + } + + return ( + <> +

+ +

+ {t("settings.title")} +

+ +

+ + + {t("settings.privacy")} + +

+ + ); +} + +function SupportEmail() { + const [supportEmail, setSupportEmail] = useState(paths.mailToMintplex()); + const { t } = useTranslation(); + + useEffect(() => { + const fetchSupportEmail = async () => { + const supportEmail = await System.fetchSupportEmail(); + setSupportEmail( + supportEmail?.email + ? `mailto:${supportEmail.email}` + : paths.mailToMintplex() + ); + }; + fetchSupportEmail(); + }, []); + + return ( + + {t("settings.contact")} + + ); +} + +const SidebarOptions = ({ user = null, t }) => ( + + {({ viewable: canViewChatHistory }) => ( + <> + +); + +function HoldToReveal({ children, holdForMs = 3_000 }) { + let timeout = null; + const [showing, setShowing] = useState( + window.localStorage.getItem( + "anythingllm_experimental_feature_preview_unlocked" + ) + ); + + useEffect(() => { + const onPress = (e) => { + if (!["Control", "Meta"].includes(e.key) || timeout !== null) return; + timeout = setTimeout(() => { + setShowing(true); + // Setting toastId prevents hook spam from holding control too many times or the event not detaching + showToast("Experimental feature previews unlocked!"); + window.localStorage.setItem( + "anythingllm_experimental_feature_preview_unlocked", + "enabled" + ); + window.removeEventListener("keypress", onPress); + window.removeEventListener("keyup", onRelease); + clearTimeout(timeout); + }, holdForMs); + }; + const onRelease = (e) => { + if (!["Control", "Meta"].includes(e.key)) return; + if (showing) { + window.removeEventListener("keypress", onPress); + window.removeEventListener("keyup", onRelease); + clearTimeout(timeout); + return; + } + clearTimeout(timeout); + }; + + if (!showing) { + window.addEventListener("keydown", onPress); + window.addEventListener("keyup", onRelease); + } + return () => { + window.removeEventListener("keydown", onPress); + window.removeEventListener("keyup", onRelease); + }; + }, []); + + if (!showing) return null; + return children; +} diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx new file mode 100644 index 0000000..4c12b05 --- /dev/null +++ b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx @@ -0,0 +1,269 @@ +import Workspace from "@/models/workspace"; +import paths from "@/utils/paths"; +import showToast from "@/utils/toast"; +import { + ArrowCounterClockwise, + DotsThree, + PencilSimple, + Trash, + X, +} from "@phosphor-icons/react"; +import { useEffect, useRef, useState } from "react"; +import { useParams } from "react-router-dom"; +import truncate from "truncate"; + +const THREAD_CALLOUT_DETAIL_WIDTH = 26; +export default function ThreadItem({ + idx, + activeIdx, + isActive, + workspace, + thread, + onRemove, + toggleMarkForDeletion, + hasNext, + ctrlPressed = false, +}) { + const { slug, threadSlug = null } = useParams(); + const optionsContainer = useRef(null); + const [showOptions, setShowOptions] = useState(false); + const linkTo = !thread.slug + ? paths.workspace.chat(slug) + : paths.workspace.thread(slug, thread.slug); + + return ( +

+ {/* Curved line Element and leader if required */} +

+ {/* Downstroke border for next item */} + {hasNext && ( +

+ )} + + {/* Curved line inline placeholder for spacing - not visible */} +

+ {thread.deleted ? ( +

+ deleted thread +

+ {ctrlPressed && ( + + )} +

+ ) : ( + +

+ {truncate(thread.name, 25)} +

+ + )} + {!!thread.slug && !thread.deleted && ( +

+ {" "} + {/* Added flex and items-center */} + {ctrlPressed ? ( + + ) : ( +

+ +

+ )} + {showOptions && ( + setShowOptions(false)} + currentThreadSlug={threadSlug} + /> + )} +

+ )} +

+ ); +} + +function OptionsMenu({ + containerRef, + workspace, + thread, + onRemove, + close, + currentThreadSlug, +}) { + const menuRef = useRef(null); + + // Ref menu options + const outsideClick = (e) => { + if (!menuRef.current) return false; + if ( + !menuRef.current?.contains(e.target) && + !containerRef.current?.contains(e.target) + ) + close(); + return false; + }; + + const isEsc = (e) => { + if (e.key === "Escape" || e.key === "Esc") close(); + }; + + function cleanupListeners() { + window.removeEventListener("click", outsideClick); + window.removeEventListener("keyup", isEsc); + } + // end Ref menu options + + useEffect(() => { + function setListeners() { + if (!menuRef?.current || !containerRef.current) return false; + window.document.addEventListener("click", outsideClick); + window.document.addEventListener("keyup", isEsc); + } + + setListeners(); + return cleanupListeners; + }, [menuRef.current, containerRef.current]); + + const renameThread = async () => { + const name = window + .prompt("What would you like to rename this thread to?") + ?.trim(); + if (!name || name.length === 0) { + close(); + return; + } + + const { message } = await Workspace.threads.update( + workspace.slug, + thread.slug, + { name } + ); + if (!!message) { + showToast(`Thread could not be updated! ${message}`, "error", { + clear: true, + }); + close(); + return; + } + + thread.name = name; + close(); + }; + + const handleDelete = async () => { + if ( + !window.confirm( + "Are you sure you want to delete this thread? All of its chats will be deleted. You cannot undo this." + ) + ) + return; + const success = await Workspace.threads.delete(workspace.slug, thread.slug); + if (!success) { + showToast("Thread could not be deleted!", "error", { clear: true }); + return; + } + if (success) { + showToast("Thread deleted successfully!", "success", { clear: true }); + onRemove(thread.id); + // Redirect if deleting the active thread + if (currentThreadSlug === thread.slug) { + window.location.href = paths.workspace.chat(workspace.slug); + } + return; + } + }; + + return ( +

+ + +

+ ); +} diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx new file mode 100644 index 0000000..f9c0ea4 --- /dev/null +++ b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx @@ -0,0 +1,233 @@ +import Workspace from "@/models/workspace"; +import paths from "@/utils/paths"; +import showToast from "@/utils/toast"; +import { Plus, CircleNotch, Trash } from "@phosphor-icons/react"; +import { useEffect, useState } from "react"; +import ThreadItem from "./ThreadItem"; +import { useParams } from "react-router-dom"; +export const THREAD_RENAME_EVENT = "renameThread"; + +export default function ThreadContainer({ workspace }) { + const { threadSlug = null } = useParams(); + const [threads, setThreads] = useState([]); + const [loading, setLoading] = useState(true); + const [ctrlPressed, setCtrlPressed] = useState(false); + + useEffect(() => { + const chatHandler = (event) => { + const { threadSlug, newName } = event.detail; + setThreads((prevThreads) => + prevThreads.map((thread) => { + if (thread.slug === threadSlug) { + return { ...thread, name: newName }; + } + return thread; + }) + ); + }; + + window.addEventListener(THREAD_RENAME_EVENT, chatHandler); + + return () => { + window.removeEventListener(THREAD_RENAME_EVENT, chatHandler); + }; + }, []); + + useEffect(() => { + async function fetchThreads() { + if (!workspace.slug) return; + const { threads } = await Workspace.threads.all(workspace.slug); + setLoading(false); + setThreads(threads); + } + fetchThreads(); + }, [workspace.slug]); + + // Enable toggling of bulk-deletion by holding meta-key (ctrl on win and cmd/fn on others) + useEffect(() => { + const handleKeyDown = (event) => { + if (["Control", "Meta"].includes(event.key)) { + setCtrlPressed(true); + } + }; + + const handleKeyUp = (event) => { + if (["Control", "Meta"].includes(event.key)) { + setCtrlPressed(false); + // when toggling, unset bulk progress so + // previously marked threads that were never deleted + // come back to life. + setThreads((prev) => + prev.map((t) => { + return { ...t, deleted: false }; + }) + ); + } + }; + + window.addEventListener("keydown", handleKeyDown); + window.addEventListener("keyup", handleKeyUp); + + return () => { + window.removeEventListener("keydown", handleKeyDown); + window.removeEventListener("keyup", handleKeyUp); + }; + }, []); + + const toggleForDeletion = (id) => { + setThreads((prev) => + prev.map((t) => { + if (t.id !== id) return t; + return { ...t, deleted: !t.deleted }; + }) + ); + }; + + const handleDeleteAll = async () => { + const slugs = threads.filter((t) => t.deleted === true).map((t) => t.slug); + await Workspace.threads.deleteBulk(workspace.slug, slugs); + setThreads((prev) => prev.filter((t) => !t.deleted)); + + // Only redirect if current thread is being deleted + if (slugs.includes(threadSlug)) { + window.location.href = paths.workspace.chat(workspace.slug); + } + }; + + function removeThread(threadId) { + setThreads((prev) => + prev.map((_t) => { + if (_t.id !== threadId) return _t; + return { ..._t, deleted: true }; + }) + ); + + // Show thread was deleted, but then remove from threads entirely so it will + // not appear in bulk-selection. + setTimeout(() => { + setThreads((prev) => prev.filter((t) => !t.deleted)); + }, 500); + } + + if (loading) { + return ( +

loading threads....

+ ); + } + + const activeThreadIdx = !!threads.find( + (thread) => thread?.slug === threadSlug + ) + ? threads.findIndex((thread) => thread?.slug === threadSlug) + 1 + : 0; + + return ( +

+ 0} + /> + {threads.map((thread, i) => ( + + ))} + + +

+ ); +} + +function NewThreadButton({ workspace }) { + const [loading, setLoading] = useState(false); + const onClick = async () => { + setLoading(true); + const { thread, error } = await Workspace.threads.new(workspace.slug); + if (!!error) { + showToast(`Could not create thread - ${error}`, "error", { clear: true }); + setLoading(false); + return; + } + window.location.replace( + paths.workspace.thread(workspace.slug, thread.slug) + ); + }; + + return ( + + ); +} + +function DeleteAllThreadButton({ ctrlPressed, threads, onDelete }) { + if (!ctrlPressed || threads.filter((t) => t.deleted).length === 0) + return null; + return ( + + ); +} diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx new file mode 100644 index 0000000..5e9c9fb --- /dev/null +++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx @@ -0,0 +1,151 @@ +import React, { useState, useEffect } from "react"; +import * as Skeleton from "react-loading-skeleton"; +import "react-loading-skeleton/dist/skeleton.css"; +import Workspace from "@/models/workspace"; +import ManageWorkspace, { + useManageWorkspaceModal, +} from "../../Modals/ManageWorkspace"; +import paths from "@/utils/paths"; +import { useParams } from "react-router-dom"; +import { GearSix, SquaresFour, UploadSimple } from "@phosphor-icons/react"; +import useUser from "@/hooks/useUser"; +import ThreadContainer from "./ThreadContainer"; +import { Link, useMatch } from "react-router-dom"; + +export default function ActiveWorkspaces() { + const { slug } = useParams(); + const [loading, setLoading] = useState(true); + const [workspaces, setWorkspaces] = useState([]); + const [selectedWs, setSelectedWs] = useState(null); + const { showing, showModal, hideModal } = useManageWorkspaceModal(); + const { user } = useUser(); + const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab"); + + useEffect(() => { + async function getWorkspaces() { + const workspaces = await Workspace.all(); + setLoading(false); + setWorkspaces(workspaces); + } + getWorkspaces(); + }, []); + + if (loading) { + return ( + + ); + } + + return ( +

+ {workspaces.map((workspace) => { + const isActive = workspace.slug === slug; + return ( +

+ +

+ {workspace.name} +

+ {user?.role !== "default" && ( +

+ + + + +

+ )} +

+ +

+ {isActive && ( + + )} +

+ ); + })} + {showing && ( + + )} +

+ ); +} diff --git a/frontend/src/components/Sidebar/SidebarToggle/index.jsx b/frontend/src/components/Sidebar/SidebarToggle/index.jsx new file mode 100644 index 0000000..a0f47b6 --- /dev/null +++ b/frontend/src/components/Sidebar/SidebarToggle/index.jsx @@ -0,0 +1,105 @@ +import React, { useEffect, useState } from "react"; +import { SidebarSimple } from "@phosphor-icons/react"; +import paths from "@/utils/paths"; +import { Tooltip } from "react-tooltip"; +const SIDEBAR_TOGGLE_STORAGE_KEY = "anythingllm_sidebar_toggle"; + +/** + * Returns the previous state of the sidebar from localStorage. + * If the sidebar was closed, returns false. + * If the sidebar was open, returns true. + * If the sidebar state is not set, returns true. + * @returns {boolean} + */ +function previousSidebarState() { + const previousState = window.localStorage.getItem(SIDEBAR_TOGGLE_STORAGE_KEY); + if (previousState === "closed") return false; + return true; +} + +export function useSidebarToggle() { + const [showSidebar, setShowSidebar] = useState(previousSidebarState()); + const [canToggleSidebar, setCanToggleSidebar] = useState(true); + + useEffect(() => { + function checkPath() { + const currentPath = window.location.pathname; + const isVisible = + currentPath === paths.home() || + /^\/workspace\/[^\/]+$/.test(currentPath) || + /^\/workspace\/[^\/]+\/t\/[^\/]+$/.test(currentPath); + setCanToggleSidebar(isVisible); + } + checkPath(); + }, [window.location.pathname]); + + useEffect(() => { + function toggleSidebar(e) { + if (!canToggleSidebar) return; + if ( + (e.ctrlKey || e.metaKey) && + e.shiftKey && + e.key.toLowerCase() === "s" + ) { + setShowSidebar((prev) => { + const newState = !prev; + window.localStorage.setItem( + SIDEBAR_TOGGLE_STORAGE_KEY, + newState ? "open" : "closed" + ); + return newState; + }); + } + } + window.addEventListener("keydown", toggleSidebar); + return () => { + window.removeEventListener("keydown", toggleSidebar); + }; + }, []); + + useEffect(() => { + window.localStorage.setItem( + SIDEBAR_TOGGLE_STORAGE_KEY, + showSidebar ? "open" : "closed" + ); + }, [showSidebar]); + + return { showSidebar, setShowSidebar, canToggleSidebar }; +} + +export function ToggleSidebarButton({ showSidebar, setShowSidebar }) { + const isMac = navigator.userAgent.includes("Mac"); + const shortcut = isMac ? "⌘ + Shift + S" : "Ctrl + Shift + S"; + + return ( + <> + + + + ); +} diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx new file mode 100644 index 0000000..04a7fe4 --- /dev/null +++ b/frontend/src/components/Sidebar/index.jsx @@ -0,0 +1,206 @@ +import React, { useEffect, useRef, useState } from "react"; +import { Plus, List } from "@phosphor-icons/react"; +import NewWorkspaceModal, { + useNewWorkspaceModal, +} from "../Modals/NewWorkspace"; +import ActiveWorkspaces from "./ActiveWorkspaces"; +import useLogo from "@/hooks/useLogo"; +import useUser from "@/hooks/useUser"; +import Footer from "../Footer"; +import SettingsButton from "../SettingsButton"; +import { Link } from "react-router-dom"; +import paths from "@/utils/paths"; +import { useTranslation } from "react-i18next"; +import { useSidebarToggle, ToggleSidebarButton } from "./SidebarToggle"; + +export default function Sidebar() { + const { user } = useUser(); + const { logo } = useLogo(); + const sidebarRef = useRef(null); + const { showSidebar, setShowSidebar, canToggleSidebar } = useSidebarToggle(); + const { + showing: showingNewWsModal, + showModal: showNewWsModal, + hideModal: hideNewWsModal, + } = useNewWorkspaceModal(); + const { t } = useTranslation(); + + return ( + <> +

+ +

+ + {canToggleSidebar && ( + + )} +

+ {(!user || user?.role !== "default") && ( + + )} +

+ +

+ {showingNewWsModal && } +

+ + ); +} + +export function SidebarMobileHeader() { + const { logo } = useLogo(); + const sidebarRef = useRef(null); + const [showSidebar, setShowSidebar] = useState(false); + const [showBgOverlay, setShowBgOverlay] = useState(false); + const { + showing: showingNewWsModal, + showModal: showNewWsModal, + hideModal: hideNewWsModal, + } = useNewWorkspaceModal(); + const { user } = useUser(); + const { t } = useTranslation(); + + useEffect(() => { + // Darkens the rest of the screen + // when sidebar is open. + function handleBg() { + if (showSidebar) { + setTimeout(() => { + setShowBgOverlay(true); + }, 300); + } else { + setShowBgOverlay(false); + } + } + handleBg(); + }, [showSidebar]); + + return ( + <> +

+ +

setShowSidebar(false)} + /> +

+ {/* Header Information */} +

+ {(!user || user?.role !== "default") && ( +

+ +

+ )} +

+ + {/* Primary Body */} +

+ {(!user || user?.role !== "default") && ( + + )} +

+ +

+ {showingNewWsModal && } +

+ + ); +} diff --git a/frontend/src/components/SpeechToText/BrowserNative/index.jsx b/frontend/src/components/SpeechToText/BrowserNative/index.jsx new file mode 100644 index 0000000..1e9bcb3 --- /dev/null +++ b/frontend/src/components/SpeechToText/BrowserNative/index.jsx @@ -0,0 +1,9 @@ +export default function BrowserNative() { + return ( +

+ There is no configuration needed for this provider. +

+ ); +} diff --git a/frontend/src/components/TextToSpeech/BrowserNative/index.jsx b/frontend/src/components/TextToSpeech/BrowserNative/index.jsx new file mode 100644 index 0000000..1e9bcb3 --- /dev/null +++ b/frontend/src/components/TextToSpeech/BrowserNative/index.jsx @@ -0,0 +1,9 @@ +export default function BrowserNative() { + return ( +

+ There is no configuration needed for this provider. +

+ ); +} diff --git a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx new file mode 100644 index 0000000..f3ea178 --- /dev/null +++ b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx @@ -0,0 +1,109 @@ +import { useState, useEffect } from "react"; +import System from "@/models/system"; + +export default function ElevenLabsOptions({ settings }) { + const [inputValue, setInputValue] = useState(settings?.TTSElevenLabsKey); + const [elevenLabsKey, setElevenLabsKey] = useState( + settings?.TTSElevenLabsKey + ); + + return ( +

+ + API Key + + setInputValue(e.target.value)} + onBlur={() => setElevenLabsKey(inputValue)} + /> +

+ {!settings?.credentialsOnly && ( + + )} +

+ ); +} + +function ElevenLabsModelSelection({ apiKey, settings }) { + const [groupedModels, setGroupedModels] = useState({}); + const [loading, setLoading] = useState(true); + + useEffect(() => { + async function findCustomModels() { + setLoading(true); + const { models } = await System.customModels( + "elevenlabs-tts", + typeof apiKey === "boolean" ? null : apiKey + ); + + if (models?.length > 0) { + const modelsByOrganization = models.reduce((acc, model) => { + acc[model.organization] = acc[model.organization] || []; + acc[model.organization].push(model); + return acc; + }, {}); + setGroupedModels(modelsByOrganization); + } + + setLoading(false); + } + findCustomModels(); + }, [apiKey]); + + if (loading) { + return ( +

+ + Chat Model Selection + + +

+ ); + } + + return ( +

+ + Chat Model Selection + + +

+ ); +} diff --git a/frontend/src/components/TextToSpeech/OpenAiGenericOptions/index.jsx b/frontend/src/components/TextToSpeech/OpenAiGenericOptions/index.jsx new file mode 100644 index 0000000..9517c14 --- /dev/null +++ b/frontend/src/components/TextToSpeech/OpenAiGenericOptions/index.jsx @@ -0,0 +1,69 @@ +import React from "react"; + +export default function OpenAiGenericTextToSpeechOptions({ settings }) { + return ( +

+ Base URL +

+ +

+ This should be the base URL of the OpenAI compatible TTS service you + will generate TTS responses from. +

+ +

+ + API Key + + +

+ Some TTS services require an API key to generate TTS responses - + this is optional if your service does not require one. +

+ + Voice Model + + +

+ Most TTS services will have several voice models available, this is + the identifier for the voice model you want to use. +

+ ); +} diff --git a/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx b/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx new file mode 100644 index 0000000..7b52f38 --- /dev/null +++ b/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx @@ -0,0 +1,49 @@ +function toProperCase(string) { + return string.replace(/\w\S*/g, function (txt) { + return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); + }); +} + +export default function OpenAiTextToSpeechOptions({ settings }) { + const apiKey = settings?.TTSOpenAIKey; + + return ( +

+ + API Key + + +

+ + Voice Model + + +

+ ); +} diff --git a/frontend/src/components/TextToSpeech/PiperTTSOptions/index.jsx b/frontend/src/components/TextToSpeech/PiperTTSOptions/index.jsx new file mode 100644 index 0000000..1bdd283 --- /dev/null +++ b/frontend/src/components/TextToSpeech/PiperTTSOptions/index.jsx @@ -0,0 +1,220 @@ +import { useState, useEffect, useRef } from "react"; +import PiperTTSClient from "@/utils/piperTTS"; +import { titleCase } from "text-case"; +import { humanFileSize } from "@/utils/numbers"; +import showToast from "@/utils/toast"; +import { CircleNotch, PauseCircle, PlayCircle } from "@phosphor-icons/react"; + +export default function PiperTTSOptions({ settings }) { + return ( + <> +

+ All PiperTTS models will run in your browser locally. This can be + resource intensive on lower-end devices. +

+ +

+ + ); +} + +function voicesByLanguage(voices = []) { + const voicesByLanguage = voices.reduce((acc, voice) => { + const langName = voice?.language?.name_english ?? "Unlisted"; + acc[langName] = acc[langName] || []; + acc[langName].push(voice); + return acc; + }, {}); + return Object.entries(voicesByLanguage); +} + +function voiceDisplayName(voice) { + const { is_stored, name, quality, files } = voice; + const onnxFileKey = Object.keys(files).find((key) => key.endsWith(".onnx")); + const fileSize = files?.[onnxFileKey]?.size_bytes || 0; + return `${is_stored ? "✔ " : ""}${titleCase(name)}-${quality === "low" ? "Low" : "HQ"} (${humanFileSize(fileSize)})`; +} + +function PiperTTSModelSelection({ settings }) { + const [loading, setLoading] = useState(true); + const [voices, setVoices] = useState([]); + const [selectedVoice, setSelectedVoice] = useState( + settings?.TTSPiperTTSVoiceModel + ); + + function flushVoices() { + PiperTTSClient.flush() + .then(() => + showToast("All voices flushed from browser storage", "info", { + clear: true, + }) + ) + .catch((e) => console.error(e)); + } + + useEffect(() => { + PiperTTSClient.voices() + .then((voices) => { + if (voices?.length !== 0) return setVoices(voices); + throw new Error("Could not fetch voices from web worker."); + }) + .catch((e) => { + console.error(e); + }) + .finally(() => setLoading(false)); + }, []); + + if (loading) { + return ( +

+ + Voice Model Selection + + +

+ ); + } + + return ( +

+ + Voice Model Selection + +

+ + +

+ The "✔" indicates this model is already stored locally and does not + need to be downloaded when run. +

+ {!!voices.find((voice) => voice.is_stored) && ( + + )} +

+ ); +} + +function DemoVoiceSample({ voiceId }) { + const playerRef = useRef(null); + const [speaking, setSpeaking] = useState(false); + const [loading, setLoading] = useState(false); + const [audioSrc, setAudioSrc] = useState(null); + + async function speakMessage(e) { + e.preventDefault(); + if (speaking) { + playerRef?.current?.pause(); + return; + } + + try { + if (!audioSrc) { + setLoading(true); + const client = new PiperTTSClient({ voiceId }); + const blobUrl = await client.getAudioBlobForText( + "Hello, welcome to AnythingLLM!" + ); + setAudioSrc(blobUrl); + setLoading(false); + client.worker?.terminate(); + PiperTTSClient._instance = null; + } else { + playerRef.current.play(); + } + } catch (e) { + console.error(e); + setLoading(false); + setSpeaking(false); + } + } + + useEffect(() => { + function setupPlayer() { + if (!playerRef?.current) return; + playerRef.current.addEventListener("play", () => { + setSpeaking(true); + }); + + playerRef.current.addEventListener("pause", () => { + playerRef.current.currentTime = 0; + setSpeaking(false); + setAudioSrc(null); + }); + } + setupPlayer(); + }, []); + + return ( + + ); +} diff --git a/frontend/src/components/TranscriptionSelection/NativeTranscriptionOptions/index.jsx b/frontend/src/components/TranscriptionSelection/NativeTranscriptionOptions/index.jsx new file mode 100644 index 0000000..2a8d8c9 --- /dev/null +++ b/frontend/src/components/TranscriptionSelection/NativeTranscriptionOptions/index.jsx @@ -0,0 +1,88 @@ +import { useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Gauge } from "@phosphor-icons/react"; + +export default function NativeTranscriptionOptions({ settings }) { + const { t } = useTranslation(); + const [model, setModel] = useState(settings?.WhisperModelPref); + + return ( +

+ +

+ + {t("common.selection")} + + +

+ ); +} + +function LocalWarning({ model }) { + switch (model) { + case "Xenova/whisper-small": + return ; + case "Xenova/whisper-large": + return ; + default: + return ; + } +} + +function WhisperSmall() { + const { t } = useTranslation(); + + return ( +

+ +

+ {t("transcription.warn-start")} +
+ {t("transcription.warn-recommend")} +
+
+ {t("transcription.warn-end")} (250mb) +

+ ); +} + +function WhisperLarge() { + const { t } = useTranslation(); + + return ( +

+ +

+ {t("transcription.warn-start")} +
+ {t("transcription.warn-recommend")} +
+
+ {t("transcription.warn-end")} (1.56GB) +

+ ); +} diff --git a/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx b/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx new file mode 100644 index 0000000..615eb23 --- /dev/null +++ b/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx @@ -0,0 +1,41 @@ +import { useState } from "react"; + +export default function OpenAiWhisperOptions({ settings }) { + const [inputValue, setInputValue] = useState(settings?.OpenAiKey); + const [_openAIKey, setOpenAIKey] = useState(settings?.OpenAiKey); + + return ( +

+ + API Key + + setInputValue(e.target.value)} + onBlur={() => setOpenAIKey(inputValue)} + /> +

+ + Whisper Model + + +

+ ); +} diff --git a/frontend/src/components/UserIcon/index.jsx b/frontend/src/components/UserIcon/index.jsx new file mode 100644 index 0000000..2e40709 --- /dev/null +++ b/frontend/src/components/UserIcon/index.jsx @@ -0,0 +1,42 @@ +import React, { memo } from "react"; +import usePfp from "../../hooks/usePfp"; +import UserDefaultPfp from "./user.svg"; +import WorkspaceDefaultPfp from "./workspace.svg"; + +const UserIcon = memo(({ role }) => { + const { pfp } = usePfp(); + + return ( +

+ {role === "user" && } + {role !== "user" && ( + system profile picture

+ )} +

+ ); +}); + +function RenderUserPfp({ pfp }) { + if (!pfp) + return ( + User profile picture

+ ); + + return ( + User profile picture

+ ); +} + +export default UserIcon; diff --git a/frontend/src/components/UserIcon/user.svg b/frontend/src/components/UserIcon/user.svg new file mode 100644 index 0000000..b0812cd --- /dev/null +++ b/frontend/src/components/UserIcon/user.svg @@ -0,0 +1,12 @@ + diff --git a/frontend/src/components/UserIcon/workspace.svg b/frontend/src/components/UserIcon/workspace.svg new file mode 100644 index 0000000..6a24de5 --- /dev/null +++ b/frontend/src/components/UserIcon/workspace.svg @@ -0,0 +1,20 @@ + diff --git a/frontend/src/components/UserMenu/AccountModal/index.jsx b/frontend/src/components/UserMenu/AccountModal/index.jsx new file mode 100644 index 0000000..9de8689 --- /dev/null +++ b/frontend/src/components/UserMenu/AccountModal/index.jsx @@ -0,0 +1,253 @@ +import { useLanguageOptions } from "@/hooks/useLanguageOptions"; +import usePfp from "@/hooks/usePfp"; +import System from "@/models/system"; +import { AUTH_USER } from "@/utils/constants"; +import showToast from "@/utils/toast"; +import { Plus, X } from "@phosphor-icons/react"; +import ModalWrapper from "@/components/ModalWrapper"; +import { useTheme } from "@/hooks/useTheme"; + +export default function AccountModal({ user, hideModal }) { + const { pfp, setPfp } = usePfp(); + + const handleFileUpload = async (event) => { + const file = event.target.files[0]; + if (!file) return false; + + const formData = new FormData(); + formData.append("file", file); + const { success, error } = await System.uploadPfp(formData); + if (!success) { + showToast(`Failed to upload profile picture: ${error}`, "error"); + return; + } + + const pfpUrl = await System.fetchPfp(user.id); + setPfp(pfpUrl); + showToast("Profile picture uploaded.", "success"); + }; + + const handleRemovePfp = async () => { + const { success, error } = await System.removePfp(); + if (!success) { + showToast(`Failed to remove profile picture: ${error}`, "error"); + return; + } + + setPfp(null); + }; + + const handleUpdate = async (e) => { + e.preventDefault(); + + const data = {}; + const form = new FormData(e.target); + for (var [key, value] of form.entries()) { + if (!value || value === null) continue; + data[key] = value; + } + + const { success, error } = await System.updateUser(data); + if (success) { + let storedUser = JSON.parse(localStorage.getItem(AUTH_USER)); + + if (storedUser) { + storedUser.username = data.username; + localStorage.setItem(AUTH_USER, JSON.stringify(storedUser)); + } + showToast("Profile updated.", "success", { clear: true }); + hideModal(); + } else { + showToast(`Failed to update user: ${error}`, "error"); + } + }; + + return ( + +

+ Edit Account +

+ +

+ + + {pfp ? ( + User profile picture

+ ) : ( +

+ + + Profile Picture + + + 800 x 800 + +

+ )} + + {pfp && ( + + )} +

+ + Username + + +

+ Username must be only contain lowercase letters, numbers, + underscores, and hyphens with no spaces +

+ + New Password + + +

+ Password must be at least 8 characters long +

+ + +

+ + ); +} + +function LanguagePreference() { + const { + currentLanguage, + supportedLanguages, + getLanguageName, + changeLanguage, + } = useLanguageOptions(); + + return ( +

+ + Preferred language + + +

+ ); +} + +function ThemePreference() { + const { theme, setTheme, availableThemes } = useTheme(); + + return ( +

+ + Theme Preference + + +

+ ); +} diff --git a/frontend/src/components/UserMenu/UserButton/index.jsx b/frontend/src/components/UserMenu/UserButton/index.jsx new file mode 100644 index 0000000..af1a04a --- /dev/null +++ b/frontend/src/components/UserMenu/UserButton/index.jsx @@ -0,0 +1,129 @@ +import useLoginMode from "@/hooks/useLoginMode"; +import usePfp from "@/hooks/usePfp"; +import useUser from "@/hooks/useUser"; +import System from "@/models/system"; +import paths from "@/utils/paths"; +import { userFromStorage } from "@/utils/request"; +import { Person } from "@phosphor-icons/react"; +import { useEffect, useRef, useState } from "react"; +import AccountModal from "../AccountModal"; +import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants"; + +export default function UserButton() { + const mode = useLoginMode(); + const { user } = useUser(); + const menuRef = useRef(); + const buttonRef = useRef(); + const [showMenu, setShowMenu] = useState(false); + const [showAccountSettings, setShowAccountSettings] = useState(false); + const [supportEmail, setSupportEmail] = useState(""); + + const handleClose = (event) => { + if ( + menuRef.current && + !menuRef.current.contains(event.target) && + !buttonRef.current.contains(event.target) + ) { + setShowMenu(false); + } + }; + + const handleOpenAccountModal = () => { + setShowAccountSettings(true); + setShowMenu(false); + }; + + useEffect(() => { + if (showMenu) { + document.addEventListener("mousedown", handleClose); + } + return () => document.removeEventListener("mousedown", handleClose); + }, [showMenu]); + + useEffect(() => { + const fetchSupportEmail = async () => { + const supportEmail = await System.fetchSupportEmail(); + setSupportEmail( + supportEmail?.email + ? `mailto:${supportEmail.email}` + : paths.mailToMintplex() + ); + }; + fetchSupportEmail(); + }, []); + + if (mode === null) return null; + return ( +

+ + + {showMenu && ( +

+ {mode === "multi" && !!user && ( + + )} + + Support + + +

+ )} + {user && showAccountSettings && ( + setShowAccountSettings(false)} + /> + )} +

+ ); +} + +function UserDisplay() { + const { pfp } = usePfp(); + const user = userFromStorage(); + + if (pfp) { + return ( +

+ ); + } + + return user?.username?.slice(0, 2) || "AA"; +} diff --git a/frontend/src/components/UserMenu/index.jsx b/frontend/src/components/UserMenu/index.jsx new file mode 100644 index 0000000..4773096 --- /dev/null +++ b/frontend/src/components/UserMenu/index.jsx @@ -0,0 +1,10 @@ +import UserButton from "./UserButton"; + +export default function UserMenu({ children }) { + return ( +

+ + {children} +

+ ); +} diff --git a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx new file mode 100644 index 0000000..9db5d29 --- /dev/null +++ b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx @@ -0,0 +1,41 @@ +export default function AstraDBOptions({ settings }) { + return ( +

+ + Astra DB Endpoint + + +

+ +

+ + Astra DB Application Token + + +

+ ); +} diff --git a/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx new file mode 100644 index 0000000..cdcda5c --- /dev/null +++ b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx @@ -0,0 +1,51 @@ +export default function ChromaDBOptions({ settings }) { + return ( +

+ + Chroma Endpoint + + +

+ +

+ + API Header + + +

+ +

+ + API Key + + +

+ ); +} diff --git a/frontend/src/components/VectorDBSelection/LanceDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/LanceDBOptions/index.jsx new file mode 100644 index 0000000..d8845bb --- /dev/null +++ b/frontend/src/components/VectorDBSelection/LanceDBOptions/index.jsx @@ -0,0 +1,11 @@ +import { useTranslation } from "react-i18next"; +export default function LanceDBOptions() { + const { t } = useTranslation(); + return ( +

+ {t("vector.provider.description")} +

+ ); +} diff --git a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx new file mode 100644 index 0000000..cc30868 --- /dev/null +++ b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx @@ -0,0 +1,52 @@ +export default function MilvusDBOptions({ settings }) { + return ( +

+ + Milvus DB Address + + +

+ +

+ + Milvus Username + + +

+ + Milvus Password + + +

+ ); +} diff --git a/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx new file mode 100644 index 0000000..58031ae --- /dev/null +++ b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx @@ -0,0 +1,38 @@ +export default function PineconeDBOptions({ settings }) { + return ( +

+ + Pinecone DB API Key + + +

+ + Pinecone Index Name + + +

+ ); +} diff --git a/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx new file mode 100644 index 0000000..0f17d34 --- /dev/null +++ b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx @@ -0,0 +1,38 @@ +export default function QDrantDBOptions({ settings }) { + return ( +

+ + QDrant API Endpoint + + +

+ +

+ + API Key + + +

+ ); +} diff --git a/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx b/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx new file mode 100644 index 0000000..3de81ac --- /dev/null +++ b/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx @@ -0,0 +1,37 @@ +export default function VectorDBItem({ + name, + value, + image, + description, + checked, + onClick, +}) { + return ( +

onClick(value)} + className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-theme-bg-secondary ${ + checked ? "bg-theme-bg-secondary" : "" + }`} + > + +

{name}

{description}

+ ); +} diff --git a/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx new file mode 100644 index 0000000..84c7d4a --- /dev/null +++ b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx @@ -0,0 +1,38 @@ +export default function WeaviateDBOptions({ settings }) { + return ( +

+ + Weaviate Endpoint + + +

+ +

+ + API Key + + +

+ ); +} diff --git a/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx b/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx new file mode 100644 index 0000000..b489653 --- /dev/null +++ b/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx @@ -0,0 +1,38 @@ +export default function ZillizCloudOptions({ settings }) { + return ( +

+ + Cluster Endpoint + + +

+ +

+ + API Token + + +

+ ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomCell.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomCell.jsx new file mode 100644 index 0000000..b0e9439 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomCell.jsx @@ -0,0 +1,50 @@ +export default function CustomCell({ ...props }) { + const { + root, + depth, + x, + y, + width, + height, + index, + payload, + colors, + rank, + name, + } = props; + return ( + + + {depth === 1 ? ( + + {name} + + ) : null} + {depth === 1 ? ( + + {index + 1} + + ) : null} + + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx new file mode 100644 index 0000000..2222090 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx @@ -0,0 +1,89 @@ +import { Tooltip as RechartsTooltip } from "recharts"; + +// Given a hex, convert to the opposite highest-contrast color +// and if `bw` is enabled, force it to be black/white to normalize +// interface. +function invertColor(hex, bw) { + if (hex.indexOf("#") === 0) { + hex = hex.slice(1); + } + // convert 3-digit hex to 6-digits. + if (hex.length === 3) { + hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; + } + if (hex.length !== 6) { + throw new Error("Invalid HEX color."); + } + var r = parseInt(hex.slice(0, 2), 16), + g = parseInt(hex.slice(2, 4), 16), + b = parseInt(hex.slice(4, 6), 16); + if (bw) { + // https://stackoverflow.com/a/3943023/112731 + return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "#FFFFFF" : "#000000"; + // : '#FFFFFF'; + } + // invert color components + r = (255 - r).toString(16); + g = (255 - g).toString(16); + b = (255 - b).toString(16); + // pad each with zeros and return + return "#" + padZero(r) + padZero(g) + padZero(b); +} + +function padZero(str, len) { + len = len || 2; + var zeros = new Array(len).join("0"); + return (zeros + str).slice(-len); +} + +export default function Tooltip({ legendColor, ...props }) { + return ( + { + return active && payload ? ( +

{label}

+ {payload.map(({ value, name }, idx) => ( +

+ +

+ {value} +

+ {name} +

+ ))} +

+ ) : null; + }} + /> + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/chart-utils.js b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/chart-utils.js new file mode 100644 index 0000000..53e501f --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/chart-utils.js @@ -0,0 +1,98 @@ +export const Colors = { + blue: "#3b82f6", + sky: "#0ea5e9", + cyan: "#06b6d4", + teal: "#14b8a6", + emerald: "#10b981", + green: "#22c55e", + lime: "#84cc16", + yellow: "#eab308", + amber: "#f59e0b", + orange: "#f97316", + red: "#ef4444", + rose: "#f43f5e", + pink: "#ec4899", + fuchsia: "#d946ef", + purple: "#a855f7", + violet: "#8b5cf6", + indigo: "#6366f1", + neutral: "#737373", + stone: "#78716c", + gray: "#6b7280", + slate: "#64748b", + zinc: "#71717a", +}; + +export function getTremorColor(color) { + switch (color) { + case "blue": + return Colors.blue; + case "sky": + return Colors.sky; + case "cyan": + return Colors.cyan; + case "teal": + return Colors.teal; + case "emerald": + return Colors.emerald; + case "green": + return Colors.green; + case "lime": + return Colors.lime; + case "yellow": + return Colors.yellow; + case "amber": + return Colors.amber; + case "orange": + return Colors.orange; + case "red": + return Colors.red; + case "rose": + return Colors.rose; + case "pink": + return Colors.pink; + case "fuchsia": + return Colors.fuchsia; + case "purple": + return Colors.purple; + case "violet": + return Colors.violet; + case "indigo": + return Colors.indigo; + case "neutral": + return Colors.neutral; + case "stone": + return Colors.stone; + case "gray": + return Colors.gray; + case "slate": + return Colors.slate; + case "zinc": + return Colors.zinc; + } +} + +export const themeColorRange = [ + "slate", + "gray", + "zinc", + "neutral", + "stone", + "red", + "orange", + "amber", + "yellow", + "lime", + "green", + "emerald", + "teal", + "cyan", + "sky", + "blue", + "indigo", + "violet", + "purple", + "fuchsia", + "pink", + "rose", +]; diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx new file mode 100644 index 0000000..f47c585 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx @@ -0,0 +1,487 @@ +import { v4 } from "uuid"; +import { + AreaChart, + BarChart, + DonutChart, + Legend, + LineChart, +} from "@tremor/react"; +import { + Bar, + CartesianGrid, + ComposedChart, + Funnel, + FunnelChart, + Line, + PolarAngleAxis, + PolarGrid, + PolarRadiusAxis, + Radar, + RadarChart, + RadialBar, + RadialBarChart, + Scatter, + ScatterChart, + Treemap, + XAxis, + YAxis, +} from "recharts"; +import { Colors, getTremorColor } from "./chart-utils.js"; +import CustomCell from "./CustomCell.jsx"; +import Tooltip from "./CustomTooltip.jsx"; +import { safeJsonParse } from "@/utils/request.js"; +import renderMarkdown from "@/utils/chat/markdown.js"; +import { WorkspaceProfileImage } from "../PromptReply/index.jsx"; +import { memo, useCallback, useState } from "react"; +import { saveAs } from "file-saver"; +import { useGenerateImage } from "recharts-to-png"; +import { CircleNotch, DownloadSimple } from "@phosphor-icons/react"; + +const dataFormatter = (number) => { + return Intl.NumberFormat("us").format(number).toString(); +}; + +export function Chartable({ props, workspace }) { + const [getDivJpeg, { ref }] = useGenerateImage({ + quality: 1, + type: "image/jpeg", + options: { + backgroundColor: "#393d43", + padding: 20, + }, + }); + const handleDownload = useCallback(async () => { + const jpeg = await getDivJpeg(); + if (jpeg) saveAs(jpeg, `chart-${v4().split("-")[0]}.jpg`); + }, []); + + const color = null; + const showLegend = true; + const content = + typeof props.content === "string" + ? safeJsonParse(props.content, null) + : props.content; + if (content === null) return null; + + const chartType = content?.type?.toLowerCase(); + const data = + typeof content.dataset === "string" + ? safeJsonParse(content.dataset, []) + : content.dataset; + const value = data.length > 0 ? Object.keys(data[0])[1] : "value"; + const title = content?.title; + + const renderChart = () => { + switch (chartType) { + case "area": + return ( +

+ {title} +

+ +

+ ); + case "bar": + return ( +

+ {title} +

+ +

+ ); + case "line": + return ( +

+ {title} +

+ +

+ ); + case "composed": + return ( +

+ {title} +

+ {showLegend && ( + + )} + + + + + + + + +

+ ); + case "scatter": + return ( +

+ {title} +

+ {showLegend && ( +

+ +

+ )} + + + + + + + +

+ ); + case "pie": + return ( +

+ {title} +

+ +

+ ); + case "radar": + return ( +

+ {title} +

+ {showLegend && ( +

+ +

+ )} + + + + + + + +

+ ); + case "radialbar": + return ( +

+ {title} +

+ {showLegend && ( +

+ +

+ )} + + + + +

+ ); + case "treemap": + return ( +

+ {title} +

+ {showLegend && ( +

+ +

+ )} + } + > + + +

+ ); + case "funnel": + return ( +

+ {title} +

+ {showLegend && ( +

+ +

+ )} + + + + +

+ ); + default: + return

Unsupported chart type.

; + } + }; + + if (!!props.chatId) { + return ( +

+ +

{renderChart()}

+ +

+ ); + } + + return ( +

+ +

{renderChart()}

+ +

+ ); +} + +const customTooltip = (props) => { + const { payload, active } = props; + if (!active || !payload) return null; + const categoryPayload = payload?.[0]; + if (!categoryPayload) return null; + return ( +

+ {categoryPayload.name} +

+ {categoryPayload.value} +

+ ); +}; + +function DownloadGraph({ onClick }) { + const [loading, setLoading] = useState(false); + const handleClick = async () => { + setLoading(true); + await onClick?.(); + setLoading(false); + }; + + return ( +

+ {loading ? ( + + ) : ( + + )} +

+ ); +} + +export default memo(Chartable); diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx new file mode 100644 index 0000000..b2a6f73 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx @@ -0,0 +1,248 @@ +import { memo, useState } from "react"; +import { v4 } from "uuid"; +import { decode as HTMLDecode } from "he"; +import truncate from "truncate"; +import ModalWrapper from "@/components/ModalWrapper"; +import { middleTruncate } from "@/utils/directories"; +import { + CaretRight, + FileText, + Info, + ArrowSquareOut, + GithubLogo, + Link, + X, + YoutubeLogo, +} from "@phosphor-icons/react"; +import ConfluenceLogo from "@/media/dataConnectors/confluence.png"; +import { toPercentString } from "@/utils/numbers"; + +function combineLikeSources(sources) { + const combined = {}; + sources.forEach((source) => { + const { id, title, text, chunkSource = "", score = null } = source; + if (combined.hasOwnProperty(title)) { + combined[title].chunks.push({ id, text, chunkSource, score }); + combined[title].references += 1; + } else { + combined[title] = { + title, + chunks: [{ id, text, chunkSource, score }], + references: 1, + }; + } + }); + return Object.values(combined); +} + +export default function Citations({ sources = [] }) { + if (sources.length === 0) return null; + const [open, setOpen] = useState(false); + const [selectedSource, setSelectedSource] = useState(null); + + return ( +

+ + {open && ( +

+ {combineLikeSources(sources).map((source) => ( + setSelectedSource(source)} + /> + ))} +

+ )} + {selectedSource && ( + setSelectedSource(null)} + /> + )} +

+ ); +} + +const Citation = memo(({ source, onClick }) => { + const { title } = source; + if (!title) return null; + const chunkSourceInfo = parseChunkSource(source); + const truncatedTitle = chunkSourceInfo?.text ?? middleTruncate(title, 25); + const CitationIcon = ICONS.hasOwnProperty(chunkSourceInfo?.icon) + ? ICONS[chunkSourceInfo.icon] + : ICONS.file; + + return ( +

+ +

{truncatedTitle}

+ ); +}); + +function omitChunkHeader(text) { + if (!text.startsWith("")) return text; + return text.split("")[1].trim(); +} + +function CitationDetailModal({ source, onClose }) { + const { references, title, chunks } = source; + const { isUrl, text: webpageUrl, href: linkTo } = parseChunkSource(source); + + return ( + +

+ {isUrl ? ( + +

+ {webpageUrl} + +

+ + ) : ( +

+ {truncate(title, 45)} +

+ )} +

+ {references > 1 && ( +

+ Referenced {references} times. +

+ )} + +

+ {chunks.map(({ text, score }, idx) => ( + <> +

+ {HTMLDecode(omitChunkHeader(text))} +

+ + {!!score && ( +

+ +

{toPercentString(score)} match

+ )} +

+ {idx !== chunks.length - 1 && ( +

+ )} + + ))} +

+ + ); +} + +// Show the correct title and/or display text for citations +// which contain valid outbound links that can be clicked by the +// user when viewing a citation. Optionally allows various icons +// to show distinct types of sources. +function parseChunkSource({ title = "", chunks = [] }) { + const nullResponse = { + isUrl: false, + text: null, + href: null, + icon: "file", + }; + + if ( + !chunks.length || + (!chunks[0].chunkSource?.startsWith("link://") && + !chunks[0].chunkSource?.startsWith("confluence://") && + !chunks[0].chunkSource?.startsWith("github://")) + ) + return nullResponse; + try { + const url = new URL( + chunks[0].chunkSource.split("link://")[1] || + chunks[0].chunkSource.split("confluence://")[1] || + chunks[0].chunkSource.split("github://")[1] + ); + let text = url.host + url.pathname; + let icon = "link"; + + if (url.host.includes("youtube.com")) { + text = title; + icon = "youtube"; + } + + if (url.host.includes("github.com")) { + text = title; + icon = "github"; + } + + if (url.host.includes("atlassian.net")) { + text = title; + icon = "confluence"; + } + + return { + isUrl: true, + href: url.toString(), + text, + icon, + }; + } catch {} + return nullResponse; +} + +// Patch to render Confluence icon as a element like we do with Phosphor +const ConfluenceIcon = ({ ...props }) => ( +

+); + +const ICONS = { + file: FileText, + link: Link, + youtube: YoutubeLogo, + github: GithubLogo, + confluence: ConfluenceIcon, +}; diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx new file mode 100644 index 0000000..f95cae8 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx @@ -0,0 +1,70 @@ +import React, { useState, useEffect, useRef } from "react"; +import { Trash, DotsThreeVertical, TreeView } from "@phosphor-icons/react"; + +function ActionMenu({ chatId, forkThread, isEditing, role }) { + const [open, setOpen] = useState(false); + const menuRef = useRef(null); + + const toggleMenu = () => setOpen(!open); + + const handleFork = () => { + forkThread(chatId); + setOpen(false); + }; + + const handleDelete = () => { + window.dispatchEvent( + new CustomEvent("delete-message", { detail: { chatId } }) + ); + setOpen(false); + }; + + useEffect(() => { + const handleClickOutside = (event) => { + if (menuRef.current && !menuRef.current.contains(event.target)) { + setOpen(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + if (!chatId || isEditing || role === "user") return null; + + return ( +

+ + {open && ( +

+ + +

+ )} +

+ ); +} + +export default ActionMenu; diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/DeleteMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/DeleteMessage/index.jsx new file mode 100644 index 0000000..1e9518e --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/DeleteMessage/index.jsx @@ -0,0 +1,58 @@ +import { useState, useEffect } from "react"; +import { Trash } from "@phosphor-icons/react"; +import Workspace from "@/models/workspace"; + +const DELETE_EVENT = "delete-message"; + +export function useWatchDeleteMessage({ chatId = null, role = "user" }) { + const [isDeleted, setIsDeleted] = useState(false); + const [completeDelete, setCompleteDelete] = useState(false); + + useEffect(() => { + function listenForEvent() { + if (!chatId) return; + window.addEventListener(DELETE_EVENT, onDeleteEvent); + } + listenForEvent(); + return () => { + window.removeEventListener(DELETE_EVENT, onDeleteEvent); + }; + }, [chatId]); + + function onEndAnimation() { + if (!isDeleted) return; + setCompleteDelete(true); + } + + async function onDeleteEvent(e) { + if (e.detail.chatId === chatId) { + setIsDeleted(true); + // Do this to prevent double-emission of the PUT/DELETE api call + // because then there will be a race condition and it will make an error log for nothing + // as one call will complete and the other will fail. + if (role === "assistant") await Workspace.deleteChat(chatId); + return false; + } + } + + return { isDeleted, completeDelete, onEndAnimation }; +} + +export function DeleteMessage({ chatId, isEditing, role }) { + if (!chatId || isEditing || role === "user") return null; + + function emitDeleteEvent() { + window.dispatchEvent(new CustomEvent(DELETE_EVENT, { detail: { chatId } })); + } + + return ( + + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx new file mode 100644 index 0000000..3c1fd16 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx @@ -0,0 +1,122 @@ +import { Pencil } from "@phosphor-icons/react"; +import { useState, useEffect, useRef } from "react"; + +const EDIT_EVENT = "toggle-message-edit"; + +export function useEditMessage({ chatId, role }) { + const [isEditing, setIsEditing] = useState(false); + + function onEditEvent(e) { + if (e.detail.chatId !== chatId || e.detail.role !== role) { + setIsEditing(false); + return false; + } + setIsEditing((prev) => !prev); + } + + useEffect(() => { + function listenForEdits() { + if (!chatId || !role) return; + window.addEventListener(EDIT_EVENT, onEditEvent); + } + listenForEdits(); + return () => { + window.removeEventListener(EDIT_EVENT, onEditEvent); + }; + }, [chatId, role]); + + return { isEditing, setIsEditing }; +} + +export function EditMessageAction({ chatId = null, role, isEditing }) { + function handleEditClick() { + window.dispatchEvent( + new CustomEvent(EDIT_EVENT, { detail: { chatId, role } }) + ); + } + + if (!chatId || isEditing) return null; + return ( +

+ +

+ ); +} + +export function EditMessageForm({ + role, + chatId, + message, + attachments = [], + adjustTextArea, + saveChanges, +}) { + const formRef = useRef(null); + function handleSaveMessage(e) { + e.preventDefault(); + const form = new FormData(e.target); + const editedMessage = form.get("editedMessage"); + saveChanges({ editedMessage, chatId, role, attachments }); + window.dispatchEvent( + new CustomEvent(EDIT_EVENT, { detail: { chatId, role, attachments } }) + ); + } + + function cancelEdits() { + window.dispatchEvent( + new CustomEvent(EDIT_EVENT, { detail: { chatId, role, attachments } }) + ); + return false; + } + + useEffect(() => { + if (!formRef || !formRef.current) return; + formRef.current.focus(); + adjustTextArea({ target: formRef.current }); + }, [formRef]); + + return ( +

+      <div className="mt-3 flex justify-center">
+        <button
+          type="submit"
+          className="border-none px-2 py-1 bg-gray-200 text-gray-700 font-medium rounded-md mr-2 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        >
+          Save & Submit
+        </button>
+        <button
+          type="button"
+          className="border-none px-2 py-1 bg-historical-msg-system text-white font-medium rounded-md hover:bg-historical-msg-user/90 light:hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
+          onClick={cancelEdits}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/RenderMetrics/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/RenderMetrics/index.jsx
new file mode 100644
index 0000000..d5f99c1
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/RenderMetrics/index.jsx
@@ -0,0 +1,118 @@
+import { numberWithCommas } from "@/utils/numbers";
+import React, { useEffect, useState, useContext } from "react";
+const MetricsContext = React.createContext();
+const SHOW_METRICS_KEY = "anythingllm_show_chat_metrics";
+const SHOW_METRICS_EVENT = "anythingllm_show_metrics_change";
+
+/**
+ * @param {number} duration - duration in milliseconds
+ * @returns {string}
+ */
+function formatDuration(duration) {
+  try {
+    return duration < 1
+      ? `${(duration * 1000).toFixed(0)}ms`
+      : `${duration.toFixed(3)}s`;
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Format the output TPS to a string
+ * @param {number} outputTps - output TPS
+ * @returns {string}
+ */
+function formatTps(outputTps) {
+  try {
+    return outputTps < 1000
+      ? outputTps.toFixed(2)
+      : numberWithCommas(outputTps.toFixed(0));
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Get the show metrics setting from localStorage `anythingllm_show_chat_metrics` key
+ * @returns {boolean}
+ */
+function getAutoShowMetrics() {
+  return window?.localStorage?.getItem(SHOW_METRICS_KEY) === "true";
+}
+
+/**
+ * Toggle the show metrics setting in localStorage `anythingllm_show_chat_metrics` key
+ * @returns {void}
+ */
+function toggleAutoShowMetrics() {
+  const currentValue = getAutoShowMetrics() || false;
+  window?.localStorage?.setItem(SHOW_METRICS_KEY, !currentValue);
+  window.dispatchEvent(
+    new CustomEvent(SHOW_METRICS_EVENT, {
+      detail: { showMetricsAutomatically: !currentValue },
+    })
+  );
+  return !currentValue;
+}
+
+/**
+ * Provider for the metrics context that controls the visibility of the metrics
+ * per-chat based on the user's preference.
+ * @param {React.ReactNode} children
+ * @returns {React.ReactNode}
+ */
+export function MetricsProvider({ children }) {
+  const [showMetricsAutomatically, setShowMetricsAutomatically] =
+    useState(getAutoShowMetrics());
+
+  useEffect(() => {
+    function handleShowingMetricsEvent(e) {
+      if (!e?.detail?.hasOwnProperty("showMetricsAutomatically")) return;
+      setShowMetricsAutomatically(e.detail.showMetricsAutomatically);
+    }
+    console.log("Adding event listener for metrics visibility");
+    window.addEventListener(SHOW_METRICS_EVENT, handleShowingMetricsEvent);
+    return () =>
+      window.removeEventListener(SHOW_METRICS_EVENT, handleShowingMetricsEvent);
+  }, []);
+
+  return (
+    <MetricsContext.Provider
+      value={{ showMetricsAutomatically, setShowMetricsAutomatically }}
+    >
+      {children}
+    </MetricsContext.Provider>
+  );
+}
+
+/**
+ * Render the metrics for a given chat, if available
+ * @param {metrics: {duration:number, outputTps: number}} props
+ * @returns
+ */
+export default function RenderMetrics({ metrics = {} }) {
+  // Inherit the showMetricsAutomatically state from the MetricsProvider so the state is shared across all chats
+  const { showMetricsAutomatically, setShowMetricsAutomatically } =
+    useContext(MetricsContext);
+  if (!metrics?.duration || !metrics?.outputTps) return null;
+
+  return (
+    <button
+      type="button"
+      onClick={() => setShowMetricsAutomatically(toggleAutoShowMetrics())}
+      data-tooltip-id="metrics-visibility"
+      data-tooltip-content={
+        showMetricsAutomatically
+          ? "Click to only show metrics when hovering"
+          : "Click to show metrics as soon as they are available"
+      }
+      className={`border-none flex justify-end items-center gap-x-[8px] ${showMetricsAutomatically ? "opacity-100" : "opacity-0"} md:group-hover:opacity-100 transition-all duration-300`}
+    >
+      <p className="cursor-pointer text-xs font-mono text-theme-text-secondary opacity-50">
+        {formatDuration(metrics.duration)} ({formatTps(metrics.outputTps)}{" "}
+        tok/s)
+      </p>
+    </button>
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/asyncTts.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/asyncTts.jsx
new file mode 100644
index 0000000..ce9c801
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/asyncTts.jsx
@@ -0,0 +1,87 @@
+import { useEffect, useState, useRef } from "react";
+import { SpeakerHigh, PauseCircle, CircleNotch } from "@phosphor-icons/react";
+import Workspace from "@/models/workspace";
+import showToast from "@/utils/toast";
+
+export default function AsyncTTSMessage({ slug, chatId }) {
+  const playerRef = useRef(null);
+  const [speaking, setSpeaking] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [audioSrc, setAudioSrc] = useState(null);
+
+  function speakMessage() {
+    if (speaking) {
+      playerRef?.current?.pause();
+      return;
+    }
+
+    try {
+      if (!audioSrc) {
+        setLoading(true);
+        Workspace.ttsMessage(slug, chatId)
+          .then((audioBlob) => {
+            if (!audioBlob)
+              throw new Error("Failed to load or play TTS message response.");
+            setAudioSrc(audioBlob);
+          })
+          .catch((e) => showToast(e.message, "error", { clear: true }))
+          .finally(() => setLoading(false));
+      } else {
+        playerRef.current.play();
+      }
+    } catch (e) {
+      console.error(e);
+      setLoading(false);
+      setSpeaking(false);
+    }
+  }
+
+  useEffect(() => {
+    function setupPlayer() {
+      if (!playerRef?.current) return;
+      playerRef.current.addEventListener("play", () => {
+        setSpeaking(true);
+      });
+
+      playerRef.current.addEventListener("pause", () => {
+        playerRef.current.currentTime = 0;
+        setSpeaking(false);
+      });
+    }
+    setupPlayer();
+  }, []);
+
+  if (!chatId) return null;
+  return (
+    <div className="mt-3 relative">
+      <button
+        onClick={speakMessage}
+        data-tooltip-id="message-to-speech"
+        data-tooltip-content={
+          speaking ? "Pause TTS speech of message" : "TTS Speak message"
+        }
+        className="border-none text-[var(--theme-sidebar-footer-icon-fill)]"
+        aria-label={speaking ? "Pause speech" : "Speak message"}
+      >
+        {speaking ? (
+          <PauseCircle size={18} className="mb-1" />
+        ) : (
+          <>
+            {loading ? (
+              <CircleNotch size={18} className="mb-1 animate-spin" />
+            ) : (
+              <SpeakerHigh size={18} className="mb-1" />
+            )}
+          </>
+        )}
+        <audio
+          ref={playerRef}
+          hidden={true}
+          src={audioSrc}
+          autoPlay={true}
+          controls={false}
+        />
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/index.jsx
new file mode 100644
index 0000000..31ac706
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/index.jsx
@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import NativeTTSMessage from "./native";
+import AsyncTTSMessage from "./asyncTts";
+import PiperTTSMessage from "./piperTTS";
+import System from "@/models/system";
+
+export default function TTSMessage({ slug, chatId, message }) {
+  const [settings, setSettings] = useState({});
+  const [provider, setProvider] = useState("native");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function getSettings() {
+      const _settings = await System.keys();
+      setProvider(_settings?.TextToSpeechProvider ?? "native");
+      setSettings(_settings);
+      setLoading(false);
+    }
+    getSettings();
+  }, []);
+
+  if (!chatId || loading) return null;
+
+  switch (provider) {
+    case "openai":
+    case "generic-openai":
+    case "elevenlabs":
+      return <AsyncTTSMessage slug={slug} chatId={chatId} />;
+    case "piper_local":
+      return (
+        <PiperTTSMessage
+          voiceId={settings?.TTSPiperTTSVoiceModel}
+          message={message}
+        />
+      );
+    default:
+      return <NativeTTSMessage message={message} />;
+  }
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/native.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/native.jsx
new file mode 100644
index 0000000..ff80116
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/native.jsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+import { SpeakerHigh, PauseCircle } from "@phosphor-icons/react";
+
+export default function NativeTTSMessage({ message }) {
+  const [speaking, setSpeaking] = useState(false);
+  const [supported, setSupported] = useState(false);
+  useEffect(() => {
+    setSupported("speechSynthesis" in window);
+  }, []);
+
+  function endSpeechUtterance() {
+    window.speechSynthesis?.cancel();
+    setSpeaking(false);
+    return;
+  }
+
+  function speakMessage() {
+    // if the user is pausing this particular message
+    // while the synth is speaking we can end it.
+    // If they are clicking another message's TTS
+    // we need to ignore that until they pause the one that is playing.
+    if (window.speechSynthesis.speaking && speaking) {
+      endSpeechUtterance();
+      return;
+    }
+
+    if (window.speechSynthesis.speaking && !speaking) return;
+    const utterance = new SpeechSynthesisUtterance(message);
+    utterance.addEventListener("end", endSpeechUtterance);
+    window.speechSynthesis.speak(utterance);
+    setSpeaking(true);
+  }
+
+  if (!supported) return null;
+  return (
+    <div className="mt-3 relative">
+      <button
+        onClick={speakMessage}
+        data-tooltip-id="message-to-speech"
+        data-tooltip-content={
+          speaking ? "Pause TTS speech of message" : "TTS Speak message"
+        }
+        className="border-none text-[var(--theme-sidebar-footer-icon-fill)]"
+        aria-label={speaking ? "Pause speech" : "Speak message"}
+      >
+        {speaking ? (
+          <PauseCircle size={18} className="mb-1" />
+        ) : (
+          <SpeakerHigh size={18} className="mb-1" />
+        )}
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/piperTTS.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/piperTTS.jsx
new file mode 100644
index 0000000..02ab8e3
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/piperTTS.jsx
@@ -0,0 +1,84 @@
+import { useEffect, useState, useRef } from "react";
+import { SpeakerHigh, PauseCircle, CircleNotch } from "@phosphor-icons/react";
+import PiperTTSClient from "@/utils/piperTTS";
+
+export default function PiperTTS({ voiceId = null, message }) {
+  const playerRef = useRef(null);
+  const [speaking, setSpeaking] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [audioSrc, setAudioSrc] = useState(null);
+
+  async function speakMessage(e) {
+    e.preventDefault();
+    if (speaking) {
+      playerRef?.current?.pause();
+      return;
+    }
+
+    try {
+      if (!audioSrc) {
+        setLoading(true);
+        const client = new PiperTTSClient({ voiceId });
+        const blobUrl = await client.getAudioBlobForText(message);
+        setAudioSrc(blobUrl);
+        setLoading(false);
+      } else {
+        playerRef.current.play();
+      }
+    } catch (e) {
+      console.error(e);
+      setLoading(false);
+      setSpeaking(false);
+    }
+  }
+
+  useEffect(() => {
+    function setupPlayer() {
+      if (!playerRef?.current) return;
+      playerRef.current.addEventListener("play", () => {
+        setSpeaking(true);
+      });
+
+      playerRef.current.addEventListener("pause", () => {
+        playerRef.current.currentTime = 0;
+        setSpeaking(false);
+      });
+    }
+    setupPlayer();
+  }, []);
+
+  return (
+    <div className="mt-3 relative">
+      <button
+        type="button"
+        onClick={speakMessage}
+        disabled={loading}
+        data-tooltip-id="message-to-speech"
+        data-tooltip-content={
+          speaking ? "Pause TTS speech of message" : "TTS Speak message"
+        }
+        className="border-none text-[var(--theme-sidebar-footer-icon-fill)]"
+        aria-label={speaking ? "Pause speech" : "Speak message"}
+      >
+        {speaking ? (
+          <PauseCircle size={18} className="mb-1" />
+        ) : (
+          <>
+            {loading ? (
+              <CircleNotch size={18} className="mb-1 animate-spin" />
+            ) : (
+              <SpeakerHigh size={18} className="mb-1" />
+            )}
+          </>
+        )}
+        <audio
+          ref={playerRef}
+          hidden={true}
+          src={audioSrc}
+          autoPlay={true}
+          controls={false}
+        />
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
new file mode 100644
index 0000000..0b05576
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
@@ -0,0 +1,148 @@
+import React, { memo, useState } from "react";
+import useCopyText from "@/hooks/useCopyText";
+import { Check, ThumbsUp, ArrowsClockwise, Copy } from "@phosphor-icons/react";
+import Workspace from "@/models/workspace";
+import { EditMessageAction } from "./EditMessage";
+import RenderMetrics from "./RenderMetrics";
+import ActionMenu from "./ActionMenu";
+
+const Actions = ({
+  message,
+  feedbackScore,
+  chatId,
+  slug,
+  isLastMessage,
+  regenerateMessage,
+  forkThread,
+  isEditing,
+  role,
+  metrics = {},
+}) => {
+  const [selectedFeedback, setSelectedFeedback] = useState(feedbackScore);
+  const handleFeedback = async (newFeedback) => {
+    const updatedFeedback =
+      selectedFeedback === newFeedback ? null : newFeedback;
+    await Workspace.updateChatFeedback(chatId, slug, updatedFeedback);
+    setSelectedFeedback(updatedFeedback);
+  };
+
+  return (
+    <div className="flex w-full justify-between items-center">
+      <div className="flex justify-start items-center gap-x-[8px]">
+        <CopyMessage message={message} />
+        <div className="md:group-hover:opacity-100 transition-all duration-300 md:opacity-0 flex justify-start items-center gap-x-[8px]">
+          <EditMessageAction
+            chatId={chatId}
+            role={role}
+            isEditing={isEditing}
+          />
+          {isLastMessage && !isEditing && (
+            <RegenerateMessage
+              regenerateMessage={regenerateMessage}
+              slug={slug}
+              chatId={chatId}
+            />
+          )}
+          {chatId && role !== "user" && !isEditing && (
+            <FeedbackButton
+              isSelected={selectedFeedback === true}
+              handleFeedback={() => handleFeedback(true)}
+              tooltipId="feedback-button"
+              tooltipContent="Good response"
+              IconComponent={ThumbsUp}
+            />
+          )}
+          <ActionMenu
+            chatId={chatId}
+            forkThread={forkThread}
+            isEditing={isEditing}
+            role={role}
+          />
+        </div>
+      </div>
+      <RenderMetrics metrics={metrics} />
+    </div>
+  );
+};
+
+function FeedbackButton({
+  isSelected,
+  handleFeedback,
+  tooltipContent,
+  IconComponent,
+}) {
+  return (
+    <div className="mt-3 relative">
+      <button
+        onClick={handleFeedback}
+        data-tooltip-id="feedback-button"
+        data-tooltip-content={tooltipContent}
+        className="text-zinc-300"
+        aria-label={tooltipContent}
+      >
+        <IconComponent
+          color="var(--theme-sidebar-footer-icon-fill)"
+          size={20}
+          className="mb-1"
+          weight={isSelected ? "fill" : "regular"}
+        />
+      </button>
+    </div>
+  );
+}
+
+function CopyMessage({ message }) {
+  const { copied, copyText } = useCopyText();
+
+  return (
+    <>
+      <div className="mt-3 relative">
+        <button
+          onClick={() => copyText(message)}
+          data-tooltip-id="copy-assistant-text"
+          data-tooltip-content="Copy"
+          className="text-zinc-300"
+          aria-label="Copy"
+        >
+          {copied ? (
+            <Check
+              color="var(--theme-sidebar-footer-icon-fill)"
+              size={20}
+              className="mb-1"
+            />
+          ) : (
+            <Copy
+              color="var(--theme-sidebar-footer-icon-fill)"
+              size={20}
+              className="mb-1"
+            />
+          )}
+        </button>
+      </div>
+    </>
+  );
+}
+
+function RegenerateMessage({ regenerateMessage, chatId }) {
+  if (!chatId) return null;
+  return (
+    <div className="mt-3 relative">
+      <button
+        onClick={() => regenerateMessage(chatId)}
+        data-tooltip-id="regenerate-assistant-text"
+        data-tooltip-content="Regenerate response"
+        className="border-none text-zinc-300"
+        aria-label="Regenerate"
+      >
+        <ArrowsClockwise
+          color="var(--theme-sidebar-footer-icon-fill)"
+          size={20}
+          className="mb-1"
+          weight="fill"
+        />
+      </button>
+    </div>
+  );
+}
+
+export default memo(Actions);
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
new file mode 100644
index 0000000..a5d60db
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -0,0 +1,249 @@
+import React, { memo } from "react";
+import { Warning } from "@phosphor-icons/react";
+import UserIcon from "../../../../UserIcon";
+import Actions from "./Actions";
+import renderMarkdown from "@/utils/chat/markdown";
+import { userFromStorage } from "@/utils/request";
+import Citations from "../Citation";
+import { v4 } from "uuid";
+import createDOMPurify from "dompurify";
+import { EditMessageForm, useEditMessage } from "./Actions/EditMessage";
+import { useWatchDeleteMessage } from "./Actions/DeleteMessage";
+import TTSMessage from "./Actions/TTSButton";
+import {
+  THOUGHT_REGEX_CLOSE,
+  THOUGHT_REGEX_COMPLETE,
+  THOUGHT_REGEX_OPEN,
+  ThoughtChainComponent,
+} from "../ThoughtContainer";
+
+const DOMPurify = createDOMPurify(window);
+DOMPurify.setConfig({
+  ADD_ATTR: ["target", "rel"],
+});
+
+const HistoricalMessage = ({
+  uuid = v4(),
+  message,
+  role,
+  workspace,
+  sources = [],
+  attachments = [],
+  error = false,
+  feedbackScore = null,
+  chatId = null,
+  isLastMessage = false,
+  regenerateMessage,
+  saveEditedMessage,
+  forkThread,
+  metrics = {},
+}) => {
+  const { isEditing } = useEditMessage({ chatId, role });
+  const { isDeleted, completeDelete, onEndAnimation } = useWatchDeleteMessage({
+    chatId,
+    role,
+  });
+  const adjustTextArea = (event) => {
+    const element = event.target;
+    element.style.height = "auto";
+    element.style.height = element.scrollHeight + "px";
+  };
+
+  if (!!error) {
+    return (
+      <div
+        key={uuid}
+        className={`flex justify-center items-end w-full bg-theme-bg-chat`}
+      >
+        <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
+          <div className="flex gap-x-5">
+            <ProfileImage role={role} workspace={workspace} />
+            <div className="p-2 rounded-lg bg-red-50 text-red-500">
+              <span className="inline-block">
+                <Warning className="h-4 w-4 mb-1 inline-block" /> Could not
+                respond to message.
+              </span>
+              <p className="text-xs font-mono mt-2 border-l-2 border-red-300 pl-2 bg-red-200 p-2 rounded-sm">
+                {error}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (completeDelete) return null;
+  return (
+    <div
+      key={uuid}
+      onAnimationEnd={onEndAnimation}
+      className={`${
+        isDeleted ? "animate-remove" : ""
+      } flex justify-center items-end w-full group bg-theme-bg-chat`}
+    >
+      <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
+        <div className="flex gap-x-5">
+          <div className="flex flex-col items-center">
+            <ProfileImage role={role} workspace={workspace} />
+            <div className="mt-1 -mb-10">
+              {role === "assistant" && (
+                <TTSMessage
+                  slug={workspace?.slug}
+                  chatId={chatId}
+                  message={message}
+                />
+              )}
+            </div>
+          </div>
+          {isEditing ? (
+            <EditMessageForm
+              role={role}
+              chatId={chatId}
+              message={message}
+              attachments={attachments}
+              adjustTextArea={adjustTextArea}
+              saveChanges={saveEditedMessage}
+            />
+          ) : (
+            <div className="break-words">
+              <RenderChatContent
+                role={role}
+                message={message}
+                expanded={isLastMessage}
+              />
+              <ChatAttachments attachments={attachments} />
+            </div>
+          )}
+        </div>
+        <div className="flex gap-x-5 ml-14">
+          <Actions
+            message={message}
+            feedbackScore={feedbackScore}
+            chatId={chatId}
+            slug={workspace?.slug}
+            isLastMessage={isLastMessage}
+            regenerateMessage={regenerateMessage}
+            isEditing={isEditing}
+            role={role}
+            forkThread={forkThread}
+            metrics={metrics}
+          />
+        </div>
+        {role === "assistant" && <Citations sources={sources} />}
+      </div>
+    </div>
+  );
+};
+
+function ProfileImage({ role, workspace }) {
+  if (role === "assistant" && workspace.pfpUrl) {
+    return (
+      <div className="relative w-[35px] h-[35px] rounded-full flex-shrink-0 overflow-hidden">
+        <img
+          src={workspace.pfpUrl}
+          alt="Workspace profile picture"
+          className="absolute top-0 left-0 w-full h-full object-cover rounded-full bg-white"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <UserIcon
+      user={{
+        uid: role === "user" ? userFromStorage()?.username : workspace.slug,
+      }}
+      role={role}
+    />
+  );
+}
+
+export default memo(
+  HistoricalMessage,
+  // Skip re-render the historical message:
+  // if the content is the exact same AND (not streaming)
+  // the lastMessage status is the same (regen icon)
+  // and the chatID matches between renders. (feedback icons)
+  (prevProps, nextProps) => {
+    return (
+      prevProps.message === nextProps.message &&
+      prevProps.isLastMessage === nextProps.isLastMessage &&
+      prevProps.chatId === nextProps.chatId
+    );
+  }
+);
+
+function ChatAttachments({ attachments = [] }) {
+  if (!attachments.length) return null;
+  return (
+    <div className="flex flex-wrap gap-2">
+      {attachments.map((item) => (
+        <img
+          key={item.name}
+          src={item.contentString}
+          className="max-w-[300px] rounded-md"
+        />
+      ))}
+    </div>
+  );
+}
+
+const RenderChatContent = memo(
+  ({ role, message, expanded = false }) => {
+    // If the message is not from the assistant, we can render it directly
+    // as normal since the user cannot think (lol)
+    if (role !== "assistant")
+      return (
+        <span
+          className="flex flex-col gap-y-1"
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(renderMarkdown(message)),
+          }}
+        />
+      );
+    let thoughtChain = null;
+    let msgToRender = message;
+
+    // If the message is a perfect thought chain, we can render it directly
+    // Complete == open and close tags match perfectly.
+    if (message.match(THOUGHT_REGEX_COMPLETE)) {
+      thoughtChain = message.match(THOUGHT_REGEX_COMPLETE)?.[0];
+      msgToRender = message.replace(THOUGHT_REGEX_COMPLETE, "");
+    }
+
+    // If the message is a thought chain but not a complete thought chain (matching opening tags but not closing tags),
+    // we can render it as a thought chain if we can at least find a closing tag
+    // This can occur when the assistant starts with <thinking> and then <response>'s later.
+    if (
+      message.match(THOUGHT_REGEX_OPEN) &&
+      message.match(THOUGHT_REGEX_CLOSE)
+    ) {
+      const closingTag = message.match(THOUGHT_REGEX_CLOSE)?.[0];
+      const splitMessage = message.split(closingTag);
+      thoughtChain = splitMessage[0] + closingTag;
+      msgToRender = splitMessage[1];
+    }
+
+    return (
+      <>
+        {thoughtChain && (
+          <ThoughtChainComponent content={thoughtChain} expanded={expanded} />
+        )}
+        <span
+          className="flex flex-col gap-y-1"
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(renderMarkdown(msgToRender)),
+          }}
+        />
+      </>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.role === nextProps.role &&
+      prevProps.message === nextProps.message &&
+      prevProps.expanded === nextProps.expanded
+    );
+  }
+);
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
new file mode 100644
index 0000000..71169bf
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
@@ -0,0 +1,144 @@
+import { memo, useRef, useEffect } from "react";
+import { Warning } from "@phosphor-icons/react";
+import UserIcon from "../../../../UserIcon";
+import renderMarkdown from "@/utils/chat/markdown";
+import Citations from "../Citation";
+import {
+  THOUGHT_REGEX_CLOSE,
+  THOUGHT_REGEX_COMPLETE,
+  THOUGHT_REGEX_OPEN,
+  ThoughtChainComponent,
+} from "../ThoughtContainer";
+
+const PromptReply = ({
+  uuid,
+  reply,
+  pending,
+  error,
+  workspace,
+  sources = [],
+  closed = true,
+}) => {
+  const assistantBackgroundColor = "bg-theme-bg-chat";
+
+  if (!reply && sources.length === 0 && !pending && !error) return null;
+
+  if (pending) {
+    return (
+      <div
+        className={`flex justify-center items-end w-full ${assistantBackgroundColor}`}
+      >
+        <div className="py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
+          <div className="flex gap-x-5">
+            <WorkspaceProfileImage workspace={workspace} />
+            <div className="mt-3 ml-5 dot-falling light:invert"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div
+        className={`flex justify-center items-end w-full ${assistantBackgroundColor}`}
+      >
+        <div className="py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
+          <div className="flex gap-x-5">
+            <WorkspaceProfileImage workspace={workspace} />
+            <span
+              className={`inline-block p-2 rounded-lg bg-red-50 text-red-500`}
+            >
+              <Warning className="h-4 w-4 mb-1 inline-block" /> Could not
+              respond to message.
+              <span className="text-xs">Reason: {error || "unknown"}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      key={uuid}
+      className={`flex justify-center items-end w-full ${assistantBackgroundColor}`}
+    >
+      <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
+        <div className="flex gap-x-5">
+          <WorkspaceProfileImage workspace={workspace} />
+          <RenderAssistantChatContent
+            key={`${uuid}-prompt-reply-content`}
+            message={reply}
+          />
+        </div>
+        <Citations sources={sources} />
+      </div>
+    </div>
+  );
+};
+
+export function WorkspaceProfileImage({ workspace }) {
+  if (!!workspace.pfpUrl) {
+    return (
+      <div className="relative w-[35px] h-[35px] rounded-full flex-shrink-0 overflow-hidden">
+        <img
+          src={workspace.pfpUrl}
+          alt="Workspace profile picture"
+          className="absolute top-0 left-0 w-full h-full object-cover rounded-full bg-white"
+        />
+      </div>
+    );
+  }
+
+  return <UserIcon user={{ uid: workspace.slug }} role="assistant" />;
+}
+
+function RenderAssistantChatContent({ message }) {
+  const contentRef = useRef("");
+  const thoughtChainRef = useRef(null);
+
+  useEffect(() => {
+    const thinking =
+      message.match(THOUGHT_REGEX_OPEN) && !message.match(THOUGHT_REGEX_CLOSE);
+
+    if (thinking && thoughtChainRef.current) {
+      thoughtChainRef.current.updateContent(message);
+      return;
+    }
+
+    const completeThoughtChain = message.match(THOUGHT_REGEX_COMPLETE)?.[0];
+    const msgToRender = message.replace(THOUGHT_REGEX_COMPLETE, "");
+
+    if (completeThoughtChain && thoughtChainRef.current) {
+      thoughtChainRef.current.updateContent(completeThoughtChain);
+    }
+
+    contentRef.current = msgToRender;
+  }, [message]);
+
+  const thinking =
+    message.match(THOUGHT_REGEX_OPEN) && !message.match(THOUGHT_REGEX_CLOSE);
+  if (thinking)
+    return (
+      <ThoughtChainComponent ref={thoughtChainRef} content="" expanded={true} />
+    );
+
+  return (
+    <div className="flex flex-col gap-y-1">
+      {message.match(THOUGHT_REGEX_COMPLETE) && (
+        <ThoughtChainComponent
+          ref={thoughtChainRef}
+          content=""
+          expanded={true}
+        />
+      )}
+      <span
+        className="break-words"
+        dangerouslySetInnerHTML={{ __html: renderMarkdown(contentRef.current) }}
+      />
+    </div>
+  );
+}
+
+export default memo(PromptReply);
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/StatusResponse/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/StatusResponse/index.jsx
new file mode 100644
index 0000000..2ceb744
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/StatusResponse/index.jsx
@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import {
+  CaretDown,
+  CircleNotch,
+  Check,
+  CheckCircle,
+} from "@phosphor-icons/react";
+
+export default function StatusResponse({
+  messages = [],
+  isThinking = false,
+  showCheckmark = false,
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const currentThought = messages[messages.length - 1];
+  const previousThoughts = messages.slice(0, -1);
+
+  function handleExpandClick() {
+    if (!previousThoughts.length > 0) return;
+    setIsExpanded(!isExpanded);
+  }
+
+  return (
+    <div className="flex justify-center items-end w-full">
+      <div className="py-2 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col relative">
+        <div
+          onClick={handleExpandClick}
+          className={`${!previousThoughts?.length ? "cursor-text" : "cursor-pointer hover:bg-theme-sidebar-item-hover transition-all duration-200"} bg-theme-bg-chat-input rounded-full py-2 px-4 flex items-center gap-x-2 border border-theme-sidebar-border`}
+        >
+          {isThinking ? (
+            <CircleNotch
+              className="w-4 h-4 text-theme-text-secondary animate-spin"
+              aria-label="Agent is thinking..."
+            />
+          ) : showCheckmark ? (
+            <CheckCircle
+              className="w-4 h-4 text-green-400 transition-all duration-300"
+              aria-label="Thought complete"
+            />
+          ) : null}
+          <div className="flex-1 overflow-hidden">
+            <span
+              key={currentThought.content}
+              className="text-xs text-theme-text-secondary font-mono inline-block w-full animate-thoughtTransition"
+            >
+              {currentThought.content}
+            </span>
+          </div>
+          <div className="flex items-center gap-x-2">
+            {previousThoughts?.length > 0 && (
+              <div
+                data-tooltip-id="expand-cot"
+                data-tooltip-content={
+                  isExpanded ? "Hide thought chain" : "Show thought chain"
+                }
+                className="border-none text-theme-text-secondary hover:text-theme-text-primary transition-colors p-1 rounded-full hover:bg-theme-sidebar-item-hover"
+                aria-label={
+                  isExpanded ? "Hide thought chain" : "Show thought chain"
+                }
+              >
+                <CaretDown
+                  className={`w-4 h-4 transform transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Previous thoughts dropdown */}
+        {previousThoughts?.length > 0 && (
+          <div
+            key={`cot-list-${currentThought.uuid}`}
+            className={`mt-2 bg-theme-bg-chat-input backdrop-blur-sm rounded-lg overflow-hidden transition-all duration-300 border border-theme-sidebar-border ${
+              isExpanded
+                ? "max-h-[300px] overflow-y-auto opacity-100"
+                : "max-h-0 opacity-0"
+            }`}
+          >
+            <div className="p-2">
+              {previousThoughts.map((thought, index) => (
+                <div
+                  key={`cot-${thought.uuid || index}`}
+                  className="flex gap-x-2"
+                >
+                  <p className="text-xs text-theme-text-secondary font-mono">
+                    {index + 1}/{previousThoughts.length}
+                  </p>
+                  <div
+                    className="flex items-center gap-x-3 p-2 animate-fadeUpIn"
+                    style={{ animationDelay: `${index * 50}ms` }}
+                  >
+                    <span className="text-xs text-theme-text-secondary font-mono">
+                      {thought.content}
+                    </span>
+                  </div>
+                </div>
+              ))}
+              {/* Append current thought to the end */}
+              <div key={`cot-${currentThought.uuid}`} className="flex gap-x-2">
+                <p className="text-xs text-theme-text-secondary font-mono">
+                  {previousThoughts.length + 1}/{previousThoughts.length + 1}
+                </p>
+                <div className="flex items-center gap-x-3 p-2 animate-fadeUpIn">
+                  <span className="text-xs text-theme-text-secondary font-mono">
+                    {currentThought.content}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/ThoughtContainer/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/ThoughtContainer/index.jsx
new file mode 100644
index 0000000..75f1d83
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/ThoughtContainer/index.jsx
@@ -0,0 +1,129 @@
+import { useState, forwardRef, useImperativeHandle } from "react";
+import renderMarkdown from "@/utils/chat/markdown";
+import { Brain, CaretDown } from "@phosphor-icons/react";
+import DOMPurify from "dompurify";
+import truncate from "truncate";
+import { isMobile } from "react-device-detect";
+
+const THOUGHT_KEYWORDS = ["thought", "thinking", "think", "thought_chain"];
+const CLOSING_TAGS = [...THOUGHT_KEYWORDS, "response", "answer"];
+export const THOUGHT_REGEX_OPEN = new RegExp(
+  THOUGHT_KEYWORDS.map((keyword) => `<${keyword}\\s*(?:[^>]*?)?\\s*>`).join("|")
+);
+export const THOUGHT_REGEX_CLOSE = new RegExp(
+  CLOSING_TAGS.map((keyword) => `</${keyword}\\s*(?:[^>]*?)?>`).join("|")
+);
+export const THOUGHT_REGEX_COMPLETE = new RegExp(
+  THOUGHT_KEYWORDS.map(
+    (keyword) =>
+      `<${keyword}\\s*(?:[^>]*?)?\\s*>[\\s\\S]*?<\\/${keyword}\\s*(?:[^>]*?)?>`
+  ).join("|")
+);
+const THOUGHT_PREVIEW_LENGTH = isMobile ? 25 : 50;
+
+/**
+ * Component to render a thought chain.
+ * @param {string} content - The content of the thought chain.
+ * @param {boolean} expanded - Whether the thought chain is expanded.
+ * @returns {JSX.Element}
+ */
+export const ThoughtChainComponent = forwardRef(
+  ({ content: initialContent, expanded }, ref) => {
+    const [content, setContent] = useState(initialContent);
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    useImperativeHandle(ref, () => ({
+      updateContent: (newContent) => {
+        setContent(newContent);
+      },
+    }));
+
+    const isThinking =
+      content.match(THOUGHT_REGEX_OPEN) && !content.match(THOUGHT_REGEX_CLOSE);
+    const isComplete =
+      content.match(THOUGHT_REGEX_COMPLETE) ||
+      content.match(THOUGHT_REGEX_CLOSE);
+    const tagStrippedContent = content
+      .replace(THOUGHT_REGEX_OPEN, "")
+      .replace(THOUGHT_REGEX_CLOSE, "");
+    const autoExpand =
+      isThinking && tagStrippedContent.length > THOUGHT_PREVIEW_LENGTH;
+    const canExpand = tagStrippedContent.length > THOUGHT_PREVIEW_LENGTH;
+    if (!content || !content.length) return null;
+
+    function handleExpandClick() {
+      if (!canExpand) return;
+      setIsExpanded(!isExpanded);
+    }
+
+    return (
+      <div className="flex justify-start items-end transition-all duration-200 w-full md:max-w-[800px]">
+        <div className="pb-2 w-full flex gap-x-5 flex-col relative">
+          <div
+            style={{
+              transition: "all 0.1s ease-in-out",
+              borderRadius: isExpanded || autoExpand ? "6px" : "24px",
+            }}
+            className={`${isExpanded || autoExpand ? "" : `${canExpand ? "hover:bg-theme-sidebar-item-hover" : ""}`} items-start bg-theme-bg-chat-input py-2 px-4 flex gap-x-2 border border-theme-sidebar-border`}
+          >
+            {isThinking || isComplete ? (
+              <Brain
+                data-tooltip-id="cot-thinking"
+                data-tooltip-content={
+                  isThinking
+                    ? "Model is thinking..."
+                    : "Model has finished thinking"
+                }
+                className={`w-4 h-4 mt-1 ${isThinking ? "text-blue-500 animate-pulse" : "text-green-400"}`}
+                aria-label={
+                  isThinking
+                    ? "Model is thinking..."
+                    : "Model has finished thinking"
+                }
+              />
+            ) : null}
+            <div className="flex-1 overflow-hidden">
+              {!isExpanded && !autoExpand ? (
+                <span
+                  className="text-theme-text-secondary font-mono inline-block w-full"
+                  dangerouslySetInnerHTML={{
+                    __html: DOMPurify.sanitize(
+                      truncate(tagStrippedContent, THOUGHT_PREVIEW_LENGTH)
+                    ),
+                  }}
+                />
+              ) : (
+                <span
+                  className="text-theme-text-secondary font-mono inline-block w-full"
+                  dangerouslySetInnerHTML={{
+                    __html: DOMPurify.sanitize(
+                      renderMarkdown(tagStrippedContent)
+                    ),
+                  }}
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-x-2">
+              {!autoExpand && canExpand ? (
+                <button
+                  onClick={handleExpandClick}
+                  data-tooltip-id="expand-cot"
+                  data-tooltip-content={
+                    isExpanded ? "Hide thought chain" : "Show thought chain"
+                  }
+                  className="border-none text-theme-text-secondary hover:text-theme-text-primary transition-colors p-1 rounded-full hover:bg-theme-sidebar-item-hover"
+                  aria-label={
+                    isExpanded ? "Hide thought chain" : "Show thought chain"
+                  }
+                >
+                  <CaretDown
+                    className={`w-4 h-4 transform transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`}
+                  />
+                </button>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
new file mode 100644
index 0000000..c78a8f2
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
@@ -0,0 +1,346 @@
+import { useEffect, useRef, useState, useMemo, useCallback } from "react";
+import HistoricalMessage from "./HistoricalMessage";
+import PromptReply from "./PromptReply";
+import StatusResponse from "./StatusResponse";
+import { useManageWorkspaceModal } from "../../../Modals/ManageWorkspace";
+import ManageWorkspace from "../../../Modals/ManageWorkspace";
+import { ArrowDown } from "@phosphor-icons/react";
+import debounce from "lodash.debounce";
+import useUser from "@/hooks/useUser";
+import Chartable from "./Chartable";
+import Workspace from "@/models/workspace";
+import { useParams } from "react-router-dom";
+import paths from "@/utils/paths";
+import Appearance from "@/models/appearance";
+import useTextSize from "@/hooks/useTextSize";
+import { v4 } from "uuid";
+
+export default function ChatHistory({
+  history = [],
+  workspace,
+  sendCommand,
+  updateHistory,
+  regenerateAssistantMessage,
+  hasAttachments = false,
+}) {
+  const lastScrollTopRef = useRef(0);
+  const { user } = useUser();
+  const { threadSlug = null } = useParams();
+  const { showing, showModal, hideModal } = useManageWorkspaceModal();
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const chatHistoryRef = useRef(null);
+  const [isUserScrolling, setIsUserScrolling] = useState(false);
+  const isStreaming = history[history.length - 1]?.animate;
+  const { showScrollbar } = Appearance.getSettings();
+  const { textSizeClass } = useTextSize();
+
+  useEffect(() => {
+    if (!isUserScrolling && (isAtBottom || isStreaming)) {
+      scrollToBottom(false); // Use instant scroll for auto-scrolling
+    }
+  }, [history, isAtBottom, isStreaming, isUserScrolling]);
+
+  const handleScroll = (e) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.target;
+    const isBottom = scrollHeight - scrollTop === clientHeight;
+
+    // Detect if this is a user-initiated scroll
+    if (Math.abs(scrollTop - lastScrollTopRef.current) > 10) {
+      setIsUserScrolling(!isBottom);
+    }
+
+    setIsAtBottom(isBottom);
+    lastScrollTopRef.current = scrollTop;
+  };
+
+  const debouncedScroll = debounce(handleScroll, 100);
+
+  useEffect(() => {
+    const chatHistoryElement = chatHistoryRef.current;
+    if (chatHistoryElement) {
+      chatHistoryElement.addEventListener("scroll", debouncedScroll);
+      return () =>
+        chatHistoryElement.removeEventListener("scroll", debouncedScroll);
+    }
+  }, []);
+
+  const scrollToBottom = (smooth = false) => {
+    if (chatHistoryRef.current) {
+      chatHistoryRef.current.scrollTo({
+        top: chatHistoryRef.current.scrollHeight,
+
+        // Smooth is on when user clicks the button but disabled during auto scroll
+        // We must disable this during auto scroll because it causes issues with
+        // detecting when we are at the bottom of the chat.
+        ...(smooth ? { behavior: "smooth" } : {}),
+      });
+    }
+  };
+
+  const handleSendSuggestedMessage = (heading, message) => {
+    sendCommand(`${heading} ${message}`, true);
+  };
+
+  const saveEditedMessage = async ({
+    editedMessage,
+    chatId,
+    role,
+    attachments = [],
+  }) => {
+    if (!editedMessage) return; // Don't save empty edits.
+
+    // if the edit was a user message, we will auto-regenerate the response and delete all
+    // messages post modified message
+    if (role === "user") {
+      // remove all messages after the edited message
+      // technically there are two chatIds per-message pair, this will split the first.
+      const updatedHistory = history.slice(
+        0,
+        history.findIndex((msg) => msg.chatId === chatId) + 1
+      );
+
+      // update last message in history to edited message
+      updatedHistory[updatedHistory.length - 1].content = editedMessage;
+      // remove all edited messages after the edited message in backend
+      await Workspace.deleteEditedChats(workspace.slug, threadSlug, chatId);
+      sendCommand(editedMessage, true, updatedHistory, attachments);
+      return;
+    }
+
+    // If role is an assistant we simply want to update the comment and save on the backend as an edit.
+    if (role === "assistant") {
+      const updatedHistory = [...history];
+      const targetIdx = history.findIndex(
+        (msg) => msg.chatId === chatId && msg.role === role
+      );
+      if (targetIdx < 0) return;
+      updatedHistory[targetIdx].content = editedMessage;
+      updateHistory(updatedHistory);
+      await Workspace.updateChatResponse(
+        workspace.slug,
+        threadSlug,
+        chatId,
+        editedMessage
+      );
+      return;
+    }
+  };
+
+  const forkThread = async (chatId) => {
+    const newThreadSlug = await Workspace.forkThread(
+      workspace.slug,
+      threadSlug,
+      chatId
+    );
+    window.location.href = paths.workspace.thread(
+      workspace.slug,
+      newThreadSlug
+    );
+  };
+
+  const compiledHistory = useMemo(
+    () =>
+      buildMessages({
+        workspace,
+        history,
+        regenerateAssistantMessage,
+        saveEditedMessage,
+        forkThread,
+      }),
+    [
+      workspace,
+      history,
+      regenerateAssistantMessage,
+      saveEditedMessage,
+      forkThread,
+    ]
+  );
+  const lastMessageInfo = useMemo(() => getLastMessageInfo(history), [history]);
+  const renderStatusResponse = useCallback(
+    (item, index) => {
+      const hasSubsequentMessages = index < compiledHistory.length - 1;
+      return (
+        <StatusResponse
+          key={`status-group-${index}`}
+          messages={item}
+          isThinking={!hasSubsequentMessages && lastMessageInfo.isAnimating}
+          showCheckmark={
+            hasSubsequentMessages ||
+            (!lastMessageInfo.isAnimating && !lastMessageInfo.isStatusResponse)
+          }
+        />
+      );
+    },
+    [compiledHistory.length, lastMessageInfo]
+  );
+
+  if (history.length === 0 && !hasAttachments) {
+    return (
+      <div className="flex flex-col h-full md:mt-0 pb-44 md:pb-40 w-full justify-end items-center">
+        <div className="flex flex-col items-center md:items-start md:max-w-[600px] w-full px-4">
+          <p className="text-white/60 text-lg font-base py-4">
+            Welcome to your new workspace.
+          </p>
+          {!user || user.role !== "default" ? (
+            <p className="w-full items-center text-white/60 text-lg font-base flex flex-col md:flex-row gap-x-1">
+              To get started either{" "}
+              <span
+                className="underline font-medium cursor-pointer"
+                onClick={showModal}
+              >
+                upload a document
+              </span>
+              or <b className="font-medium italic">send a chat.</b>
+            </p>
+          ) : (
+            <p className="w-full items-center text-white/60 text-lg font-base flex flex-col md:flex-row gap-x-1">
+              To get started <b className="font-medium italic">send a chat.</b>
+            </p>
+          )}
+          <WorkspaceChatSuggestions
+            suggestions={workspace?.suggestedMessages ?? []}
+            sendSuggestion={handleSendSuggestedMessage}
+          />
+        </div>
+        {showing && (
+          <ManageWorkspace
+            hideModal={hideModal}
+            providedSlug={workspace.slug}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`markdown text-white/80 light:text-theme-text-primary font-light ${textSizeClass} h-full md:h-[83%] pb-[100px] pt-6 md:pt-0 md:pb-20 md:mx-0 overflow-y-scroll flex flex-col justify-start ${showScrollbar ? "show-scrollbar" : "no-scroll"}`}
+      id="chat-history"
+      ref={chatHistoryRef}
+      onScroll={handleScroll}
+    >
+      {compiledHistory.map((item, index) =>
+        Array.isArray(item) ? renderStatusResponse(item, index) : item
+      )}
+      {showing && (
+        <ManageWorkspace hideModal={hideModal} providedSlug={workspace.slug} />
+      )}
+      {!isAtBottom && (
+        <div className="fixed bottom-40 right-10 md:right-20 z-50 cursor-pointer animate-pulse">
+          <div className="flex flex-col items-center">
+            <div
+              className="p-1 rounded-full border border-white/10 bg-white/10 hover:bg-white/20 hover:text-white"
+              onClick={() => {
+                scrollToBottom(true);
+                setIsUserScrolling(false);
+              }}
+            >
+              <ArrowDown weight="bold" className="text-white/60 w-5 h-5" />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const getLastMessageInfo = (history) => {
+  const lastMessage = history?.[history.length - 1] || {};
+  return {
+    isAnimating: lastMessage?.animate,
+    isStatusResponse: lastMessage?.type === "statusResponse",
+  };
+};
+
+function WorkspaceChatSuggestions({ suggestions = [], sendSuggestion }) {
+  if (suggestions.length === 0) return null;
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-theme-text-primary text-xs mt-10 w-full justify-center">
+      {suggestions.map((suggestion, index) => (
+        <button
+          key={index}
+          className="text-left p-2.5 rounded-xl bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover border border-theme-border"
+          onClick={() => sendSuggestion(suggestion.heading, suggestion.message)}
+        >
+          <p className="font-semibold">{suggestion.heading}</p>
+          <p>{suggestion.message}</p>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Builds the history of messages for the chat.
+ * This is mostly useful for rendering the history in a way that is easy to understand.
+ * as well as compensating for agent thinking and other messages that are not part of the history, but
+ * are still part of the chat.
+ *
+ * @param {Object} param0 - The parameters for building the messages.
+ * @param {Array} param0.history - The history of messages.
+ * @param {Object} param0.workspace - The workspace object.
+ * @param {Function} param0.regenerateAssistantMessage - The function to regenerate the assistant message.
+ * @param {Function} param0.saveEditedMessage - The function to save the edited message.
+ * @param {Function} param0.forkThread - The function to fork the thread.
+ * @returns {Array} The compiled history of messages.
+ */
+function buildMessages({
+  history,
+  workspace,
+  regenerateAssistantMessage,
+  saveEditedMessage,
+  forkThread,
+}) {
+  return history.reduce((acc, props, index) => {
+    const isLastBotReply =
+      index === history.length - 1 && props.role === "assistant";
+
+    if (props?.type === "statusResponse" && !!props.content) {
+      if (acc.length > 0 && Array.isArray(acc[acc.length - 1])) {
+        acc[acc.length - 1].push(props);
+      } else {
+        acc.push([props]);
+      }
+      return acc;
+    }
+
+    if (props.type === "rechartVisualize" && !!props.content) {
+      acc.push(
+        <Chartable key={props.uuid} workspace={workspace} props={props} />
+      );
+    } else if (isLastBotReply && props.animate) {
+      acc.push(
+        <PromptReply
+          key={props.uuid || v4()}
+          uuid={props.uuid}
+          reply={props.content}
+          pending={props.pending}
+          sources={props.sources}
+          error={props.error}
+          workspace={workspace}
+          closed={props.closed}
+        />
+      );
+    } else {
+      acc.push(
+        <HistoricalMessage
+          key={index}
+          message={props.content}
+          role={props.role}
+          workspace={workspace}
+          sources={props.sources}
+          feedbackScore={props.feedbackScore}
+          chatId={props.chatId}
+          error={props.error}
+          attachments={props.attachments}
+          regenerateMessage={regenerateAssistantMessage}
+          isLastMessage={isLastBotReply}
+          saveEditedMessage={saveEditedMessage}
+          forkThread={forkThread}
+          metrics={props.metrics}
+        />
+      );
+    }
+    return acc;
+  }, []);
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatTooltips/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatTooltips/index.jsx
new file mode 100644
index 0000000..56ad1b8
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatTooltips/index.jsx
@@ -0,0 +1,84 @@
+import { Tooltip } from "react-tooltip";
+
+/**
+ * Set the tooltips for the chat container in bulk.
+ * Why do this?
+ *
+ * React-tooltip rendering on _each_ chat will attach an event listener to the body.
+ * This will add up if we have many chats open resulting in the browser crashing
+ * so we batch them together in a single component that renders at the top most level with
+ * a static id the content can change, but this prevents the React-tooltip library from adding
+ * hundreds of event listeners to the DOM.
+ *
+ * In general, anywhere we have iterative rendering the Tooltip should be rendered at the highest level to prevent
+ * hundreds of event listeners from being added to the DOM in the worst case scenario.
+ * @returns
+ */
+export function ChatTooltips() {
+  return (
+    <>
+      <Tooltip
+        id="message-to-speech"
+        place="bottom"
+        delayShow={300}
+        className="tooltip !text-xs"
+      />
+      <Tooltip
+        id="regenerate-assistant-text"
+        place="bottom"
+        delayShow={300}
+        className="tooltip !text-xs"
+      />
+      <Tooltip
+        id="copy-assistant-text"
+        place="bottom"
+        delayShow={300}
+        className="tooltip !text-xs"
+      />
+      <Tooltip
+        id="feedback-button"
+        place="bottom"
+        delayShow={300}
+        className="tooltip !text-xs"
+      />
+      <Tooltip
+        id="action-menu"
+        place="top"
+        delayShow={300}
+        className="tooltip !text-xs"
+      />
+      <Tooltip
+        id="edit-input-text"
+        place="bottom"
+        delayShow={300}
+        className="tooltip !text-xs"
+      />
+      <Tooltip
+        id="similarity-score"
+        place="top"
+        delayShow={100}
+        // z-[100] to ensure it renders above the chat history
+        // as the citation modal is z-indexed above the chat history
+        className="tooltip !text-xs z-[100]"
+      />
+      <Tooltip
+        id="metrics-visibility"
+        place="bottom"
+        delayShow={300}
+        className="tooltip !text-xs"
+      />
+      <Tooltip
+        id="expand-cot"
+        place="bottom"
+        delayShow={300}
+        className="tooltip !text-xs"
+      />
+      <Tooltip
+        id="cot-thinking"
+        place="bottom"
+        delayShow={500}
+        className="tooltip !text-xs"
+      />
+    </>
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/dnd-icon.png b/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/dnd-icon.png
new file mode 100644
index 0000000..9cb0cd7
Binary files /dev/null and b/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/dnd-icon.png differ
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
new file mode 100644
index 0000000..32999e1
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
@@ -0,0 +1,277 @@
+import { useState, useEffect, createContext, useContext } from "react";
+import { v4 } from "uuid";
+import System from "@/models/system";
+import { useDropzone } from "react-dropzone";
+import DndIcon from "./dnd-icon.png";
+import Workspace from "@/models/workspace";
+import useUser from "@/hooks/useUser";
+
+export const DndUploaderContext = createContext();
+export const REMOVE_ATTACHMENT_EVENT = "ATTACHMENT_REMOVE";
+export const CLEAR_ATTACHMENTS_EVENT = "ATTACHMENT_CLEAR";
+export const PASTE_ATTACHMENT_EVENT = "ATTACHMENT_PASTED";
+
+/**
+ * File Attachment for automatic upload on the chat container page.
+ * @typedef Attachment
+ * @property {string} uid - unique file id.
+ * @property {File} file - native File object
+ * @property {string|null} contentString - base64 encoded string of file
+ * @property {('in_progress'|'failed'|'success')} status - the automatic upload status.
+ * @property {string|null} error - Error message
+ * @property {{id:string, location:string}|null} document - uploaded document details
+ * @property {('attachment'|'upload')} type - The type of upload. Attachments are chat-specific, uploads go to the workspace.
+ */
+
+export function DnDFileUploaderProvider({ workspace, children }) {
+  const [files, setFiles] = useState([]);
+  const [ready, setReady] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const { user } = useUser();
+
+  useEffect(() => {
+    System.checkDocumentProcessorOnline().then((status) => setReady(status));
+  }, [user]);
+
+  useEffect(() => {
+    window.addEventListener(REMOVE_ATTACHMENT_EVENT, handleRemove);
+    window.addEventListener(CLEAR_ATTACHMENTS_EVENT, resetAttachments);
+    window.addEventListener(PASTE_ATTACHMENT_EVENT, handlePastedAttachment);
+
+    return () => {
+      window.removeEventListener(REMOVE_ATTACHMENT_EVENT, handleRemove);
+      window.removeEventListener(CLEAR_ATTACHMENTS_EVENT, resetAttachments);
+      window.removeEventListener(
+        PASTE_ATTACHMENT_EVENT,
+        handlePastedAttachment
+      );
+    };
+  }, []);
+
+  /**
+   * Remove file from uploader queue.
+   * @param {CustomEvent<{uid: string}>} event
+   */
+  async function handleRemove(event) {
+    /** @type {{uid: Attachment['uid'], document: Attachment['document']}} */
+    const { uid, document } = event.detail;
+    setFiles((prev) => prev.filter((prevFile) => prevFile.uid !== uid));
+    if (!document?.location) return;
+    await Workspace.deleteAndUnembedFile(workspace.slug, document.location);
+  }
+
+  /**
+   * Clear queue of attached files currently in prompt box
+   */
+  function resetAttachments() {
+    setFiles([]);
+  }
+
+  /**
+   * Turns files into attachments we can send as body request to backend
+   * for a chat.
+   * @returns {{name:string,mime:string,contentString:string}[]}
+   */
+  function parseAttachments() {
+    return (
+      files
+        ?.filter((file) => file.type === "attachment")
+        ?.map(
+          (
+            /** @type {Attachment} */
+            attachment
+          ) => {
+            return {
+              name: attachment.file.name,
+              mime: attachment.file.type,
+              contentString: attachment.contentString,
+            };
+          }
+        ) || []
+    );
+  }
+
+  /**
+   * Handle pasted attachments.
+   * @param {CustomEvent<{files: File[]}>} event
+   */
+  async function handlePastedAttachment(event) {
+    const { files = [] } = event.detail;
+    if (!files.length) return;
+    const newAccepted = [];
+    for (const file of files) {
+      if (file.type.startsWith("image/")) {
+        newAccepted.push({
+          uid: v4(),
+          file,
+          contentString: await toBase64(file),
+          status: "success",
+          error: null,
+          type: "attachment",
+        });
+      } else {
+        // If the user is a default user, we do not want to allow them to upload files.
+        if (!!user && user.role === "default") continue;
+        newAccepted.push({
+          uid: v4(),
+          file,
+          contentString: null,
+          status: "in_progress",
+          error: null,
+          type: "upload",
+        });
+      }
+    }
+    setFiles((prev) => [...prev, ...newAccepted]);
+    embedEligibleAttachments(newAccepted);
+  }
+
+  /**
+   * Handle dropped files.
+   * @param {Attachment[]} acceptedFiles
+   * @param {any[]} _rejections
+   */
+  async function onDrop(acceptedFiles, _rejections) {
+    setDragging(false);
+
+    /** @type {Attachment[]} */
+    const newAccepted = [];
+    for (const file of acceptedFiles) {
+      if (file.type.startsWith("image/")) {
+        newAccepted.push({
+          uid: v4(),
+          file,
+          contentString: await toBase64(file),
+          status: "success",
+          error: null,
+          type: "attachment",
+        });
+      } else {
+        // If the user is a default user, we do not want to allow them to upload files.
+        if (!!user && user.role === "default") continue;
+        newAccepted.push({
+          uid: v4(),
+          file,
+          contentString: null,
+          status: "in_progress",
+          error: null,
+          type: "upload",
+        });
+      }
+    }
+
+    setFiles((prev) => [...prev, ...newAccepted]);
+    embedEligibleAttachments(newAccepted);
+  }
+
+  /**
+   * Embeds attachments that are eligible for embedding - basically files that are not images.
+   * @param {Attachment[]} newAttachments
+   */
+  function embedEligibleAttachments(newAttachments = []) {
+    for (const attachment of newAttachments) {
+      // Images/attachments are chat specific.
+      if (attachment.type === "attachment") continue;
+
+      const formData = new FormData();
+      formData.append("file", attachment.file, attachment.file.name);
+      Workspace.uploadAndEmbedFile(workspace.slug, formData).then(
+        ({ response, data }) => {
+          const updates = {
+            status: response.ok ? "success" : "failed",
+            error: data?.error ?? null,
+            document: data?.document,
+          };
+
+          setFiles((prev) => {
+            return prev.map(
+              (
+                /** @type {Attachment} */
+                prevFile
+              ) => {
+                if (prevFile.uid !== attachment.uid) return prevFile;
+                return { ...prevFile, ...updates };
+              }
+            );
+          });
+        }
+      );
+    }
+  }
+
+  return (
+    <DndUploaderContext.Provider
+      value={{ files, ready, dragging, setDragging, onDrop, parseAttachments }}
+    >
+      {children}
+    </DndUploaderContext.Provider>
+  );
+}
+
+export default function DnDFileUploaderWrapper({ children }) {
+  const { onDrop, ready, dragging, setDragging } =
+    useContext(DndUploaderContext);
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    disabled: !ready,
+    noClick: true,
+    noKeyboard: true,
+    onDragEnter: () => setDragging(true),
+    onDragLeave: () => setDragging(false),
+  });
+  const { user } = useUser();
+  const canUploadAll = !user || user?.role !== "default";
+
+  return (
+    <div
+      className={`relative flex flex-col h-full w-full md:mt-0 mt-[40px] p-[1px]`}
+      {...getRootProps()}
+    >
+      <div
+        hidden={!dragging}
+        className="absolute top-0 w-full h-full bg-dark-text/90 light:bg-[#C2E7FE]/90 rounded-2xl border-[4px] border-white z-[9999]"
+      >
+        <div className="w-full h-full flex justify-center items-center rounded-xl">
+          <div className="flex flex-col gap-y-[14px] justify-center items-center">
+            <img src={DndIcon} width={69} height={69} />
+            <p className="text-white text-[24px] font-semibold">
+              Add {canUploadAll ? "anything" : "an image"}
+            </p>
+            <p className="text-white text-[16px] text-center">
+              {canUploadAll ? (
+                <>
+                  Drop your file here to embed it into your <br />
+                  workspace auto-magically.
+                </>
+              ) : (
+                <>
+                  Drop your image here to chat with it <br />
+                  auto-magically.
+                </>
+              )}
+            </p>
+          </div>
+        </div>
+      </div>
+      <input id="dnd-chat-file-uploader" {...getInputProps()} />
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Convert image types into Base64 strings for requests.
+ * @param {File} file
+ * @returns {Promise<string>}
+ */
+async function toBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64String = reader.result.split(",")[1];
+      resolve(`data:${file.type};base64,${base64String}`);
+    };
+    reader.onerror = (error) => reject(error);
+    reader.readAsDataURL(file);
+  });
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx
new file mode 100644
index 0000000..efca40c
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx
@@ -0,0 +1,118 @@
+import { useEffect, useRef, useState } from "react";
+import { Tooltip } from "react-tooltip";
+import { At } from "@phosphor-icons/react";
+import { useIsAgentSessionActive } from "@/utils/chat/agent";
+
+export default function AvailableAgentsButton({ showing, setShowAgents }) {
+  const agentSessionActive = useIsAgentSessionActive();
+  if (agentSessionActive) return null;
+  return (
+    <div
+      id="agent-list-btn"
+      data-tooltip-id="tooltip-agent-list-btn"
+      data-tooltip-content="View all available agents you can use for chatting."
+      aria-label="View all available agents you can use for chatting."
+      onClick={() => setShowAgents(!showing)}
+      className={`flex justify-center items-center cursor-pointer ${
+        showing ? "!opacity-100" : ""
+      }`}
+    >
+      <At
+        color="var(--theme-sidebar-footer-icon-fill)"
+        className={`w-[22px] h-[22px] pointer-events-none text-theme-text-primary opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60`}
+      />
+      <Tooltip
+        id="tooltip-agent-list-btn"
+        place="top"
+        delayShow={300}
+        className="tooltip !text-xs z-99"
+      />
+    </div>
+  );
+}
+
+function AbilityTag({ text }) {
+  return (
+    <div className="px-2 bg-theme-action-menu-item-hover text-theme-text-secondary text-xs w-fit rounded-sm">
+      <p>{text}</p>
+    </div>
+  );
+}
+
+export function AvailableAgents({
+  showing,
+  setShowing,
+  sendCommand,
+  promptRef,
+}) {
+  const formRef = useRef(null);
+  const agentSessionActive = useIsAgentSessionActive();
+  useEffect(() => {
+    function listenForOutsideClick() {
+      if (!showing || !formRef.current) return false;
+      document.addEventListener("click", closeIfOutside);
+    }
+    listenForOutsideClick();
+  }, [showing, formRef.current]);
+
+  const closeIfOutside = ({ target }) => {
+    if (target.id === "agent-list-btn") return;
+    const isOutside = !formRef?.current?.contains(target);
+    if (!isOutside) return;
+    setShowing(false);
+  };
+
+  if (agentSessionActive) return null;
+  return (
+    <>
+      <div hidden={!showing}>
+        <div className="w-full flex justify-center absolute bottom-[130px] md:bottom-[150px] left-0 z-10 px-4">
+          <div
+            ref={formRef}
+            className="w-[600px] p-2 bg-theme-action-menu-bg rounded-2xl shadow flex-col justify-center items-start gap-2.5 inline-flex"
+          >
+            <button
+              onClick={() => {
+                setShowing(false);
+                sendCommand("@agent ", false);
+                promptRef?.current?.focus();
+              }}
+              className="border-none w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-col justify-start group"
+            >
+              <div className="w-full flex-col text-left flex pointer-events-none">
+                <div className="text-theme-text-primary text-sm">
+                  <b>@agent</b> - the default agent for this workspace.
+                </div>
+                <div className="flex flex-wrap gap-2 mt-2">
+                  <AbilityTag text="rag-search" />
+                  <AbilityTag text="web-scraping" />
+                  <AbilityTag text="web-browsing" />
+                  <AbilityTag text="save-file-to-browser" />
+                  <AbilityTag text="list-documents" />
+                  <AbilityTag text="summarize-document" />
+                  <AbilityTag text="chart-generation" />
+                </div>
+              </div>
+            </button>
+            <button
+              type="button"
+              disabled={true}
+              className="w-full rounded-xl flex flex-col justify-start group"
+            >
+              <div className="w-full flex-col text-center flex pointer-events-none">
+                <div className="text-theme-text-secondary text-xs italic">
+                  custom agents are coming soon!
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export function useAvailableAgents() {
+  const [showAgents, setShowAgents] = useState(false);
+  return { showAgents, setShowAgents };
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
new file mode 100644
index 0000000..fcdee57
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
@@ -0,0 +1,41 @@
+import useUser from "@/hooks/useUser";
+import { PaperclipHorizontal } from "@phosphor-icons/react";
+import { Tooltip } from "react-tooltip";
+
+/**
+ * This is a simple proxy component that clicks on the DnD file uploader for the user.
+ * @returns
+ */
+export default function AttachItem() {
+  const { user } = useUser();
+  if (!!user && user.role === "default") return null;
+
+  return (
+    <>
+      <button
+        id="attach-item-btn"
+        data-tooltip-id="attach-item-btn"
+        data-tooltip-content="Attach a file to this chat"
+        aria-label="Attach a file to this chat"
+        type="button"
+        onClick={(e) => {
+          e?.target?.blur();
+          document?.getElementById("dnd-chat-file-uploader")?.click();
+          return;
+        }}
+        className={`border-none relative flex justify-center items-center opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 cursor-pointer`}
+      >
+        <PaperclipHorizontal
+          color="var(--theme-sidebar-footer-icon-fill)"
+          className="w-[22px] h-[22px] pointer-events-none text-white rotate-90 -scale-y-100"
+        />
+      </button>
+      <Tooltip
+        id="attach-item-btn"
+        place="top"
+        delayShow={300}
+        className="tooltip !text-xs z-[99]"
+      />
+    </>
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
new file mode 100644
index 0000000..ee6155a
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
@@ -0,0 +1,228 @@
+import {
+  CircleNotch,
+  FileCode,
+  FileCsv,
+  FileDoc,
+  FileHtml,
+  FileText,
+  FileImage,
+  FilePdf,
+  WarningOctagon,
+  X,
+} from "@phosphor-icons/react";
+import { humanFileSize } from "@/utils/numbers";
+import { REMOVE_ATTACHMENT_EVENT } from "../../DnDWrapper";
+import { Tooltip } from "react-tooltip";
+
+/**
+ * @param {{attachments: import("../../DnDWrapper").Attachment[]}}
+ * @returns
+ */
+export default function AttachmentManager({ attachments }) {
+  if (attachments.length === 0) return null;
+  return (
+    <div className="flex flex-wrap mt-4 mb-2 gap-y-2 gap-x-[0.5px]">
+      {attachments.map((attachment) => (
+        <AttachmentItem key={attachment.uid} attachment={attachment} />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * @param {{attachment: import("../../DnDWrapper").Attachment}}
+ */
+function AttachmentItem({ attachment }) {
+  const { uid, file, status, error, document, type, contentString } =
+    attachment;
+  const { iconBgColor, Icon } = displayFromFile(file);
+
+  function removeFileFromQueue() {
+    window.dispatchEvent(
+      new CustomEvent(REMOVE_ATTACHMENT_EVENT, { detail: { uid, document } })
+    );
+  }
+
+  if (status === "in_progress") {
+    return (
+      <div
+        className={`h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px]`}
+      >
+        <div
+          className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+        >
+          <CircleNotch
+            size={30}
+            className="text-white light:text-white animate-spin"
+          />
+        </div>
+        <div className="flex flex-col w-[130px]">
+          <p className="text-white text-xs font-medium truncate">{file.name}</p>
+          <p className="text-white/60 text-xs font-medium">
+            {humanFileSize(file.size)}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (status === "failed") {
+    return (
+      <>
+        <div
+          data-tooltip-id={`attachment-uid-${uid}-error`}
+          data-tooltip-content={error}
+          className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-error/40 light:bg-error/30 border border-transparent w-[200px] group`}
+        >
+          <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
+            <button
+              onClick={removeFileFromQueue}
+              type="button"
+              className="light:bg-white bg-zinc-700 hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+            >
+              <X size={10} className="flex-shrink-0" />
+            </button>
+          </div>
+          <div
+            className={`bg-error rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+          >
+            <WarningOctagon size={30} className="text-white light:text-white" />
+          </div>
+          <div className="flex flex-col w-[130px]">
+            <p className="text-white light:text-red-600 text-xs font-medium truncate">
+              {file.name}
+            </p>
+            <p className="text-red-100 light:text-red-600 text-xs truncate">
+              {error ?? "this file failed to upload"}. It will not be available
+              in the workspace.
+            </p>
+          </div>
+        </div>
+        <Tooltip
+          id={`attachment-uid-${uid}-error`}
+          place="top"
+          delayShow={300}
+          className="allm-tooltip !allm-text-xs"
+        />
+      </>
+    );
+  }
+
+  if (type === "attachment") {
+    return (
+      <>
+        <div
+          data-tooltip-id={`attachment-uid-${uid}-success`}
+          data-tooltip-content={`${file.name} will be attached to this prompt. It will not be embedded into the workspace permanently.`}
+          className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
+        >
+          <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
+            <button
+              onClick={removeFileFromQueue}
+              type="button"
+              className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+            >
+              <X size={10} className="flex-shrink-0" />
+            </button>
+          </div>
+          {contentString ? (
+            <img
+              src={contentString}
+              className={`${iconBgColor} w-[30px] h-[30px] rounded-lg flex items-center justify-center`}
+            />
+          ) : (
+            <div
+              className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+            >
+              <Icon size={30} className="text-white light:text-white" />
+            </div>
+          )}
+          <div className="flex flex-col w-[130px]">
+            <p className="text-white text-xs font-medium truncate">
+              {file.name}
+            </p>
+            <p className="text-white/80 light:text-black/80 text-xs font-medium">
+              Image attached!
+            </p>
+          </div>
+        </div>
+        <Tooltip
+          id={`attachment-uid-${uid}-success`}
+          place="top"
+          delayShow={300}
+          className="allm-tooltip !allm-text-xs"
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div
+        data-tooltip-id={`attachment-uid-${uid}-success`}
+        data-tooltip-content={`${file.name} was uploaded and embedded into this workspace. It will be available for RAG chat now.`}
+        className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
+      >
+        <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
+          <button
+            onClick={removeFileFromQueue}
+            type="button"
+            className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+          >
+            <X size={10} className="flex-shrink-0" />
+          </button>
+        </div>
+        <div
+          className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+        >
+          <Icon size={30} className="text-white light:text-white" />
+        </div>
+        <div className="flex flex-col w-[130px]">
+          <p className="text-white text-xs font-medium truncate">{file.name}</p>
+          <p className="text-white/80 light:text-black/80 text-xs font-medium">
+            File embedded!
+          </p>
+        </div>
+      </div>
+      <Tooltip
+        id={`attachment-uid-${uid}-success`}
+        place="top"
+        delayShow={300}
+        className="allm-tooltip !allm-text-xs"
+      />
+    </>
+  );
+}
+
+/**
+ * @param {File} file
+ * @returns {{iconBgColor:string, Icon: React.Component}}
+ */
+function displayFromFile(file) {
+  const extension = file?.name?.split(".")?.pop()?.toLowerCase() ?? "txt";
+  switch (extension) {
+    case "pdf":
+      return { iconBgColor: "bg-magenta", Icon: FilePdf };
+    case "doc":
+    case "docx":
+      return { iconBgColor: "bg-royalblue", Icon: FileDoc };
+    case "html":
+      return { iconBgColor: "bg-purple", Icon: FileHtml };
+    case "csv":
+    case "xlsx":
+      return { iconBgColor: "bg-success", Icon: FileCsv };
+    case "json":
+    case "sql":
+    case "js":
+    case "jsx":
+    case "cpp":
+    case "c":
+      return { iconBgColor: "bg-warn", Icon: FileCode };
+    case "png":
+    case "jpg":
+    case "jpeg":
+      return { iconBgColor: "bg-royalblue", Icon: FileImage };
+    default:
+      return { iconBgColor: "bg-royalblue", Icon: FileText };
+  }
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx
new file mode 100644
index 0000000..2cabfda
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx
@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { X } from "@phosphor-icons/react";
+import ModalWrapper from "@/components/ModalWrapper";
+import { CMD_REGEX } from ".";
+
+export default function AddPresetModal({ isOpen, onClose, onSave }) {
+  const [command, setCommand] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const form = new FormData(e.target);
+    const sanitizedCommand = command.replace(CMD_REGEX, "");
+    const saved = await onSave({
+      command: `/${sanitizedCommand}`,
+      prompt: form.get("prompt"),
+      description: form.get("description"),
+    });
+    if (saved) setCommand("");
+  };
+
+  const handleCommandChange = (e) => {
+    const value = e.target.value.replace(CMD_REGEX, "");
+    setCommand(value);
+  };
+
+  return (
+    <ModalWrapper isOpen={isOpen}>
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Add New Preset
+            </h3>
+          </div>
+          <button
+            onClick={onClose}
+            type="button"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
+          >
+            <X size={24} weight="bold" className="text-white" />
+          </button>
+        </div>
+        <div
+          className="h-full w-full overflow-y-auto"
+          style={{ maxHeight: "calc(100vh - 200px)" }}
+        >
+          <form onSubmit={handleSubmit}>
+            <div className="py-7 px-9 space-y-2 flex-col">
+              <div className="w-full flex flex-col gap-y-4">
+                <div>
+                  <label
+                    htmlFor="command"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Command
+                  </label>
+                  <div className="flex items-center">
+                    <span className="text-white text-sm mr-2 font-bold">/</span>
+                    <input
+                      name="command"
+                      type="text"
+                      id="command"
+                      placeholder="your-command"
+                      value={command}
+                      onChange={handleCommandChange}
+                      maxLength={25}
+                      autoComplete="off"
+                      required={true}
+                      className="border-none bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <label
+                    htmlFor="prompt"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Prompt
+                  </label>
+                  <textarea
+                    name="prompt"
+                    id="prompt"
+                    autoComplete="off"
+                    placeholder="This is the content that will be injected in front of your prompt."
+                    required={true}
+                    className="border-none bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  >

+ + Description + + +

+ + +

+ +

+ + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx new file mode 100644 index 0000000..3d66102 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx @@ -0,0 +1,155 @@ +import { useState, useEffect } from "react"; +import { X } from "@phosphor-icons/react"; +import ModalWrapper from "@/components/ModalWrapper"; +import { CMD_REGEX } from "."; + +export default function EditPresetModal({ + isOpen, + onClose, + onSave, + onDelete, + preset, +}) { + const [command, setCommand] = useState(""); + const [deleting, setDeleting] = useState(false); + + useEffect(() => { + if (preset && isOpen) { + setCommand(preset.command?.slice(1) || ""); + } + }, [preset, isOpen]); + + const handleSubmit = (e) => { + e.preventDefault(); + const form = new FormData(e.target); + const sanitizedCommand = command.replace(CMD_REGEX, ""); + onSave({ + id: preset.id, + command: `/${sanitizedCommand}`, + prompt: form.get("prompt"), + description: form.get("description"), + }); + }; + + const handleCommandChange = (e) => { + const value = e.target.value.replace(CMD_REGEX, ""); + setCommand(value); + }; + + const handleDelete = async () => { + if (!window.confirm("Are you sure you want to delete this preset?")) return; + + setDeleting(true); + await onDelete(preset.id); + setDeleting(false); + onClose(); + }; + + return ( + +

+ Edit Preset +

+ +

+ + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx new file mode 100644 index 0000000..e7e5536 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx @@ -0,0 +1,136 @@ +import { useEffect, useState } from "react"; +import { useIsAgentSessionActive } from "@/utils/chat/agent"; +import AddPresetModal from "./AddPresetModal"; +import EditPresetModal from "./EditPresetModal"; +import { useModal } from "@/hooks/useModal"; +import System from "@/models/system"; +import { DotsThree, Plus } from "@phosphor-icons/react"; +import showToast from "@/utils/toast"; + +export const CMD_REGEX = new RegExp(/[^a-zA-Z0-9_-]/g); +export default function SlashPresets({ setShowing, sendCommand }) { + const isActiveAgentSession = useIsAgentSessionActive(); + const { + isOpen: isAddModalOpen, + openModal: openAddModal, + closeModal: closeAddModal, + } = useModal(); + const { + isOpen: isEditModalOpen, + openModal: openEditModal, + closeModal: closeEditModal, + } = useModal(); + const [presets, setPresets] = useState([]); + const [selectedPreset, setSelectedPreset] = useState(null); + + useEffect(() => { + fetchPresets(); + }, []); + if (isActiveAgentSession) return null; + + const fetchPresets = async () => { + const presets = await System.getSlashCommandPresets(); + setPresets(presets); + }; + + const handleSavePreset = async (preset) => { + const { error } = await System.createSlashCommandPreset(preset); + if (!!error) { + showToast(error, "error"); + return false; + } + + fetchPresets(); + closeAddModal(); + return true; + }; + + const handleEditPreset = (preset) => { + setSelectedPreset(preset); + openEditModal(); + }; + + const handleUpdatePreset = async (updatedPreset) => { + const { error } = await System.updateSlashCommandPreset( + updatedPreset.id, + updatedPreset + ); + + if (!!error) { + showToast(error, "error"); + return; + } + + fetchPresets(); + closeEditModalAndResetPreset(); + }; + + const handleDeletePreset = async (presetId) => { + await System.deleteSlashCommandPreset(presetId); + fetchPresets(); + closeEditModalAndResetPreset(); + }; + + const closeEditModalAndResetPreset = () => { + closeEditModal(); + setSelectedPreset(null); + }; + + return ( + <> + {presets.map((preset) => ( + + + ))} + + + {selectedPreset && ( + + )} + + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/endAgentSession.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/endAgentSession.jsx new file mode 100644 index 0000000..6a8d70f --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/endAgentSession.jsx @@ -0,0 +1,23 @@ +import { useIsAgentSessionActive } from "@/utils/chat/agent"; + +export default function EndAgentSession({ setShowing, sendCommand }) { + const isActiveAgentSession = useIsAgentSessionActive(); + if (!isActiveAgentSession) return null; + + return ( + + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/SlashCommandIcon.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/SlashCommandIcon.jsx new file mode 100644 index 0000000..4805233 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/SlashCommandIcon.jsx @@ -0,0 +1,28 @@ +export default function SlashCommandIcon(props) { + return ( + + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx new file mode 100644 index 0000000..26f1958 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx @@ -0,0 +1,69 @@ +import { useEffect, useRef, useState } from "react"; +import SlashCommandIcon from "./icons/SlashCommandIcon"; +import { Tooltip } from "react-tooltip"; +import ResetCommand from "./reset"; +import EndAgentSession from "./endAgentSession"; +import SlashPresets from "./SlashPresets"; + +export default function SlashCommandsButton({ showing, setShowSlashCommand }) { + return ( +

setShowSlashCommand(!showing)} + className={`flex justify-center items-center cursor-pointer ${ + showing ? "!opacity-100" : "" + }`} + > + +

+ ); +} + +export function SlashCommands({ showing, setShowing, sendCommand }) { + const cmdRef = useRef(null); + useEffect(() => { + function listenForOutsideClick() { + if (!showing || !cmdRef.current) return false; + document.addEventListener("click", closeIfOutside); + } + listenForOutsideClick(); + }, [showing, cmdRef.current]); + + const closeIfOutside = ({ target }) => { + if (target.id === "slash-cmd-btn") return; + const isOutside = !cmdRef?.current?.contains(target); + if (!isOutside) return; + setShowing(false); + }; + + return ( + + ); +} + +export function useSlashCommands() { + const [showSlashCommand, setShowSlashCommand] = useState(false); + return { showSlashCommand, setShowSlashCommand }; +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx new file mode 100644 index 0000000..f75468a --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx @@ -0,0 +1,23 @@ +import { useIsAgentSessionActive } from "@/utils/chat/agent"; + +export default function ResetCommand({ setShowing, sendCommand }) { + const isActiveAgentSession = useIsAgentSessionActive(); + if (isActiveAgentSession) return null; // cannot reset during active agent chat + + return ( + + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx new file mode 100644 index 0000000..f4991b4 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx @@ -0,0 +1,120 @@ +import { useEffect, useCallback } from "react"; +import { Microphone } from "@phosphor-icons/react"; +import { Tooltip } from "react-tooltip"; +import _regeneratorRuntime from "regenerator-runtime"; +import SpeechRecognition, { + useSpeechRecognition, +} from "react-speech-recognition"; +import { PROMPT_INPUT_EVENT } from "../../PromptInput"; + +let timeout; +const SILENCE_INTERVAL = 3_200; // wait in seconds of silence before closing. +export default function SpeechToText({ sendCommand }) { + const { + transcript, + listening, + resetTranscript, + browserSupportsSpeechRecognition, + browserSupportsContinuousListening, + isMicrophoneAvailable, + } = useSpeechRecognition({ + clearTranscriptOnListen: true, + }); + + function startSTTSession() { + if (!isMicrophoneAvailable) { + alert( + "AnythingLLM does not have access to microphone. Please enable for this site to use this feature." + ); + return; + } + + resetTranscript(); + SpeechRecognition.startListening({ + continuous: browserSupportsContinuousListening, + language: window?.navigator?.language ?? "en-US", + }); + } + + function endTTSSession() { + SpeechRecognition.stopListening(); + if (transcript.length > 0) { + sendCommand(transcript, true); + } + + resetTranscript(); + clearTimeout(timeout); + } + + const handleKeyPress = useCallback( + (event) => { + if (event.ctrlKey && event.keyCode === 77) { + if (listening) { + endTTSSession(); + } else { + startSTTSession(); + } + } + }, + [listening, endTTSSession, startSTTSession] + ); + + function handlePromptUpdate(e) { + if (!e?.detail && timeout) { + endTTSSession(); + clearTimeout(timeout); + } + } + + useEffect(() => { + document.addEventListener("keydown", handleKeyPress); + return () => { + document.removeEventListener("keydown", handleKeyPress); + }; + }, [handleKeyPress]); + + useEffect(() => { + if (!!window) + window.addEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate); + return () => + window?.removeEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate); + }, []); + + useEffect(() => { + if (transcript?.length > 0 && listening) { + sendCommand(transcript, false); + clearTimeout(timeout); + timeout = setTimeout(() => { + endTTSSession(); + }, SILENCE_INTERVAL); + } + }, [transcript, listening]); + + if (!browserSupportsSpeechRecognition) return null; + return ( +

+ +

+ ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx new file mode 100644 index 0000000..bce3c68 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx @@ -0,0 +1,53 @@ +import { ABORT_STREAM_EVENT } from "@/utils/chat"; +import { Tooltip } from "react-tooltip"; + +export default function StopGenerationButton() { + function emitHaltEvent() { + window.dispatchEvent(new CustomEvent(ABORT_STREAM_EVENT)); + } + + return ( + <> + + + + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/stop.svg b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/stop.svg new file mode 100644 index 0000000..ab98895 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/stop.svg @@ -0,0 +1,4 @@ + diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx new file mode 100644 index 0000000..9ca5be7 --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx @@ -0,0 +1,131 @@ +import { useState, useRef, useEffect } from "react"; +import { TextT } from "@phosphor-icons/react"; +import { Tooltip } from "react-tooltip"; + +export default function TextSizeButton() { + const [showTextSizeMenu, setShowTextSizeMenu] = useState(false); + const buttonRef = useRef(null); + + return ( + <> +

setShowTextSizeMenu(!showTextSizeMenu)} + className={`border-none relative flex justify-center items-center opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 cursor-pointer ${ + showTextSizeMenu ? "!opacity-100" : "" + }`} + > + +

+ + + ); +} + +function TextSizeMenu({ showing, setShowing, buttonRef }) { + const formRef = useRef(null); + const [selectedSize, setSelectedSize] = useState( + window.localStorage.getItem("anythingllm_text_size") || "normal" + ); + + useEffect(() => { + function listenForOutsideClick() { + if (!showing || !formRef.current) return false; + document.addEventListener("click", closeIfOutside); + } + listenForOutsideClick(); + }, [showing, formRef.current]); + + const closeIfOutside = ({ target }) => { + if (target.id === "text-size-btn") return; + const isOutside = !formRef?.current?.contains(target); + if (!isOutside) return; + setShowing(false); + }; + + const handleTextSizeChange = (size) => { + setSelectedSize(size); + window.localStorage.setItem("anythingllm_text_size", size); + window.dispatchEvent(new CustomEvent("textSizeChange", { detail: size })); + }; + + if (!buttonRef.current) return null; + + return ( + + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx new file mode 100644 index 0000000..a0b5d7f --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx @@ -0,0 +1,327 @@ +import React, { useState, useRef, useEffect } from "react"; +import SlashCommandsButton, { + SlashCommands, + useSlashCommands, +} from "./SlashCommands"; +import debounce from "lodash.debounce"; +import { PaperPlaneRight } from "@phosphor-icons/react"; +import StopGenerationButton from "./StopGenerationButton"; +import AvailableAgentsButton, { + AvailableAgents, + useAvailableAgents, +} from "./AgentMenu"; +import TextSizeButton from "./TextSizeMenu"; +import SpeechToText from "./SpeechToText"; +import { Tooltip } from "react-tooltip"; +import AttachmentManager from "./Attachments"; +import AttachItem from "./AttachItem"; +import { PASTE_ATTACHMENT_EVENT } from "../DnDWrapper"; +import useTextSize from "@/hooks/useTextSize"; + +export const PROMPT_INPUT_EVENT = "set_prompt_input"; +const MAX_EDIT_STACK_SIZE = 100; + +export default function PromptInput({ + submit, + onChange, + inputDisabled, + buttonDisabled, + sendCommand, + attachments = [], +}) { + const [promptInput, setPromptInput] = useState(""); + const { showAgents, setShowAgents } = useAvailableAgents(); + const { showSlashCommand, setShowSlashCommand } = useSlashCommands(); + const formRef = useRef(null); + const textareaRef = useRef(null); + const [_, setFocused] = useState(false); + const undoStack = useRef([]); + const redoStack = useRef([]); + const { textSizeClass } = useTextSize(); + + /** + * To prevent too many re-renders we remotely listen for updates from the parent + * via an event cycle. Otherwise, using message as a prop leads to a re-render every + * change on the input. + * @param {Event} e + */ + function handlePromptUpdate(e) { + setPromptInput(e?.detail ?? ""); + } + + function resetTextAreaHeight() { + if (!textareaRef.current) return; + textareaRef.current.style.height = "auto"; + } + + useEffect(() => { + if (!!window) + window.addEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate); + return () => + window?.removeEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate); + }, []); + + useEffect(() => { + if (!inputDisabled && textareaRef.current) textareaRef.current.focus(); + resetTextAreaHeight(); + }, [inputDisabled]); + + /** + * Save the current state before changes + * @param {number} adjustment + */ + function saveCurrentState(adjustment = 0) { + if (undoStack.current.length >= MAX_EDIT_STACK_SIZE) + undoStack.current.shift(); + undoStack.current.push({ + value: promptInput, + cursorPositionStart: textareaRef.current.selectionStart + adjustment, + cursorPositionEnd: textareaRef.current.selectionEnd + adjustment, + }); + } + const debouncedSaveState = debounce(saveCurrentState, 250); + + function handleSubmit(e) { + setFocused(false); + submit(e); + } + + function resetTextAreaHeight() { + if (!textareaRef.current) return; + textareaRef.current.style.height = "auto"; + } + + function checkForSlash(e) { + const input = e.target.value; + if (input === "/") setShowSlashCommand(true); + if (showSlashCommand) setShowSlashCommand(false); + return; + } + const watchForSlash = debounce(checkForSlash, 300); + + function checkForAt(e) { + const input = e.target.value; + if (input === "@") return setShowAgents(true); + if (showAgents) return setShowAgents(false); + } + const watchForAt = debounce(checkForAt, 300); + + /** + * Capture enter key press to handle submission, redo, or undo + * via keyboard shortcuts + * @param {KeyboardEvent} event + */ + function captureEnterOrUndo(event) { + // Is simple enter key press w/o shift key + if (event.keyCode === 13 && !event.shiftKey) { + event.preventDefault(); + return submit(event); + } + + // Is undo with Ctrl+Z or Cmd+Z + Shift key = Redo + if ( + (event.ctrlKey || event.metaKey) && + event.key === "z" && + event.shiftKey + ) { + event.preventDefault(); + if (redoStack.current.length === 0) return; + + const nextState = redoStack.current.pop(); + if (!nextState) return; + + undoStack.current.push({ + value: promptInput, + cursorPositionStart: textareaRef.current.selectionStart, + cursorPositionEnd: textareaRef.current.selectionEnd, + }); + setPromptInput(nextState.value); + setTimeout(() => { + textareaRef.current.setSelectionRange( + nextState.cursorPositionStart, + nextState.cursorPositionEnd + ); + }, 0); + } + + // Undo with Ctrl+Z or Cmd+Z + if ( + (event.ctrlKey || event.metaKey) && + event.key === "z" && + !event.shiftKey + ) { + if (undoStack.current.length === 0) return; + const lastState = undoStack.current.pop(); + if (!lastState) return; + + redoStack.current.push({ + value: promptInput, + cursorPositionStart: textareaRef.current.selectionStart, + cursorPositionEnd: textareaRef.current.selectionEnd, + }); + setPromptInput(lastState.value); + setTimeout(() => { + textareaRef.current.setSelectionRange( + lastState.cursorPositionStart, + lastState.cursorPositionEnd + ); + }, 0); + } + } + + function adjustTextArea(event) { + const element = event.target; + element.style.height = "auto"; + element.style.height = `${element.scrollHeight}px`; + } + + function handlePasteEvent(e) { + e.preventDefault(); + if (e.clipboardData.items.length === 0) return false; + + // paste any clipboard items that are images. + for (const item of e.clipboardData.items) { + if (item.type.startsWith("image/")) { + const file = item.getAsFile(); + window.dispatchEvent( + new CustomEvent(PASTE_ATTACHMENT_EVENT, { + detail: { files: [file] }, + }) + ); + continue; + } + + // handle files specifically that are not images as uploads + if (item.kind === "file") { + const file = item.getAsFile(); + window.dispatchEvent( + new CustomEvent(PASTE_ATTACHMENT_EVENT, { + detail: { files: [file] }, + }) + ); + continue; + } + } + + const pasteText = e.clipboardData.getData("text/plain"); + if (pasteText) { + const textarea = textareaRef.current; + const start = textarea.selectionStart; + const end = textarea.selectionEnd; + const newPromptInput = + promptInput.substring(0, start) + + pasteText + + promptInput.substring(end); + setPromptInput(newPromptInput); + onChange({ target: { value: newPromptInput } }); + + // Set the cursor position after the pasted text + // we need to use setTimeout to prevent the cursor from being set to the end of the text + setTimeout(() => { + textarea.selectionStart = textarea.selectionEnd = + start + pasteText.length; + }, 0); + } + return; + } + + function handleChange(e) { + debouncedSaveState(-1); + onChange(e); + watchForSlash(e); + watchForAt(e); + adjustTextArea(e); + setPromptInput(e.target.value); + } + + return ( +

+ + +

+ +

PLEASE READ THIS

+ WARNING - This action is irreversible +

+ Recovery Codes +

+ Create New Folder +

My Documents

+ {workspace.name} +

+ {workspace.name} +

+ What is document pinning? +

+ What does watching a document do? +

+ Editing "{workspace.name}" +

+ {t("new-workspace.title")} +

+ {t("login.password-reset.title")} +

+ Reset Password +

+ {t("login.multi-user.welcome")} +

+ {t("login.multi-user.welcome")} +

+ Edit Account +

+ {title} +

+ {title} +

+ {title} +

+ {title} +

+ {title} +

+ {title} +

+ {title} +

+ {title} +

+ {title} +

+ {title} +

+ {webpageUrl} + +

+ {truncate(title, 45)} +

+ Edit Preset +