θΏ™ζ˜―indexlocζδΎ›ηš„ζœεŠ‘οΌŒδΈθ¦θΎ“ε…₯任何密码
Skip to content

Add Korean translation + add more translation items #1863

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 15, 2024
Merged

Add Korean translation + add more translation items #1863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f086855
Add Korean translation
ux-builder Jul 12, 2024
3f43b85
Modal Password translation complement
ux-builder Jul 14, 2024
bc1c06a
Add a SettingsSidebar translation
ux-builder Jul 15, 2024
efe757f
DefaultChat translation complete
ux-builder Jul 15, 2024
f6f9f88
New Workspace translation complete
ux-builder Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 32 additions & 59 deletions frontend/src/components/DefaultChat/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import UserIcon from "../UserIcon";
import { userFromStorage } from "@/utils/request";
import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
import useUser from "@/hooks/useUser";
import { useTranslation, Trans } from "react-i18next";

export default function DefaultChatContainer() {
const [mockMsgs, setMockMessages] = useState([]);
Expand All @@ -28,6 +29,7 @@ export default function DefaultChatContainer() {
hideModal: hideNewWsModal,
} = useNewWorkspaceModal();
const popMsg = !window.localStorage.getItem("anythingllm_intro");
const { t } = useTranslation();

useEffect(() => {
const fetchData = async () => {
Expand All @@ -38,7 +40,7 @@ export default function DefaultChatContainer() {
}, []);

const MESSAGES = [
<React.Fragment>
<React.Fragment key="msg1">
<div
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR} md:mt-0 mt-[40px]`}
>
Expand All @@ -51,18 +53,14 @@ export default function DefaultChatContainer() {
<span
className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
>
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)
software so there is no subscription, fee, or charges for this
software outside of the services you want to use with it.
{t("welcomeMessage.part1")}
</span>
</div>
</div>
</div>
</React.Fragment>,

<React.Fragment>
<React.Fragment key="msg2">
<div
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
>
Expand All @@ -75,17 +73,14 @@ export default function DefaultChatContainer() {
<span
className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
>
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
productivity by 100x.
{t("welcomeMessage.part2")}
</span>
</div>
</div>
</div>
</React.Fragment>,

<React.Fragment>
<React.Fragment key="msg3">
<div
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
>
Expand All @@ -98,28 +93,24 @@ export default function DefaultChatContainer() {
<span
className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
>
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.
<br />
The AI tooling ecosystem gets more powerful everyday.
AnythingLLM makes it easy to use.
{t("welcomeMessage.part3")}
</span>
<a
href={paths.github()}
target="_blank"
rel="noreferrer"
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"
>
<GitMerge className="h-4 w-4" />
<p>Create an issue on Github</p>
<p>{t("welcomeMessage.githubIssue")}</p>
</a>
</div>
</div>
</div>
</div>
</React.Fragment>,

<React.Fragment>
<React.Fragment key="msg4">
<div
className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
>
Expand All @@ -135,14 +126,14 @@ export default function DefaultChatContainer() {
<span
className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
>
How do I get started?!
{t("welcomeMessage.user1")}
</span>
</div>
</div>
</div>
</React.Fragment>,

<React.Fragment>
<React.Fragment key="msg5">
<div
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
>
Expand All @@ -155,13 +146,7 @@ export default function DefaultChatContainer() {
<span
className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
>
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
something LLM's can understand and use in conversation.
<br />
<br />
You can add and remove files at anytime.
{t("welcomeMessage.part4")}
</span>

{(!user || user?.role !== "default") && (
Expand All @@ -170,7 +155,7 @@ export default function DefaultChatContainer() {
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"
>
<Plus className="h-4 w-4" />
<p>Create your first workspace</p>
<p>{t("welcomeMessage.createWorkspace")}</p>
</button>
)}
</div>
Expand All @@ -179,7 +164,7 @@ export default function DefaultChatContainer() {
</div>
</React.Fragment>,

<React.Fragment>
<React.Fragment key="msg6">
<div
className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
>
Expand All @@ -195,15 +180,14 @@ export default function DefaultChatContainer() {
<span
className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
>
Is this like an AI dropbox or something? What about chatting? It
is a chatbot isn't it?
{t("welcomeMessage.user2")}
</span>
</div>
</div>
</div>
</React.Fragment>,

<React.Fragment>
<React.Fragment key="msg7">
<div
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
>
Expand All @@ -216,32 +200,20 @@ export default function DefaultChatContainer() {
<span
className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
>
AnythingLLM is more than a smarter Dropbox.
<br />
<br />
AnythingLLM offers two ways of talking with your data:
<br />
<br />
<i>Query:</i> Your chats will return data or inferences found with
the documents in your workspace it has access to. Adding more
documents to the Workspace make it smarter!
<br />
<br />
<i>Conversational:</i> Your documents + your on-going chat history
both contribute to the LLM knowledge at the same time. Great for
appending real-time text-based info or corrections and
misunderstandings the LLM might have.
<br />
<br />
You can toggle between either mode{" "}
<i>in the middle of chatting!</i>
<Trans
i18nKey="welcomeMessage.part5"
components={{
i: <i />,
br: <br />,
}}
/>
</span>
</div>
</div>
</div>
</React.Fragment>,

<React.Fragment>
<React.Fragment key="msg8">
<div
className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
>
Expand All @@ -257,14 +229,14 @@ export default function DefaultChatContainer() {
<span
className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
>
Wow, this sounds amazing, let me try it out already!
{t("welcomeMessage.user3")}
</span>
</div>
</div>
</div>
</React.Fragment>,

<React.Fragment>
<React.Fragment key="msg9">
<div
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
>
Expand All @@ -277,24 +249,25 @@ export default function DefaultChatContainer() {
<span
className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
>
Have Fun!
{t("welcomeMessage.part6")}
</span>

<div className="flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-4">
<a
href={paths.github()}
target="_blank"
rel="noreferrer"
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"
>
<GithubLogo className="h-4 w-4" />
<p>Star on GitHub</p>
<p>{t("welcomeMessage.starOnGithub")}</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"
>
<EnvelopeSimple className="h-4 w-4" />
<p>Contact Mintplex Labs</p>
<p>{t("welcomeMessage.contact")}</p>
</a>
</div>
</div>
Expand Down
10 changes: 7 additions & 3 deletions frontend/src/components/Modals/NewWorkspace.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ 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";

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();
Expand All @@ -29,7 +31,9 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
<div className="relative w-[500px] max-h-full">
<div className="relative bg-modal-gradient rounded-lg shadow-md border-2 border-accent">
<div className="flex items-start justify-between p-4 border-b rounded-t border-white/10">
<h3 className="text-xl font-semibold text-white">New Workspace</h3>
<h3 className="text-xl font-semibold text-white">
{t("new-workspace.title")}
</h3>
<button
onClick={hideModal}
type="button"
Expand All @@ -46,14 +50,14 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
htmlFor="name"
className="block mb-2 text-sm font-medium text-white"
>
Workspace Name
{t("common.workspaces-name")}
</label>
<input
name="name"
type="text"
id="name"
className="bg-zinc-900 w-full text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="My Workspace"
placeholder={t("new-workspace.placeholder")}
required={true}
autoComplete="off"
/>
Expand Down
21 changes: 13 additions & 8 deletions frontend/src/components/Modals/Password/MultiUserAuth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ 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("");
Expand Down Expand Up @@ -36,21 +37,23 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
<div className="flex items-start justify-between pt-11 pb-9 w-screen md:w-full md:px-12 px-6 ">
<div className="flex flex-col gap-y-4 w-full">
<h3 className="text-4xl md:text-lg font-bold text-white text-center md:text-left">
Password Reset
{t("login.password-reset.title")}
</h3>
<p className="text-sm text-white/90 md:text-left md:max-w-[300px] px-4 md:px-0 text-center">
Provide the necessary information below to reset your password.
{t("login.password-reset.description")}
</p>
</div>
</div>
<div className="md:px-12 px-6 space-y-6 flex h-full w-full">
<div className="w-full flex flex-col gap-y-4">
<div className="flex flex-col gap-y-2">
<label className="text-white text-sm font-bold">Username</label>
<label className="text-white text-sm font-bold">
{t("login.multi-user.placeholder-username")}
</label>
<input
name="username"
type="text"
placeholder="Username"
placeholder={t("login.multi-user.placeholder-username")}
value={username}
onChange={(e) => setUsername(e.target.value)}
className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
Expand All @@ -59,14 +62,16 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
</div>
<div className="flex flex-col gap-y-2">
<label className="text-white text-sm font-bold">
Recovery Codes
{t("login.password-reset.recovery-codes")}
</label>
{recoveryCodeInputs.map((code, index) => (
<div key={index}>
<input
type="text"
name={`recoveryCode${index + 1}`}
placeholder={`Recovery Code ${index + 1}`}
placeholder={t("login.password-reset.recovery-code", {
index: index + 1,
})}
value={code}
onChange={(e) =>
handleRecoveryCodeChange(index, e.target.value)
Expand All @@ -84,14 +89,14 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
type="submit"
className="md:text-primary-button md:bg-transparent md:w-[300px] text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-primary-button md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
>
Reset Password
{t("login.password-reset.title")}
</button>
<button
type="button"
className="text-white text-sm flex gap-x-1 hover:text-primary-button hover:underline -mb-8"
onClick={() => setShowRecoveryForm(false)}
>
Back to Login
{t("login.password-reset.back-to-login")}
</button>
</div>
</form>
Expand Down
Loading