forked from janhq/jan
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: replacing mobx with jotai (janhq#160)
* refactor: replacing mobx with jotai Signed-off-by: James <[email protected]> Co-authored-by: James <[email protected]> Co-authored-by: Louis <[email protected]>
- Loading branch information
3 people
authored
Sep 14, 2023
1 parent
cc39664
commit d55a838
Showing
115 changed files
with
3,755 additions
and
7,722 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,29 @@ | ||
| "use client"; | ||
| import { useCallback } from "react"; | ||
| import Image from "next/image"; | ||
| import { useStore } from "@/_models/RootStore"; | ||
| import { observer } from "mobx-react-lite"; | ||
| import { MenuAdvancedPrompt } from "../MenuAdvancedPrompt"; | ||
| import { useForm } from "react-hook-form"; | ||
| import { useMutation } from "@apollo/client"; | ||
| import { CreateMessageDocument, CreateMessageMutation } from "@/graphql"; | ||
|
|
||
| export const AdvancedPrompt: React.FC = observer(() => { | ||
| const { register, handleSubmit } = useForm(); | ||
| const { historyStore } = useStore(); | ||
|
|
||
| const onAdvancedPrompt = useCallback(() => { | ||
| historyStore.toggleAdvancedPrompt(); | ||
| }, []); | ||
|
|
||
| const [createMessageMutation] = useMutation<CreateMessageMutation>( | ||
| CreateMessageDocument | ||
| ); | ||
| const onSubmit = (data: any) => { | ||
| historyStore.sendControlNetPrompt( | ||
| createMessageMutation, | ||
| data.prompt, | ||
| data.negativePrompt, | ||
| data.fileInput[0] | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <form | ||
| className={`${ | ||
| historyStore.showAdvancedPrompt ? "w-[288px]" : "hidden" | ||
| } h-screen flex flex-col border-r border-gray-200`} | ||
| onSubmit={handleSubmit(onSubmit)} | ||
| > | ||
| <button | ||
| onClick={onAdvancedPrompt} | ||
| className="flex items-center mx-2 mt-3 mb-[10px] flex-none gap-1 text-xs leading-[18px] text-[#6B7280]" | ||
| > | ||
| <Image src={"/icons/chevron-left.svg"} width={20} height={20} alt="" /> | ||
| <span className="font-semibold text-gray-500 text-xs"> | ||
| BASIC PROMPT | ||
| </span> | ||
| </button> | ||
| <div className="flex flex-col justify-start flex-1 p-3 gap-[10px] overflow-x-hidden scroll"> | ||
| <MenuAdvancedPrompt register={register} /> | ||
| </div> | ||
| <div className="py-3 px-2 flex flex-none gap-3 items-center justify-between border-t border-gray-200"> | ||
| <button className="w-1/2 flex items-center text-gray-900 py-2 px-3 rounded-lg gap-1 justify-center bg-gray-100 text-sm leading-5"> | ||
| <Image | ||
| src={"/icons/unicorn_arrow-random.svg"} | ||
| width={16} | ||
| height={16} | ||
| alt="" | ||
| /> | ||
| Random | ||
| </button> | ||
| <button | ||
| className="w-1/2 flex items-center text-gray-900 justify-center py-2 px-3 rounded-lg gap-1 bg-yellow-300 text-sm leading-5" | ||
| onClick={(e) => handleSubmit(onSubmit)(e)} | ||
| > | ||
| Generate | ||
| </button> | ||
| </div> | ||
| </form> | ||
| ); | ||
| }); | ||
| import { MenuAdvancedPrompt } from "../MenuAdvancedPrompt"; | ||
| import { useForm } from "react-hook-form"; | ||
| import BasicPromptButton from "../BasicPromptButton"; | ||
| import PrimaryButton from "../PrimaryButton"; | ||
|
|
||
| const AdvancedPrompt: React.FC = () => { | ||
| const { register, handleSubmit } = useForm(); | ||
|
|
||
| const onSubmit = (data: any) => {}; | ||
|
|
||
| return ( | ||
| <form | ||
| className="w-[288px] h-screen flex flex-col border-r border-gray-200" | ||
| onSubmit={handleSubmit(onSubmit)} | ||
| > | ||
| <BasicPromptButton /> | ||
| <MenuAdvancedPrompt register={register} /> | ||
| <div className="py-3 px-2 flex flex-none gap-3 items-center justify-between border-t border-gray-200"> | ||
| <PrimaryButton | ||
| fullWidth={true} | ||
| title="Generate" | ||
| onClick={() => handleSubmit(onSubmit)} | ||
| /> | ||
| </div> | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| export default AdvancedPrompt; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,27 @@ | ||
| import { FieldValues, UseFormRegister } from "react-hook-form"; | ||
|
|
||
| type Props = { | ||
| formId?: string; | ||
| height: number; | ||
| title: string; | ||
| placeholder: string; | ||
| register: UseFormRegister<FieldValues>; | ||
| }; | ||
|
|
||
| export const AdvancedTextArea: React.FC<Props> = ({ | ||
| formId = "", | ||
| height, | ||
| placeholder, | ||
| title, | ||
| register, | ||
| }) => ( | ||
| <div className="w-full flex flex-col pt-3 gap-1"> | ||
| <label className="text-sm leading-5 text-gray-800">{title}</label> | ||
| <textarea | ||
| style={{ height: `${height}px` }} | ||
| className="rounded-lg py-[13px] px-5 border outline-none resize-none border-gray-300 bg-gray-50 placeholder:gray-400 text-sm font-normal" | ||
| placeholder={placeholder} | ||
| {...register(formId, { required: formId === "prompt" ? true : false })} | ||
| /> | ||
| </div> | ||
| ); | ||
| import { FieldValues, UseFormRegister } from "react-hook-form"; | ||
|
|
||
| type Props = { | ||
| formId?: string; | ||
| height: number; | ||
| title: string; | ||
| placeholder: string; | ||
| register: UseFormRegister<FieldValues>; | ||
| }; | ||
|
|
||
| export const AdvancedTextArea: React.FC<Props> = ({ | ||
| formId = "", | ||
| height, | ||
| placeholder, | ||
| title, | ||
| register, | ||
| }) => ( | ||
| <div className="w-full flex flex-col pt-3 gap-1"> | ||
| <label className="text-sm leading-5 text-gray-800">{title}</label> | ||
| <textarea | ||
| style={{ height: `${height}px` }} | ||
| className="rounded-lg py-[13px] px-5 border outline-none resize-none border-gray-300 bg-gray-50 placeholder:gray-400 text-sm font-normal" | ||
| placeholder={placeholder} | ||
| {...register(formId, { required: formId === "prompt" ? true : false })} | ||
| /> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,79 @@ | ||
| import Image from "next/image"; | ||
| import { useState } from "react"; | ||
| import { Light as SyntaxHighlighter } from "react-syntax-highlighter"; | ||
| import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript"; | ||
| import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"; | ||
| import useGetModelApiInfo from "@/_hooks/useGetModelApiInfo"; | ||
|
|
||
| SyntaxHighlighter.registerLanguage("javascript", js); | ||
|
|
||
| const ApiPane: React.FC = () => { | ||
| const [expend, setExpend] = useState(true); | ||
| const { data } = useGetModelApiInfo(); | ||
| const [highlightCode, setHighlightCode] = useState(data[0]); | ||
|
|
||
| return ( | ||
| <div className="h-full flex flex-col relative"> | ||
| <div className="absolute top-0 left-0 h-full w-full overflow-x-hidden scroll"> | ||
| <button | ||
| onClick={() => setExpend(!expend)} | ||
| className="flex items-center flex-none" | ||
| > | ||
| <Image | ||
| src={"/icons/unicorn_angle-down.svg"} | ||
| width={24} | ||
| height={24} | ||
| alt="" | ||
| /> | ||
| <span>Request</span> | ||
| </button> | ||
| <div | ||
| className={`${ | ||
| expend ? "block" : "hidden" | ||
| } bg-[#1F2A37] rounded-lg w-full flex-1`} | ||
| > | ||
| <div className="p-2 flex justify-between flex-1"> | ||
| <div className="flex"> | ||
| {data.map((item, index) => ( | ||
| <button | ||
| className={`py-1 text-xs text-[#9CA3AF] px-2 flex gap-[10px] rounded ${ | ||
| highlightCode?.type === item.type | ||
| ? "bg-[#374151] text-white" | ||
| : "" | ||
| }`} | ||
| key={index} | ||
| onClick={() => setHighlightCode(item)} | ||
| > | ||
| {item.type} | ||
| </button> | ||
| ))} | ||
| </div> | ||
| <button | ||
| onClick={() => | ||
| navigator.clipboard.writeText(highlightCode?.stringCode) | ||
| } | ||
| > | ||
| <Image | ||
| src={"/icons/unicorn_clipboard-alt.svg"} | ||
| width={24} | ||
| height={24} | ||
| alt="" | ||
| /> | ||
| </button> | ||
| </div> | ||
| <SyntaxHighlighter | ||
| className="w-full bg-transparent overflow-x-hidden scroll resize-none" | ||
| language="jsx" | ||
| style={atomOneDark} | ||
| customStyle={{ padding: "12px", background: "transparent" }} | ||
| wrapLongLines={true} | ||
| > | ||
| {highlightCode?.stringCode} | ||
| </SyntaxHighlighter> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| import Image from "next/image"; | ||
| import { useState } from "react"; | ||
| import { Light as SyntaxHighlighter } from "react-syntax-highlighter"; | ||
| import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript"; | ||
| import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"; | ||
| import useGetModelApiInfo from "@/_hooks/useGetModelApiInfo"; | ||
|
|
||
| SyntaxHighlighter.registerLanguage("javascript", js); | ||
|
|
||
| const ApiPane: React.FC = () => { | ||
| const [expend, setExpend] = useState(true); | ||
| const { data } = useGetModelApiInfo(); | ||
| const [highlightCode, setHighlightCode] = useState(data[0]); | ||
|
|
||
| return ( | ||
| <div className="h-full flex flex-col relative"> | ||
| <div className="absolute top-0 left-0 h-full w-full overflow-x-hidden scroll"> | ||
| <button | ||
| onClick={() => setExpend(!expend)} | ||
| className="flex items-center flex-none" | ||
| > | ||
| <Image | ||
| src={"/icons/unicorn_angle-down.svg"} | ||
| width={24} | ||
| height={24} | ||
| alt="" | ||
| /> | ||
| <span>Request</span> | ||
| </button> | ||
| <div | ||
| className={`${ | ||
| expend ? "block" : "hidden" | ||
| } bg-[#1F2A37] rounded-lg w-full flex-1`} | ||
| > | ||
| <div className="p-2 flex justify-between flex-1"> | ||
| <div className="flex"> | ||
| {data.map((item, index) => ( | ||
| <button | ||
| className={`py-1 text-xs text-[#9CA3AF] px-2 flex gap-[10px] rounded ${ | ||
| highlightCode?.type === item.type | ||
| ? "bg-[#374151] text-white" | ||
| : "" | ||
| }`} | ||
| key={index} | ||
| onClick={() => setHighlightCode(item)} | ||
| > | ||
| {item.type} | ||
| </button> | ||
| ))} | ||
| </div> | ||
| <button | ||
| onClick={() => | ||
| navigator.clipboard.writeText(highlightCode?.stringCode) | ||
| } | ||
| > | ||
| <Image | ||
| src={"/icons/unicorn_clipboard-alt.svg"} | ||
| width={24} | ||
| height={24} | ||
| alt="" | ||
| /> | ||
| </button> | ||
| </div> | ||
| <SyntaxHighlighter | ||
| className="w-full bg-transparent overflow-x-hidden scroll resize-none" | ||
| language="jsx" | ||
| style={atomOneDark} | ||
| customStyle={{ padding: "12px", background: "transparent" }} | ||
| wrapLongLines={true} | ||
| > | ||
| {highlightCode?.stringCode} | ||
| </SyntaxHighlighter> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ApiPane; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,15 @@ | ||
| type Props = { | ||
| title: string; | ||
| description: string; | ||
| }; | ||
|
|
||
| export const ApiStep: React.FC<Props> = ({ description, title }) => { | ||
| return ( | ||
| <div className="gap-2 flex flex-col"> | ||
| <span className="text-[#8A8A8A]">{title}</span> | ||
| <div className="flex flex-col gap-[10px] p-[18px] bg-[#F9F9F9] overflow-y-hidden"> | ||
| <pre className="text-sm leading-5 text-black">{description}</pre> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| type Props = { | ||
| title: string; | ||
| description: string; | ||
| }; | ||
|
|
||
| export const ApiStep: React.FC<Props> = ({ description, title }) => { | ||
| return ( | ||
| <div className="gap-2 flex flex-col"> | ||
| <span className="text-[#8A8A8A]">{title}</span> | ||
| <div className="flex flex-col gap-[10px] p-[18px] bg-[#F9F9F9] overflow-y-hidden"> | ||
| <pre className="text-sm leading-5 text-black">{description}</pre> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.