diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx index b87ee117..0952ebd7 100644 --- a/frontend/src/components/DefaultChat/index.jsx +++ b/frontend/src/components/DefaultChat/index.jsx @@ -4,6 +4,8 @@ import NewWorkspaceModal, { useNewWorkspaceModal, } from "../Modals/NewWorkspace"; import paths from "../../utils/paths"; +import { isMobile } from "react-device-detect"; +import { SidebarMobileHeader } from "../Sidebar"; export default function DefaultChatContainer() { const [mockMsgs, setMockMessages] = useState([]); @@ -21,8 +23,8 @@ export default function DefaultChatContainer() { popMsg ? "chat__message" : "" }`} > -
-

+

+

Welcome to AnythingLLM, AnythingLLM is an open-source AI tool by Mintplex Labs that turns anything into a trained chatbot you can query and chat with. AnythingLLM is a BYOK (bring-your-own-keys) @@ -39,8 +41,8 @@ export default function DefaultChatContainer() { popMsg ? "chat__message" : "" }`} > -

-

+

+

AnythingLLM is the easiest way to put powerful AI products like OpenAi, GPT-4, LangChain, PineconeDB, ChromaDB, and other services together in a neat package with no fuss to increase your @@ -56,8 +58,8 @@ export default function DefaultChatContainer() { popMsg ? "chat__message" : "" }`} > -

-

+

+

AnythingLLM can run totally locally on your machine with little overhead you wont even notice it's there! No GPU needed. Cloud and on-premises installation is available as well. @@ -71,7 +73,7 @@ export default function DefaultChatContainer() { className="mt-4 w-fit flex flex-grow gap-x-2 py-[5px] px-4 border border-slate-400 rounded-lg text-slate-800 dark:text-slate-200 justify-start items-center hover:bg-slate-100 dark:hover:bg-stone-900 dark:bg-stone-900" > -

+

Create an issue on Github

@@ -85,8 +87,8 @@ export default function DefaultChatContainer() { popMsg ? "chat__message" : "" }`} > -
-

+

+

How do I get started?!

@@ -99,8 +101,8 @@ export default function DefaultChatContainer() { popMsg ? "chat__message" : "" }`} > -
-

+

+

It's simple. All collections are organized into buckets we call{" "} "Workspaces". Workspaces are buckets of files, documents, images, PDFs, and other files which will be transformed into @@ -114,7 +116,7 @@ export default function DefaultChatContainer() { className="mt-4 w-fit flex flex-grow gap-x-2 py-[5px] px-4 border border-slate-400 rounded-lg text-slate-800 dark:text-slate-200 justify-start items-center hover:bg-slate-100 dark:hover:bg-stone-900 dark:bg-stone-900" > -

+

Create your first workspace

@@ -128,8 +130,8 @@ export default function DefaultChatContainer() { popMsg ? "chat__message" : "" }`} > -
-

+

+

Is this like an AI dropbox or something? What about chatting? It is a chatbot isn't it?

@@ -143,8 +145,8 @@ export default function DefaultChatContainer() { popMsg ? "chat__message" : "" }`} > -
-

+

+

AnythingLLM is more than a smarter Dropbox.

@@ -174,8 +176,8 @@ export default function DefaultChatContainer() { popMsg ? "chat__message" : "" }`} > -

-

+

+

Wow, this sounds amazing, let me try it out already!

@@ -188,18 +190,18 @@ export default function DefaultChatContainer() { popMsg ? "chat__message" : "" }`} > -
-

+

+

Have Fun!

-
+
-

+

Star on GitHub

@@ -208,7 +210,7 @@ export default function DefaultChatContainer() { className="mt-4 w-fit flex flex-grow gap-x-2 py-[5px] px-4 border border-slate-400 rounded-lg text-slate-800 dark:text-slate-200 justify-start items-center hover:bg-slate-100 dark:hover:bg-stone-900 dark:bg-stone-900" > -

+

Contact Mintplex Labs

@@ -245,9 +247,10 @@ export default function DefaultChatContainer() { return (
+ {isMobile && } {mockMsgs.map((content, i) => { return {content}; })} diff --git a/frontend/src/components/Modals/Keys.jsx b/frontend/src/components/Modals/Keys.jsx index c4c8a519..7f472d86 100644 --- a/frontend/src/components/Modals/Keys.jsx +++ b/frontend/src/components/Modals/Keys.jsx @@ -26,7 +26,7 @@ export default function KeysModal({ hideModal = noop }) {

- Your System Settings + System Settings

-
+
@@ -210,7 +210,7 @@ export default function DocumentSettings({ workspace }) { disabled={saving} onClick={confirmChanges} type="submit" - className="text-slate-200 bg-black-900 px-4 py-2 rounded-lg hover:bg-gray-900" + className="text-slate-200 bg-black-900 px-4 py-2 rounded-lg hover:bg-gray-900 whitespace-nowrap text-sm" > {saving ? "Saving..." : "Confirm Changes"} diff --git a/frontend/src/components/Modals/MangeWorkspace/Settings/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Settings/index.jsx index 8e652986..c35df763 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Settings/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Settings/index.jsx @@ -154,18 +154,18 @@ export default function WorkspaceSettings({ workspace }) { )}
-
+
{hasChanges && ( diff --git a/frontend/src/components/Modals/MangeWorkspace/Upload/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Upload/index.jsx index 86c19564..2f56dba7 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Upload/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Upload/index.jsx @@ -78,12 +78,12 @@ export default function UploadToWorkspace({ workspace, fileTypes }) { return (
-
+
-

+

Document processor is offline.

-

+

you cannot upload documents from the UI right now

diff --git a/frontend/src/components/Modals/MangeWorkspace/index.jsx b/frontend/src/components/Modals/MangeWorkspace/index.jsx index 9a1de8c2..c35675ad 100644 --- a/frontend/src/components/Modals/MangeWorkspace/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/index.jsx @@ -83,26 +83,26 @@ export default function ManageWorkspace({ function WorkspaceSettingTabs({ selectedTab, changeTab }) { return (
-
    +
      } + icon={} onClick={changeTab} /> } + icon={} onClick={changeTab} /> } + icon={} onClick={changeTab} />
    @@ -126,7 +126,7 @@ function WorkspaceTab({ disabled={active} onClick={() => onClick(tabName)} className={ - "flex items-center gap-x-1 p-4 border-b-2 rounded-t-lg group " + + "flex items-center gap-x-1 p-4 border-b-2 rounded-t-lg group whitespace-nowrap " + classes } > diff --git a/frontend/src/components/Modals/NewWorkspace.jsx b/frontend/src/components/Modals/NewWorkspace.jsx index 81a87903..07cb4586 100644 --- a/frontend/src/components/Modals/NewWorkspace.jsx +++ b/frontend/src/components/Modals/NewWorkspace.jsx @@ -63,7 +63,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) { Error: {error}

    )} -

    +

    After creating a workspace you will be able to add and remove documents from it.

    diff --git a/frontend/src/components/Modals/Password.jsx b/frontend/src/components/Modals/Password.jsx index 280572fe..30c628fb 100644 --- a/frontend/src/components/Modals/Password.jsx +++ b/frontend/src/components/Modals/Password.jsx @@ -31,7 +31,7 @@ export default function PasswordModal() {
    -

    +

    This workspace is password protected.

    @@ -58,7 +58,7 @@ export default function PasswordModal() { Error: {error}

    )} -

    +

    You will only have to enter this password once. After successful login it will be stored in your browser.

    diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx index 549d3f34..ce7adccf 100644 --- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx +++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx @@ -57,8 +57,8 @@ export default function ActiveWorkspaces() { : "hover:bg-slate-100 dark:hover:bg-stone-900 " }`} > - -

    + +

    {workspace.name}

    diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx index 2cd40266..fc50fe04 100644 --- a/frontend/src/components/Sidebar/index.jsx +++ b/frontend/src/components/Sidebar/index.jsx @@ -1,5 +1,13 @@ -import React, { useRef } from "react"; -import { BookOpen, Briefcase, Cpu, GitHub, Key, Plus } from "react-feather"; +import React, { useEffect, useRef, useState } from "react"; +import { + BookOpen, + Briefcase, + Cpu, + GitHub, + Key, + Menu, + Plus, +} from "react-feather"; import IndexCount from "./IndexCount"; import LLMStatus from "./LLMStatus"; import KeysModal, { useKeysModal } from "../Modals/Keys"; @@ -22,11 +30,6 @@ export default function Sidebar() { hideModal: hideNewWsModal, } = useNewWorkspaceModal(); - // const handleWidthToggle = () => { - // if (!sidebarRef.current) return false; - // sidebarRef.current.classList.add('translate-x-[-100%]') - // } - return ( <>
    - {/* */} -
    {/* Header Information */}
    @@ -133,3 +131,161 @@ export default function Sidebar() { ); } + +export function SidebarMobileHeader() { + const [showSidebar, setShowSidebar] = useState(false); + const [showBgOverlay, setShowBgOverlay] = useState(false); + const sidebarRef = useRef(null); + const { + showing: showingKeyModal, + showModal: showKeyModal, + hideModal: hideKeyModal, + } = useKeysModal(); + const { + showing: showingNewWsModal, + showModal: showNewWsModal, + hideModal: hideNewWsModal, + } = useNewWorkspaceModal(); + + useEffect(() => { + function handleBg() { + if (showSidebar) { + setTimeout(() => { + setShowBgOverlay(true); + }, 300); + } else { + setShowBgOverlay(false); + } + } + handleBg(); + }, [showSidebar]); + + return ( + <> +
    + +

    + AnythingLLM +

    +
    +
    +
    setShowSidebar(false)} + /> +
    +
    + {/* Header Information */} +
    +

    + AnythingLLM +

    +
    + +
    +
    + + {/* Primary Body */} +
    +
    +
    +
    + +
    + +
    +
    + +
    +
    +
    + {showingKeyModal && } + {showingNewWsModal && } +
    + + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx index 0e235240..d13f670f 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx @@ -21,9 +21,9 @@ function HistoricalMessage({ if (role === "user") { return (
    -
    +
    {message} @@ -52,9 +52,9 @@ function HistoricalMessage({ return (
    -
    +
    diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx index b3dd26e2..a0bf02bc 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx @@ -25,7 +25,7 @@ function PromptReply({ return (
    -
    +
    @@ -58,9 +58,9 @@ function PromptReply({ className="mb-4 flex justify-start items-end" > -
    +
    diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx index 0d022226..6e400c03 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx @@ -1,7 +1,6 @@ import { Frown } from "react-feather"; import HistoricalMessage from "./HistoricalMessage"; import PromptReply from "./PromptReply"; -// import paths from '../../../../../utils/paths'; export default function ChatHistory({ history = [], workspace }) { if (history.length === 0) { @@ -20,7 +19,7 @@ export default function ChatHistory({ history = [], workspace }) { return (
    {history.map( diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx index a9e5d9c6..bd656a7f 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx @@ -1,4 +1,5 @@ import React, { useState, useRef } from "react"; +import { isMobile } from "react-device-detect"; import { Loader, Menu, Send, X } from "react-feather"; export default function PromptInput({ @@ -24,6 +25,7 @@ export default function PromptInput({ } }; const adjustTextArea = (event) => { + if (isMobile) return false; const element = event.target; element.style.height = "1px"; element.style.height = @@ -37,10 +39,10 @@ export default function PromptInput({ }; return ( -
    +
    {/* Toggle selector? */} @@ -64,7 +66,11 @@ export default function PromptInput({ }} value={message} className="cursor-text max-h-[100px] md:min-h-[40px] block mx-2 md:mx-4 p-2.5 w-full text-[16px] md:text-sm rounded-lg border bg-gray-50 border-gray-300 placeholder-gray-400 text-gray-900 dark:text-white dark:bg-stone-600 dark:border-stone-700 dark:placeholder-stone-400" - placeholder="Shift + Enter for newline. Enter to submit." + placeholder={ + isMobile + ? "Enter your message here." + : "Shift + Enter for newline. Enter to submit." + } />