Skip to content

Commit

Permalink
sidebar menu
Browse files Browse the repository at this point in the history
  • Loading branch information
alewin committed Apr 6, 2023
1 parent 1392541 commit fc6fa36
Show file tree
Hide file tree
Showing 5 changed files with 168 additions and 138 deletions.
2 changes: 1 addition & 1 deletion src/components/PromptBook.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function PromptBook() {

return (
<div
className={`absolute bottom-[3.75rem] min-h-[13rem] max-h-[30rem] overflow-y-auto duration-200 flex flex-col gap-1 p-2 w-80 bg-settingsPanel border border-chatbox rounded-lg drop-shadow-md ${
className={`absolute bottom-[3.75rem] min-h-[13rem] max-h-[30rem] overflow-y-auto duration-200 flex flex-col gap-1 p-2 w-80 bg-base-100 border border-chatbox rounded-lg drop-shadow-md ${
open
? "block right-[0.75rem] lg:right-[0.5rem]"
: "hidden opacity-0 right-[0.75rem]"
Expand Down
4 changes: 2 additions & 2 deletions src/components/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function Settings() {

return (
<div
className={`absolute bottom-[3.75rem] duration-200 flex flex-col gap-4 p-3 w-80 bg-base-300 border border-base-100 rounded-lg drop-shadow-md ${
className={`absolute bottom-[3.75rem] duration-200 flex flex-col gap-4 p-3 w-80 bg-base-100 border border-base-100 rounded-lg drop-shadow-md ${
open
? "block right-[0.75rem] lg:right-[0.5rem]"
: "hidden opacity-0 right-[0.75rem]"
Expand Down Expand Up @@ -189,7 +189,7 @@ export function Settings() {
<Check
strokeWidth={4}
size={20}
className="absolute p-0.5 pointer-events-none inset-0 mx-auto my-auto text-settingsPanel"
className="absolute p-0.5 pointer-events-none inset-0 mx-auto my-auto"
/>
)}
<input
Expand Down
66 changes: 66 additions & 0 deletions src/components/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { Dispatch, SetStateAction } from "react"

export const QuickStartMenu = {
key: 0,
name: "Quick Start",
state: "active",
desc: "One Click to start",
}
export const ChatViewMenu = {
key: 1,
name: "Chat",
state: "",
desc: "Chat with the sd",
}
export const ConfigMenu = {
key: 2,
name: "Configuration",
state: "",
desc: "A lot of configurations",
}
export const ModelsMenu = {
key: 3,
name: "Models",
state: "",
desc: "Model files",
}
export const PromptsMenu = {
key: 4,
name: "Prompts",
state: "",
desc: "Prompt collections",
}
interface SidebarProps {
setMenu: Dispatch<SetStateAction<number>>
}
export const Sidebar: React.FC<SidebarProps> = ({ setMenu }) => {
const MenusData = [QuickStartMenu, ChatViewMenu, ConfigMenu, ModelsMenu, PromptsMenu]
MenusData.forEach((menu, index) => {
menu.key = index
})

return (
<ul className="menu w-48 p-4 bg-base-200 text-base-content">
{MenusData.map((item) => (
<li
key={item.key}
onClick={() => {
MenusData.forEach((m) => (m.state = ""))
MenusData[item.key].state = "active"
setMenu(item.key)
}}
>
<a className={item.state}>{item.name}</a>
</li>
))}
<select className="select m-4" data-choose-theme>
<option value="">Default</option>
<option value="cyberpunk">cyberpunk</option>
<option value="cupcake">cupcake</option>
<option value="dark">dark</option>
<option value="bumblebee">bumblebee</option>
<option value="corporate">corporate</option>
</select>
</ul>
)
}
49 changes: 1 addition & 48 deletions src/containers/StartView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,18 @@ import { open } from "@/lib/dialog"
import { StoreType } from "@/lib/store"
interface StartViewProps {
store: StoreType
running: boolean
output: string
downloading: boolean
downloadingFile: string
downloadProgress: number
onSelectDirClick: () => void
onStartClick: () => void
onInitClick: () => void
}

export const StartView: React.FC<StartViewProps> = ({
store,
running,
output,
downloading,
downloadingFile,
downloadProgress,
onSelectDirClick,
onInitClick,
onStartClick,
}: StartViewProps) => {
const goToPythonDownload = () => {
void openLink("https://www.python.org/downloads/")
Expand Down Expand Up @@ -120,47 +112,8 @@ export const StartView: React.FC<StartViewProps> = ({
)}
</div>
</div>
<div className="container m-4 flex justify-center">
<div className="btn-group">
<button onClick={onSelectDirClick} className="btn btn-lg btn-outline">
{store.settings.work_folder || "Start by selecting a folder"}
</button>
{running ? (
<>
<button className="btn btn-lg btn-primary loading" disabled>
Running
</button>
<button className="btn btn-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</>
) : (
<>
<button onClick={onInitClick} className="btn btn-lg btn-secondary">
Init
</button>
<button onClick={onStartClick} className="btn btn-lg btn-primary">
Start
</button>
</>
)}
</div>
</div>

<div className="card w-full bg-base-100 shadow-xl">
<div className="card w-full bg-base-100 shadow-xl mt-2">
<div className="card-body">
<h2 className="card-title">Output:</h2>
{downloading && (
Expand Down
185 changes: 98 additions & 87 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,54 +7,28 @@ import Head from "next/head"
import { useEffect, useState } from "react"
import { themeChange } from "theme-change"

import {
ChatViewMenu,
ConfigMenu,
ModelsMenu,
PromptsMenu,
QuickStartMenu,
Sidebar,
} from "@/components/Sidebar"
import ChatView from "@/containers/ChatView"
import { ConfigView } from "@/containers/ConfigView"
import { StartView } from "@/containers/StartView"
import { useGlobalShortcut } from "@/hooks/tauri/shortcuts"
import { listen, openWebview, resolveResource } from "@/lib/api"
import { listen, openWebview } from "@/lib/api"
import { open } from "@/lib/dialog"
import useStore from "@/lib/store"

const regex = /(https?:\/\/[^ ]*)/
const QuickStartMenu = {
key: 0,
name: "Quick Start",
state: "active",
desc: "One Click to start",
}
const ChatViewMenu = {
key: 1,
name: "Chat",
state: "",
desc: "Chat with the sd",
}
const ConfigMenu = {
key: 2,
name: "Configuration",
state: "",
desc: "A lot of configurations",
}
const ModelsMenu = {
key: 3,
name: "Models",
state: "",
desc: "Model files",
}
const PromptsMenu = {
key: 4,
name: "Prompts",
state: "",
desc: "Prompt collections",
}

const Home: NextPage = () => {
const MenusData = [QuickStartMenu, ChatViewMenu, ConfigMenu, ModelsMenu, PromptsMenu]
MenusData.forEach((menu, index) => {
menu.key = index
})
const store = useStore()

const [menu, setMenu] = useState(QuickStartMenu.key)
const [menu, setMenu] = useState(0)

const [running, setRunning] = useState<boolean>(false)
const [shellOutput, setShellOutput] = useState<string>("")
Expand Down Expand Up @@ -177,62 +151,99 @@ const Home: NextPage = () => {
})

return (
<div className="flex min-h-screen flex-row bg-base-100">
<div className="min-h-screen drawer drawer-mobile">
<Head>
<title>SD Desk</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ul className="menu w-48 bg-base-200 p-4">
{MenusData.map((item) => (
<li
key={item.key}
onClick={() => {
MenusData.forEach((m) => (m.state = ""))
MenusData[item.key].state = "active"
setMenu(item.key)
}}
>
<a className={item.state}>{item.name}</a>
</li>
))}
<select className="select m-4" data-choose-theme>
<option value="">Default</option>
<option value="cyberpunk">cyberpunk</option>
<option value="cupcake">cupcake</option>
<option value="dark">dark</option>
<option value="bumblebee">bumblebee</option>
<option value="corporate">corporate</option>
</select>
</ul>

<main className="flex flex-1 flex-col p-4">
{menu === ConfigMenu.key && <ConfigView store={store} />}
{menu === QuickStartMenu.key && (
<StartView
running={running}
store={store}
output={shellOutput}
onSelectDirClick={onSelectDirClick}
onInitClick={onInitWebuiClick}
onStartClick={onStartWebuiClick}
downloading={downloading}
downloadingFile={downloadingFile}
downloadProgress={downloadProgress}
></StartView>
)}
{menu === ChatViewMenu.key && <ChatView />}
{menu === ModelsMenu.key && (
<button onClick={onSelectDirClick} className="btn btn-lg">
{store.settings.work_folder}
</button>
)}
{menu === PromptsMenu.key && (
<button onClick={onSelectDirClick} className="btn btn-lg">
{store.settings.work_folder}
</button>
)}
</main>
<input id="my-drawer" type="checkbox" className="drawer-toggle" />
<div className="drawer-content flex flex-col items-center justify-center">
<div className="w-full navbar bg-base-100">
<div className="flex-none lg:hidden">
<label htmlFor="my-drawer" className="btn btn-square btn-ghost">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
className="inline-block w-6 h-6 stroke-current"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</label>
</div>
<div className="flex-1 px-2 mx-2 btn-group">
<button onClick={onSelectDirClick} className="btn btn-lg btn-outline">
{store.settings.work_folder || "Start by selecting a folder"}
</button>
{running ? (
<>
<button className="btn btn-lg btn-primary loading" disabled>
Running
</button>
<button className="btn btn-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</>
) : (
<>
<button onClick={onInitWebuiClick} className="btn btn-lg btn-secondary">
Init
</button>
<button onClick={onStartWebuiClick} className="btn btn-lg btn-primary">
Start
</button>
</>
)}
</div>
</div>
<main className="flex flex-1 flex-col p-4 w-full">
{menu === ConfigMenu.key && <ConfigView store={store} />}
{menu === QuickStartMenu.key && (
<StartView
store={store}
output={shellOutput}
downloading={downloading}
downloadingFile={downloadingFile}
downloadProgress={downloadProgress}
></StartView>
)}
{menu === ChatViewMenu.key && <ChatView />}
{menu === ModelsMenu.key && (
<button onClick={onSelectDirClick} className="btn btn-lg">
{store.settings.work_folder}
</button>
)}
{menu === PromptsMenu.key && (
<button onClick={onSelectDirClick} className="btn btn-lg">
{store.settings.work_folder}
</button>
)}
</main>
</div>
<div className="drawer-side">
<label htmlFor="my-drawer" className="drawer-overlay"></label>
<Sidebar setMenu={setMenu}></Sidebar>
</div>

{errorInfo && (
<div className="toast toast-top toast-end">
<div className="alert alert-info">
Expand Down

0 comments on commit fc6fa36

Please sign in to comment.