kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-05 06:20:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add mobile stylings to UI (#75)

Browse Source 
* initial chat pages mobile stylings

* fix sidebar

* manage workspace modal styles

* mobile styles v1
This commit is contained in:
Timothy Carambat 2023-06-16 23:50:56 -07:00 committed by GitHub
parent e7ba028497
commit 3945a77290
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 259 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/components/DefaultChat/index.jsx
View File

@ -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" : ""
}`}
>
<div className="p-4 max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-semibold">
<div className="p-4 max-w-full md:max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base">
Welcome to AnythingLLM, AnythingLLM is an open-source AI tool by
Mintplex Labs that turns <i>anything</i> 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" : ""
}`}
>
<div className="p-4 max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-semibold">
<div className="p-4 max-w-full md:max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base">
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" : ""
}`}
>
<div className="p-4 max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-semibold">
<div className="p-4 max-w-full md:max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base">
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"
>
<GitMerge className="h-4 w-4" />
<p className="text-slate-800 dark:text-slate-200 text-lg leading-loose">
<p className="text-slate-800 dark:text-slate-200 text-sm md:text-lg leading-loose">
Create an issue on Github
</p>
</a>
@ -85,8 +87,8 @@ export default function DefaultChatContainer() {
popMsg ? "chat__message" : ""
}`}
>
<div className="p-4 max-w-[75%] bg-slate-200 dark:bg-amber-800 rounded-b-2xl rounded-tl-2xl rounded-tr-sm">
<p className="text-slate-800 dark:text-slate-200 font-semibold">
<div className="p-4 max-w-full md:max-w-[75%] bg-slate-200 dark:bg-amber-800 rounded-b-2xl rounded-tl-2xl rounded-tr-sm">
<p className="text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base">
How do I get started?!
</p>
</div>
@ -99,8 +101,8 @@ export default function DefaultChatContainer() {
popMsg ? "chat__message" : ""
}`}
>
<div className="p-4 max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-semibold">
<div className="p-4 max-w-full md:max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base">
It's simple. All collections are organized into buckets we call{" "}
<b>"Workspaces"</b>. 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"
>
<Plus className="h-4 w-4" />
<p className="text-slate-800 dark:text-slate-200 text-lg leading-loose">
<p className="text-slate-800 dark:text-slate-200 text-sm md:text-lg leading-loose">
Create your first workspace
</p>
</button>
@ -128,8 +130,8 @@ export default function DefaultChatContainer() {
popMsg ? "chat__message" : ""
}`}
>
<div className="p-4 max-w-[75%] bg-slate-200 dark:bg-amber-800 rounded-b-2xl rounded-tl-2xl rounded-tr-sm">
<p className="text-slate-800 dark:text-slate-200 font-semibold">
<div className="p-4 max-w-full md:max-w-[75%] bg-slate-200 dark:bg-amber-800 rounded-b-2xl rounded-tl-2xl rounded-tr-sm">
<p className="text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base">
Is this like an AI dropbox or something? What about chatting? It is
a chatbot isn't it?
</p>
@ -143,8 +145,8 @@ export default function DefaultChatContainer() {
popMsg ? "chat__message" : ""
}`}
>
<div className="p-4 max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-semibold">
<div className="p-4 max-w-full md:max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base">
AnythingLLM is more than a smarter Dropbox.
<br />
<br />
@ -174,8 +176,8 @@ export default function DefaultChatContainer() {
popMsg ? "chat__message" : ""
}`}
>
<div className="p-4 max-w-[75%] bg-slate-200 dark:bg-amber-800 rounded-b-2xl rounded-tl-2xl rounded-tr-sm">
<p className="text-slate-800 dark:text-slate-200 font-semibold">
<div className="p-4 max-w-full md:max-w-[75%] bg-slate-200 dark:bg-amber-800 rounded-b-2xl rounded-tl-2xl rounded-tr-sm">
<p className="text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base">
Wow, this sounds amazing, let me try it out already!
</p>
</div>
@ -188,18 +190,18 @@ export default function DefaultChatContainer() {
popMsg ? "chat__message" : ""
}`}
>
<div className="p-4 max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-semibold">
<div className="p-4 max-w-full md:max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-b-2xl rounded-tr-2xl rounded-tl-sm">
<p className="text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base">
Have Fun!
</p>
<div className="flex items-center gap-x-4">
<div className="flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-4">
<a
href={paths.github()}
target="_blank"
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"
>
<GitHub className="h-4 w-4" />
<p className="text-slate-800 dark:text-slate-200 text-lg leading-loose">
<p className="text-slate-800 dark:text-slate-200 text-sm md:text-lg leading-loose">
Star on GitHub
</p>
</a>
@ -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"
>
<Mail className="h-4 w-4" />
<p className="text-slate-800 dark:text-slate-200 text-lg leading-loose">
<p className="text-slate-800 dark:text-slate-200 text-sm md:text-lg leading-loose">
Contact Mintplex Labs
</p>
</a>
@ -245,9 +247,10 @@ export default function DefaultChatContainer() {
return (
<div
style={{ height: "calc(100% - 32px)" }}
className="transition-all duration-500 relative ml-[2px] mr-[8px] my-[16px] rounded-[26px] bg-white dark:bg-black-900 min-w-[82%] p-[18px] h-full overflow-y-scroll"
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-white dark:bg-black-900 md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
>
{isMobile && <SidebarMobileHeader />}
{mockMsgs.map((content, i) => {
return <React.Fragment key={i}>{content}</React.Fragment>;
})}

4
frontend/src/components/Modals/Keys.jsx
View File

@ -26,7 +26,7 @@ export default function KeysModal({ hideModal = noop }) {
<div className="relative bg-white rounded-lg shadow dark:bg-stone-700">
<div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
Your System Settings
System Settings
</h3>
<button
onClick={hideModal}
@ -48,7 +48,7 @@ export default function KeysModal({ hideModal = noop }) {
<div className="w-full flex flex-col gap-y-4">
<div className="bg-orange-300 p-4 rounded-lg border border-orange-600 text-orange-700 w-full items-center flex gap-x-2">
<AlertCircle className="h-8 w-8" />
<p>
<p className="text-sm md:text-base ">
Ensure all fields are green before attempting to use
AnythingLLM or it may not function as expected!
</p>

2
frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
View File

@ -42,7 +42,7 @@ export default function Directory({
className="flex gap-x-2 items-center cursor-pointer w-full"
onClick={() => toggleExpanded(!isExpanded)}
>
<h2 className="text-2xl">{files.name}</h2>
<h2 className="text-base md:text-2xl">{files.name}</h2>
{files.items.some((files) => files.type === "folder") ? (
<p className="text-xs italic">{files.items.length} folders</p>
) : (

6
frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx
View File

@ -197,11 +197,11 @@ export default function DocumentSettings({ workspace }) {
</div>
</div>
</div>
<div className="flex items-center justify-between p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<div className="flex items-center justify-between p-4 md:p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button
onClick={deleteWorkspace}
type="button"
className="border border-transparent text-gray-500 bg-white hover:bg-red-100 rounded-lg text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-transparent dark:text-gray-300 dark:hover:text-white dark:hover:bg-red-600"
className="border border-transparent text-gray-500 bg-white hover:bg-red-100 rounded-lg whitespace-nowrap text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-transparent dark:text-gray-300 dark:hover:text-white dark:hover:bg-red-600"
>
Delete Workspace
</button>
@ -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"}
</button>

6
frontend/src/components/Modals/MangeWorkspace/Settings/index.jsx
View File

@ -154,18 +154,18 @@ export default function WorkspaceSettings({ workspace }) {
)}
</div>
</div>
<div className="flex items-center justify-between p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<div className="flex items-center justify-between p-2 md:p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button
onClick={deleteWorkspace}
type="button"
className="border border-transparent text-gray-500 bg-white hover:bg-red-100 rounded-lg text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-transparent dark:text-gray-300 dark:hover:text-white dark:hover:bg-red-600"
className="border border-transparent text-gray-500 bg-white hover:bg-red-100 rounded-lg whitespace-nowrap text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-transparent dark:text-gray-300 dark:hover:text-white dark:hover:bg-red-600"
>
Delete Workspace
</button>
{hasChanges && (
<button
type="submit"
className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-black dark:text-slate-200 dark:border-transparent dark:hover:text-slate-200 dark:hover:bg-gray-900 dark:focus:ring-gray-800"
className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 whitespace-nowrap text-sm font-medium px-2 md:px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-black dark:text-slate-200 dark:border-transparent dark:hover:text-slate-200 dark:hover:bg-gray-900 dark:focus:ring-gray-800"
>
{saving ? "Updating..." : "Update workspace"}
</button>

6
frontend/src/components/Modals/MangeWorkspace/Upload/index.jsx
View File

@ -78,12 +78,12 @@ export default function UploadToWorkspace({ workspace, fileTypes }) {
return (
<ModalWrapper deleteWorkspace={deleteWorkspace}>
<div className="outline-none transition-all duration-300 bg-red-200 flex h-[20rem] overflow-y-scroll overflow-x-hidden rounded-lg">
<div className="flex flex-col gap-y-1 w-full h-full items-center justify-center">
<div className="flex flex-col gap-y-1 w-full h-full items-center justify-center md:px-0 px-2">
<Frown className="w-8 h-8 text-red-800" />
<p className="text-red-800 text-xs">
<p className="text-red-800 text-xs text-center">
Document processor is offline.
</p>
<p className="text-red-800 text-xs">
<p className="text-red-800 text-[10px] md:text-xs text-center">
you cannot upload documents from the UI right now
</p>
</div>

10
frontend/src/components/Modals/MangeWorkspace/index.jsx
View File

@ -83,26 +83,26 @@ export default function ManageWorkspace({
function WorkspaceSettingTabs({ selectedTab, changeTab }) {
return (
<div>
<ul className="flex flex-wrap -mb-px text-sm gap-x-2 font-medium text-center text-gray-500 dark:text-gray-400">
<ul className="flex md:flex-wrap overflow-x-scroll no-scroll -mb-px text-sm gap-x-2 font-medium text-center text-gray-500 dark:text-gray-400">
<WorkspaceTab
active={selectedTab === "documents"}
displayName="Documents"
tabName="documents"
icon={<Archive className="h-4 w-4" />}
icon={<Archive className="h-4 w-4 flex-shrink-0" />}
onClick={changeTab}
/>
<WorkspaceTab
active={selectedTab === "upload"}
displayName="Upload Docs"
tabName="upload"
icon={<UploadCloud className="h-4 w-4" />}
icon={<UploadCloud className="h-4 w-4 flex-shrink-0" />}
onClick={changeTab}
/>
<WorkspaceTab
active={selectedTab === "settings"}
displayName="Settings"
tabName="settings"
icon={<Sliders className="h-4 w-4" />}
icon={<Sliders className="h-4 w-4 flex-shrink-0" />}
onClick={changeTab}
/>
</ul>
@ -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
}
>

2
frontend/src/components/Modals/NewWorkspace.jsx
View File

@ -63,7 +63,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
Error: {error}
</p>
)}
<p className="text-gray-800 dark:text-slate-200 text-sm">
<p className="text-gray-800 dark:text-slate-200 text-xs md:text-sm">
After creating a workspace you will be able to add and remove
documents from it.
</p>

4
frontend/src/components/Modals/Password.jsx
View File

@ -31,7 +31,7 @@ export default function PasswordModal() {
<form ref={formEl} onSubmit={handleLogin}>
<div className="relative bg-white rounded-lg shadow dark:bg-stone-700">
<div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
<h3 className="text-md md:text-xl font-semibold text-gray-900 dark:text-white">
This workspace is password protected.
</h3>
</div>
@ -58,7 +58,7 @@ export default function PasswordModal() {
Error: {error}
</p>
)}
<p className="text-gray-800 dark:text-slate-200 text-sm">
<p className="text-gray-800 dark:text-slate-200 md:text-sm text-xs">
You will only have to enter this password once. After
successful login it will be stored in your browser.
</p>

4
frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
View File

@ -57,8 +57,8 @@ export default function ActiveWorkspaces() {
: "hover:bg-slate-100 dark:hover:bg-stone-900 "
}`}
>
<Book className="h-4 w-4" />
<p className="text-slate-800 dark:text-slate-200 text-xs leading-loose font-semibold">
<Book className="h-4 w-4 flex-shrink-0" />
<p className="text-slate-800 dark:text-slate-200 text-xs leading-loose font-semibold whitespace-nowrap overflow-hidden ">
{workspace.name}
</p>
</a>

180
frontend/src/components/Sidebar/index.jsx
View File

@ -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 (
<>
<div
@ -34,11 +37,6 @@ export default function Sidebar() {
style={{ height: "calc(100% - 32px)" }}
className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-white dark:bg-black-900 min-w-[15.5%] p-[18px] "
>
{/* <button onClick={handleWidthToggle} className='absolute -right-[13px] top-[35%] bg-white w-auto h-auto bg-transparent flex items-center'>
<svg width="16" height="96" viewBox="0 0 16 96" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#141414"><path d="M2.5 0H3C3 20 15 12 15 32V64C15 84 3 76 3 96H2.5V0Z" fill="black" fill-opacity="0.12" stroke="transparent" stroke-width="0px"></path><path d="M0 0H2.5C2.5 20 14.5 12 14.5 32V64C14.5 84 2.5 76 2.5 96H0V0Z" fill="#141414"></path></svg>
<ChevronLeft className='absolute h-4 w-4 text-white mr-1' />
</button> */}
<div className="w-full h-full flex flex-col overflow-x-hidden items-between">
{/* Header Information */}
<div className="flex w-full items-center justify-between">
@ -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 (
<>
<div className="flex justify-between relative top-0 left-0 w-full rounded-b-lg px-2 pb-4 bg-white dark:bg-black-900 text-slate-800 dark:text-slate-200">
<button
onClick={() => setShowSidebar(true)}
className="rounded-md bg-stone-200 p-2 flex items-center justify-center text-slate-800 hover:bg-stone-300 group dark:bg-stone-800 dark:text-slate-200 dark:hover:bg-stone-900 dark:border dark:border-stone-800"
>
<Menu className="h-6 w-6" />
</button>
<p className="text-xl font-base text-slate-600 dark:text-slate-200">
AnythingLLM
</p>
</div>
<div
style={{
transform: showSidebar ? `translateX(0vw)` : `translateX(-100vw)`,
}}
className={`z-99 fixed top-0 left-0 transition-all duration-500 w-[100vw] h-[100vh]`}
>
<div
className={`${
showBgOverlay
? "transition-all opacity-1"
: "transition-none opacity-0"
} duration-500 fixed top-0 left-0 bg-black-900 bg-opacity-75 w-screen h-screen`}
onClick={() => setShowSidebar(false)}
/>
<div
ref={sidebarRef}
className="h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-white dark:bg-black-900 w-[70%] p-[18px] "
>
<div className="w-full h-full flex flex-col overflow-x-hidden items-between">
{/* Header Information */}
<div className="flex w-full items-center justify-between">
<p className="text-xl font-base text-slate-600 dark:text-slate-200">
AnythingLLM
</p>
<div className="flex gap-x-2 items-center text-slate-500">
<button
onClick={showKeyModal}
className="transition-all duration-300 p-2 rounded-full bg-slate-200 text-slate-400 dark:bg-stone-800 hover:bg-slate-800 hover:text-slate-200 dark:hover:text-slate-200"
>
<Key className="h-4 w-4 " />
</button>
</div>
</div>
{/* Primary Body */}
<div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-hidden ">
<div className="h-auto md:sidebar-items md:dark:sidebar-items">
<div
style={{ height: "calc(100vw - -3rem)" }}
className=" flex flex-col gap-y-4 pb-8 overflow-y-scroll no-scroll"
>
<div className="flex gap-x-2 items-center justify-between">
<button
onClick={showNewWsModal}
className="flex flex-grow w-[75%] h-[36px] 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"
>
<Plus className="h-4 w-4" />
<p className="text-slate-800 dark:text-slate-200 text-xs leading-loose font-semibold">
New workspace
</p>
</button>
</div>
<ActiveWorkspaces />
</div>
</div>
<div>
<div className="flex flex-col gap-y-2">
<div className="w-full flex items-center justify-between">
<LLMStatus />
<IndexCount />
</div>
<a
href={paths.hosting()}
target="_blank"
className="flex flex-grow w-[100%] h-[36px] gap-x-2 py-[5px] px-4 border border-slate-400 dark:border-transparent rounded-lg text-slate-800 dark:text-slate-200 justify-center items-center hover:bg-slate-100 dark:bg-stone-800 dark:hover:bg-stone-900"
>
<Cpu className="h-4 w-4" />
<p className="text-slate-800 dark:text-slate-200 text-xs leading-loose font-semibold">
Managed cloud hosting
</p>
</a>
<a
href={paths.hosting()}
target="_blank"
className="flex flex-grow w-[100%] h-[36px] gap-x-2 py-[5px] px-4 border border-slate-400 dark:border-transparent rounded-lg text-slate-800 dark:text-slate-200 justify-center items-center hover:bg-slate-100 dark:bg-stone-800 dark:hover:bg-stone-900"
>
<Briefcase className="h-4 w-4" />
<p className="text-slate-800 dark:text-slate-200 text-xs leading-loose font-semibold">
Enterprise Installation
</p>
</a>
</div>
{/* Footer */}
<div className="flex items-end justify-between mt-2">
<div className="flex gap-x-1 items-center">
<a
href={paths.github()}
className="transition-all duration-300 p-2 rounded-full bg-slate-200 text-slate-400 dark:bg-slate-800 hover:bg-slate-800 hover:text-slate-200 dark:hover:text-slate-200"
>
<GitHub className="h-4 w-4 " />
</a>
<a
href={paths.docs()}
className="transition-all duration-300 p-2 rounded-full bg-slate-200 text-slate-400 dark:bg-slate-800 hover:bg-slate-800 hover:text-slate-200 dark:hover:text-slate-200"
>
<BookOpen className="h-4 w-4 " />
</a>
</div>
<a
href={paths.mailToMintplex()}
className="transition-all duration-300 text-xs text-slate-200 dark:text-slate-600 hover:text-blue-600 dark:hover:text-blue-400"
>
@MintplexLabs
</a>
</div>
</div>
</div>
</div>
</div>
{showingKeyModal && <KeysModal hideModal={hideKeyModal} />}
{showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
</div>
</>
);
}

8
frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
View File

@ -21,9 +21,9 @@ function HistoricalMessage({
if (role === "user") {
return (
<div className="flex justify-end mb-4 items-start">
<div className="mr-2 py-1 px-4 max-w-[75%] bg-slate-200 dark:bg-amber-800 rounded-b-2xl rounded-tl-2xl rounded-tr-sm">
<div className="mr-2 py-1 px-4 w-fit md:max-w-[75%] bg-slate-200 dark:bg-amber-800 rounded-b-2xl rounded-tl-2xl rounded-tr-sm">
<span
className={`inline-block p-2 rounded-lg whitespace-pre-line text-slate-800 dark:text-slate-200 font-semibold`}
className={`inline-block p-2 rounded-lg whitespace-pre-line text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base`}
>
{message}
</span>
@ -52,9 +52,9 @@ function HistoricalMessage({
return (
<div ref={replyRef} className="flex justify-start items-end mb-4">
<Jazzicon size={30} user={{ uid: workspace.slug }} />
<div className="ml-2 py-3 px-4 max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-t-2xl rounded-br-2xl rounded-bl-sm">
<div className="ml-2 py-3 px-4 overflow-x-scroll w-fit md:max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-t-2xl rounded-br-2xl rounded-bl-sm">
<span
className="whitespace-pre-line text-slate-800 dark:text-slate-200 font-semibold flex flex-col gap-y-1"
className="whitespace-pre-line text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base flex flex-col gap-y-1"
dangerouslySetInnerHTML={{ __html: renderMarkdown(message) }}
/>
<Citations sources={sources} />

6
frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
View File

@ -25,7 +25,7 @@ function PromptReply({
return (
<div className="chat__message flex justify-start mb-4 items-end">
<Jazzicon size={30} user={{ uid: workspace.slug }} />
<div className="ml-2 pt-2 px-6 max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-t-2xl rounded-br-2xl rounded-bl-sm">
<div className="ml-2 pt-2 px-6 w-fit md:max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-t-2xl rounded-br-2xl rounded-bl-sm">
<span className={`inline-block p-2`}>
<div className="dot-falling"></div>
</span>
@ -58,9 +58,9 @@ function PromptReply({
className="mb-4 flex justify-start items-end"
>
<Jazzicon size={30} user={{ uid: workspace.slug }} />
<div className="ml-2 py-3 px-4 max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-t-2xl rounded-br-2xl rounded-bl-sm">
<div className="ml-2 py-3 px-4 overflow-x-scroll w-fit md:max-w-[75%] bg-orange-100 dark:bg-stone-700 rounded-t-2xl rounded-br-2xl rounded-bl-sm">
<span
className="whitespace-pre-line text-slate-800 dark:text-slate-200 font-semibold flex flex-col gap-y-1"
className="whitespace-pre-line text-slate-800 dark:text-slate-200 flex flex-col gap-y-1 font-[500] md:font-semibold text-sm md:text-base"
dangerouslySetInnerHTML={{ __html: renderMarkdown(reply) }}
/>
<Citations sources={sources} />

3
frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
View File

@ -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 (
<div
className="h-[89%] pb-[100px] pt-[50px] md:pt-0 md:pb-5 mx-2 md:mx-0 overflow-y-scroll flex flex-col justify-between md:justify-start"
className="h-[89%] pb-[100px] md:pt-[50px] md:pt-0 md:pb-5 mx-2 md:mx-0 overflow-y-scroll flex flex-col justify-start no-scroll"
id="chat-history"
>
{history.map(

12
frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
View File

@ -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 (
<div className="w-full fixed md:absolute bottom-0 left-0">
<div className="w-full fixed md:absolute bottom-0 left-0 z-10">
<form
onSubmit={handleSubmit}
className="flex flex-col gap-y-1 bg-transparentrounded-t-lg w-3/4 mx-auto"
className="flex flex-col gap-y-1 bg-white dark:bg-black-900 md:bg-transparent rounded-t-lg md:w-3/4 w-full mx-auto"
>
<div className="flex items-center py-2 px-4 rounded-lg">
{/* 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."
}
/>
<button
ref={formRef}

7
frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
View File

@ -3,6 +3,8 @@ import ChatHistory from "./ChatHistory";
import PromptInput from "./PromptInput";
import Workspace from "../../../models/workspace";
import handleChat from "../../../utils/chat";
import { isMobile } from "react-device-detect";
import { SidebarMobileHeader } from "../../Sidebar";
export default function ChatContainer({ workspace, knownHistory = [] }) {
const [message, setMessage] = useState("");
@ -68,9 +70,10 @@ export default function ChatContainer({ workspace, knownHistory = [] }) {
return (
<div
style={{ height: "calc(100% - 32px)" }}
className="transition-all duration-500 relative ml-[2px] mr-[8px] my-[16px] rounded-[26px] bg-white dark:bg-black-900 min-w-[82%] p-[18px] h-full overflow-y-scroll"
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-white dark:bg-black-900 w-full md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
>
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col h-full w-full flex">
<ChatHistory history={chatHistory} workspace={workspace} />
<PromptInput

21
frontend/src/components/WorkspaceChat/LoadingChat/index.jsx
View File

@ -1,11 +1,12 @@
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
export default function LoadingChat() {
return (
<div
style={{ height: "calc(100% - 32px)" }}
className="transition-all duration-500 relative ml-[2px] mr-[8px] my-[16px] rounded-[26px] bg-white dark:bg-black-900 min-w-[82%] p-[18px] h-full overflow-y-scroll"
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-white dark:bg-black-900 w-full md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
>
<Skeleton.default
height="100px"
@ -13,34 +14,34 @@ export default function LoadingChat() {
baseColor={"#2a3a53"}
highlightColor={"#395073"}
count={1}
className="max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
className="max-w-full md:max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
containerClassName="flex justify-start"
/>
<Skeleton.default
height="100px"
width="45%"
width={isMobile ? "70%" : "45%"}
baseColor={"#2a3a53"}
highlightColor={"#395073"}
count={1}
className="max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
className="max-w-full md:max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
containerClassName="flex justify-end"
/>
<Skeleton.default
height="100px"
width="30%"
width={isMobile ? "55%" : "30%"}
baseColor={"#2a3a53"}
highlightColor={"#395073"}
count={1}
className="max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
className="max-w-full md:max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
containerClassName="flex justify-start"
/>
<Skeleton.default
height="100px"
width="25%"
width={isMobile ? "88%" : "25%"}
baseColor={"#2a3a53"}
highlightColor={"#395073"}
count={1}
className="max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
className="max-w-full md:max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
containerClassName="flex justify-end"
/>
<Skeleton.default
@ -49,7 +50,7 @@ export default function LoadingChat() {
baseColor={"#2a3a53"}
highlightColor={"#395073"}
count={1}
className="max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
className="max-w-full md:max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
containerClassName="flex justify-start"
/>
</div>

3
frontend/src/components/WorkspaceChat/index.jsx
View File

@ -24,7 +24,7 @@ export default function WorkspaceChat({ loading, workspace }) {
}, [workspace, loading]);
if (loadingHistory) return <LoadingChat />;
if (!loading && !loadingHistory && !workspace)
if (!loading && !loadingHistory && !workspace) {
return (
<>
{loading === false && !workspace && (
@ -57,6 +57,7 @@ export default function WorkspaceChat({ loading, workspace }) {
<LoadingChat />
</>
);
}
return <ChatContainer workspace={workspace} knownHistory={history} />;
}

5
frontend/src/pages/Main/index.jsx
View File

@ -6,6 +6,7 @@ import ChatPlaceholder from "../../components/WorkspaceChat/LoadingChat";
import PasswordModal, {
usePasswordModal,
} from "../../components/Modals/Password";
import { isMobile } from "react-device-detect";
export default function Main() {
const { requiresAuth } = usePasswordModal();
@ -14,7 +15,7 @@ export default function Main() {
<>
{requiresAuth && <PasswordModal />}
<div className="w-screen h-screen overflow-hidden bg-orange-100 dark:bg-stone-700 flex">
<SidebarPlaceholder />
{!isMobile && <SidebarPlaceholder />}
<ChatPlaceholder />
</div>
</>
@ -23,7 +24,7 @@ export default function Main() {
return (
<div className="w-screen h-screen overflow-hidden bg-orange-100 dark:bg-stone-700 flex">
<Sidebar />
{!isMobile && <Sidebar />}
<DefaultChatContainer />
</div>
);

5
frontend/src/pages/WorkspaceChat/index.jsx
View File

@ -8,6 +8,7 @@ import ChatPlaceholder from "../../components/WorkspaceChat/LoadingChat";
import PasswordModal, {
usePasswordModal,
} from "../../components/Modals/Password";
import { isMobile } from "react-device-detect";
export default function WorkspaceChat() {
const { requiresAuth } = usePasswordModal();
@ -16,7 +17,7 @@ export default function WorkspaceChat() {
<>
{requiresAuth && <PasswordModal />}
<div className="w-screen h-screen overflow-hidden bg-orange-100 dark:bg-stone-700 flex">
<SidebarPlaceholder />
{!isMobile && <SidebarPlaceholder />}
<ChatPlaceholder />
</div>
</>
@ -43,7 +44,7 @@ function ShowWorkspaceChat() {
return (
<div className="w-screen h-screen overflow-hidden bg-orange-100 dark:bg-stone-700 flex">
<Sidebar />
{!isMobile && <Sidebar />}
<WorkspaceChatContainer loading={loading} workspace={workspace} />
</div>
);