[Chore] replace all React-feather icons with phosphor icons fully ()

replace all React-feather icons with phosphor icons fully
remove package-lock.json files - yarn only
This commit is contained in:
Timothy Carambat 2023-11-09 08:55:20 -08:00 committed by GitHub
parent 458ffed0c7
commit 1ec774ab2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 48 additions and 15806 deletions
frontend
package-lock.jsonpackage.json
src
components
DefaultChat
EditingChatBubble
Modals
MangeWorkspace
Documents/UploadFile/FileUploadProgress
index.jsx
NewWorkspace.jsx
Sidebar
WorkspaceChat/ChatContainer
ChatHistory
Citation
HistoricalMessage
PromptReply
PromptInput
pages
Admin
Invitations
NewInviteModal
index.jsx
Users
NewUserModal
UserRow/EditUserModal
index.jsx
Workspaces
NewWorkspaceModal
WorkspaceRow/EditWorkspaceUsersModal
index.jsx
GeneralSettings/ApiKeys
NewApiKeyModal
index.jsx
OnboardingFlow/OnboardingModal
yarn.lock
server

File diff suppressed because it is too large Load diff

View file

@ -22,7 +22,6 @@
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-feather": "^2.0.10",
"react-loading-icons": "^1.1.0",
"react-loading-skeleton": "^3.1.0",
"react-router-dom": "^6.3.0",
@ -46,4 +45,4 @@
"tailwindcss": "^3.3.1",
"vite": "^4.3.0"
}
}
}

View file

@ -1,5 +1,11 @@
import React, { useEffect, useState } from "react";
import { GitHub, GitMerge, Mail, Plus } from "react-feather";
import {
GithubLogo,
GitMerge,
EnvelopeSimple,
Plus,
} from "@phosphor-icons/react";
import NewWorkspaceModal, {
useNewWorkspaceModal,
} from "../Modals/NewWorkspace";
@ -283,14 +289,14 @@ export default function DefaultChatContainer() {
target="_blank"
className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
>
<GitHub className="h-4 w-4" />
<GithubLogo className="h-4 w-4" />
<p>Star on GitHub</p>
</a>
<a
href={paths.mailToMintplex()}
className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
>
<Mail className="h-4 w-4" />
<EnvelopeSimple className="h-4 w-4" />
<p>Contact Mintplex Labs</p>
</a>
</div>

View file

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { X } from "react-feather";
import { X } from "@phosphor-icons/react";
export default function EditingChatBubble({
message,

View file

@ -1,6 +1,6 @@
import React, { useState, useEffect, memo } from "react";
import truncate from "truncate";
import { CheckCircle, XCircle } from "react-feather";
import { CheckCircle, XCircle } from "@phosphor-icons/react";
import Workspace from "../../../../../../models/workspace";
import { humanFileSize, milliToHms } from "../../../../../../utils/numbers";
import PreLoader from "../../../../../Preloader";

View file

@ -1,5 +1,5 @@
import React, { useState, useEffect, lazy, Suspense, memo } from "react";
import { X } from "react-feather";
import { X } from "@phosphor-icons/react";
import { useParams } from "react-router-dom";
import Workspace from "../../../models/workspace";
import System from "../../../models/system";

View file

@ -1,5 +1,5 @@
import React, { useRef, useState } from "react";
import { X } from "react-feather";
import { X } from "@phosphor-icons/react";
import Workspace from "../../models/workspace";
const noop = () => false;

View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { AlertCircle, Circle } from "react-feather";
import { WarningCircle, Circle } from "@phosphor-icons/react";
import System from "../../models/system";
export default function LLMStatus() {
@ -31,7 +31,7 @@ export default function LLMStatus() {
<p className="text-slate-400 leading-loose text-sm">LLM</p>
<div className="flex items-center gap-x-1 border border-red-400 px-2 bg-red-200 rounded-full">
<p className="text-red-700 leading-tight text-sm">offline</p>
<AlertCircle className="h-3 w-3 stroke-red-100 fill-red-400" />
<WarningCircle className="h-3 w-3 stroke-red-100 fill-red-400" />
</div>
</div>
);

View file

@ -1,134 +0,0 @@
import React, { useRef } from "react";
import {
BookOpen,
Briefcase,
Cpu,
GitHub,
Key,
Plus,
AlertCircle,
} from "react-feather";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import paths from "../../../utils/paths";
export default function Sidebar() {
const sidebarRef = useRef(null);
// const handleWidthToggle = () => {
// if (!sidebarRef.current) return false;
// sidebarRef.current.classList.add('translate-x-[-100%]')
// }
return (
<>
<div
ref={sidebarRef}
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">
<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 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-[100%] flex flex-col w-full justify-between pt-4 overflow-y-hidden">
<div className="h-auto sidebar-items dark:sidebar-items">
<div className="flex flex-col gap-y-4 h-[65vh] pb-8 overflow-y-scroll no-scroll">
<div className="flex gap-x-2 items-center justify-between">
<button 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>
<Skeleton.default
height={36}
width="100%"
count={3}
baseColor="#292524"
highlightColor="#4c4948"
enableAnimation={true}
/>
</div>
</div>
<div>
<div className="flex flex-col gap-y-2">
<div className="w-full flex items-center justify-start">
<div className="flex w-fit items-center justify-end gap-x-2">
<p className="text-slate-400 leading-loose text-sm">LLM</p>
<div className="flex items-center gap-x-1 border border-red-400 px-2 bg-red-200 rounded-full">
<p className="text-red-700 leading-tight text-sm">
offline
</p>
<AlertCircle className="h-3 w-3 stroke-red-100 fill-red-400" />
</div>
</div>
</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>
</>
);
}

View file

@ -1,27 +1,19 @@
import React, { useEffect, useRef, useState } from "react";
import { LogOut, Menu, Package, Plus, Shield } from "react-feather";
import {
Wrench,
GithubLogo,
BookOpen,
DiscordLogo,
DotsThree,
Plus,
List,
} from "@phosphor-icons/react";
// import IndexCount from "./IndexCount";
// import LLMStatus from "./LLMStatus";
import NewWorkspaceModal, {
useNewWorkspaceModal,
} from "../Modals/NewWorkspace";
import ActiveWorkspaces from "./ActiveWorkspaces";
import paths from "../../utils/paths";
import useUser from "../../hooks/useUser";
import { userFromStorage } from "../../utils/request";
import {
AUTH_TIMESTAMP,
AUTH_TOKEN,
AUTH_USER,
USER_BACKGROUND_COLOR,
} from "../../utils/constants";
import { USER_BACKGROUND_COLOR } from "../../utils/constants";
import useLogo from "../../hooks/useLogo";
export default function Sidebar() {
@ -164,7 +156,7 @@ export function SidebarMobileHeader() {
onClick={() => setShowSidebar(true)}
className="rounded-md p-2 flex items-center justify-center text-slate-200"
>
<Menu className="h-6 w-6" />
<List className="h-6 w-6" />
</button>
<div className="flex items-center justify-center flex-grow">
<img
@ -271,42 +263,6 @@ export function SidebarMobileHeader() {
);
}
function AdminHome() {
const { user } = useUser();
if (!user || user?.role !== "admin") return null;
return (
<a
href={paths.admin.system()}
className="transition-all duration-300 p-2 rounded-full text-slate-400 bg-stone-800 hover:bg-slate-800 hover:text-slate-200"
>
<Shield className="h-4 w-4" />
</a>
);
}
function LogoutButton() {
if (!window.localStorage.getItem(AUTH_USER)) return null;
const user = userFromStorage();
if (!user.username) return null;
return (
<button
onClick={() => {
window.localStorage.removeItem(AUTH_USER);
window.localStorage.removeItem(AUTH_TOKEN);
window.localStorage.removeItem(AUTH_TIMESTAMP);
window.location.replace(paths.home());
}}
className="flex flex-grow w-[100%] h-[36px] gap-x-2 py-[5px] px-4 border border-transparent rounded-lg text-slate-200 justify-center items-center bg-stone-800 hover:bg-stone-900"
>
<LogOut className="h-4 w-4" />
<p className="text-slate-200 text-xs leading-loose font-semibold">
Log out of {user.username}
</p>
</button>
);
}
function SettingsButton() {
return (
<a
@ -317,19 +273,3 @@ function SettingsButton() {
</a>
);
}
function ManagedHosting() {
if (window.location.origin.includes(".useanything.com")) return null;
return (
<a
href={paths.hosting()}
target="_blank"
className="flex flex-grow w-[100%] h-[36px] gap-x-2 py-[5px] px-4 border border-transparent rounded-lg text-slate-200 justify-center items-center bg-stone-800 hover:bg-stone-900"
>
<Package className="h-4 w-4" />
<p className="text-slate-200 text-xs leading-loose font-semibold">
Managed cloud hosting
</p>
</a>
);
}

View file

@ -1,5 +1,5 @@
import { memo, useState, useEffect, useRef } from "react";
import { X } from "react-feather";
import { X } from "@phosphor-icons/react";
import { v4 } from "uuid";
import { decode as HTMLDecode } from "he";
import { CaretRight, FileText } from "@phosphor-icons/react";

View file

@ -1,5 +1,5 @@
import { memo, forwardRef } from "react";
import { AlertTriangle } from "react-feather";
import { Warning } from "@phosphor-icons/react";
import Jazzicon from "../../../../UserIcon";
import renderMarkdown from "../../../../../utils/chat/markdown";
import { userFromStorage } from "../../../../../utils/request";
@ -42,8 +42,8 @@ const HistoricalMessage = forwardRef(
<span
className={`inline-block p-2 rounded-lg bg-red-50 text-red-500`}
>
<AlertTriangle className="h-4 w-4 mb-1 inline-block" /> Could
not respond to message.
<Warning className="h-4 w-4 mb-1 inline-block" /> Could not
respond to message.
</span>
) : (
<span

View file

@ -1,5 +1,5 @@
import { forwardRef, memo } from "react";
import { AlertTriangle } from "react-feather";
import { Warning } from "@phosphor-icons/react";
import Jazzicon from "../../../../UserIcon";
import renderMarkdown from "../../../../../utils/chat/markdown";
import Citations from "../Citation";
@ -48,8 +48,8 @@ const PromptReply = forwardRef(
<span
className={`inline-block p-2 rounded-lg bg-red-50 text-red-500`}
>
<AlertTriangle className="h-4 w-4 mb-1 inline-block" /> Could
not respond to message.
<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>

View file

@ -1,7 +1,12 @@
import { Chats, Gear, PaperPlaneRight, Quotes } from "@phosphor-icons/react";
import {
Chats,
CircleNotch,
Gear,
PaperPlaneRight,
Quotes,
} from "@phosphor-icons/react";
import React, { useState, useRef } from "react";
import { isMobile } from "react-device-detect";
import { Loader } from "react-feather";
import ManageWorkspace, {
useManageWorkspaceModal,
} from "../../../Modals/MangeWorkspace";
@ -72,7 +77,7 @@ export default function PromptInput({
className="inline-flex justify-center rounded-2xl cursor-pointer text-white/60 hover:text-white group ml-4"
>
{buttonDisabled ? (
<Loader className="w-6 h-6 animate-spin" />
<CircleNotch className="w-6 h-6 animate-spin" />
) : (
<PaperPlaneRight className="w-7 h-7 my-3" weight="fill" />
)}

View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { X } from "react-feather";
import { X } from "@phosphor-icons/react";
import Admin from "../../../../models/admin";
const DIALOG_ID = `new-invite-modal`;

View file

@ -5,7 +5,7 @@ import Sidebar, {
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { Mail } from "react-feather";
import { EnvelopeSimple } from "@phosphor-icons/react";
import usePrefersDarkMode from "../../../hooks/usePrefersDarkMode";
import Admin from "../../../models/admin";
import InviteRow from "./InviteRow";
@ -30,7 +30,7 @@ export default function AdminInvites() {
}
className="border border-slate-200 px-4 py-1 rounded-lg text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
>
<Mail className="h-4 w-4" /> Create Invite Link
<EnvelopeSimple className="h-4 w-4" /> Create Invite Link
</button>
</div>
<p className="text-sm font-base text-white text-opacity-60">

View file

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { X } from "react-feather";
import { X } from "@phosphor-icons/react";
import Admin from "../../../../models/admin";
const DIALOG_ID = `new-user-modal`;

View file

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { X } from "react-feather";
import { X } from "@phosphor-icons/react";
import Admin from "../../../../../models/admin";
export const EditUserModalId = (user) => `edit-user-${user.id}-modal`;

View file

@ -5,7 +5,7 @@ import Sidebar, {
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { UserPlus } from "react-feather";
import { UserPlus } from "@phosphor-icons/react";
import Admin from "../../../models/admin";
import UserRow from "./UserRow";
import useUser from "../../../hooks/useUser";

View file

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { X } from "react-feather";
import { X } from "@phosphor-icons/react";
import Admin from "../../../../models/admin";
const DIALOG_ID = `new-workspace-modal`;

View file

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { X } from "react-feather";
import { X } from "@phosphor-icons/react";
import Admin from "../../../../../models/admin";
import { titleCase } from "text-case";

View file

@ -5,7 +5,7 @@ import Sidebar, {
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { BookOpen } from "react-feather";
import { BookOpen } from "@phosphor-icons/react";
import usePrefersDarkMode from "../../../hooks/usePrefersDarkMode";
import Admin from "../../../models/admin";
import WorkspaceRow from "./WorkspaceRow";

View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { X } from "react-feather";
import { X } from "@phosphor-icons/react";
import Admin from "../../../../models/admin";
import paths from "../../../../utils/paths";
import { userFromStorage } from "../../../../utils/request";

View file

@ -5,7 +5,7 @@ import Sidebar, {
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { PlusCircle } from "react-feather";
import { PlusCircle } from "@phosphor-icons/react";
import Admin from "../../../models/admin";
import ApiKeyRow from "./ApiKeyRow";
import NewApiKeyModal, { NewApiKeyModalId } from "./NewApiKeyModal";

View file

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { X } from "react-feather";
import { X } from "@phosphor-icons/react";
import LLMSelection from "./Steps/LLMSelection";
import VectorDatabaseConnection from "./Steps/VectorDatabaseConnection";
import AppearanceSetup from "./Steps/AppearanceSetup";

View file

@ -1973,7 +1973,7 @@ prettier@^2.4.1:
resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz"
integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -2016,13 +2016,6 @@ react-dropzone@^14.2.3:
file-selector "^0.6.0"
prop-types "^15.8.1"
react-feather@^2.0.10:
version "2.0.10"
resolved "https://registry.npmjs.org/react-feather/-/react-feather-2.0.10.tgz"
integrity sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ==
dependencies:
prop-types "^15.7.2"
react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"

7905
server/package-lock.json generated

File diff suppressed because it is too large Load diff