48 |
98 |
99 | );
100 |
101 | export default CharacterSettings;
102 |
--------------------------------------------------------------------------------
/src/pages/Chat/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Show } from "solid-js";
2 | import { MessageCircle } from "lucide-solid";
3 |
4 | /** The header shown at the beginning of a conversation. */
5 | const Header: Component<{ participants: string[] }> = (props) => (
6 | <>
7 |
77 |
83 |
85 |
86 |
87 |
91 |
92 |
96 |
97 |
8 |
15 |
23 |
24 |
25 |
26 | );
27 |
28 | export default Header;
29 |
--------------------------------------------------------------------------------
/src/pages/Chat/components/InputBar.tsx:
--------------------------------------------------------------------------------
1 | import { Sliders, Send } from "lucide-solid";
2 | import { Component, JSX } from "solid-js";
3 |
4 | /** Meant to be used exclusively within the InputBar. */
5 | const IconButton: Component<{ children: JSX.Element }> = (props) => (
6 |
12 | );
13 |
14 | /** Bar containing the message text input and some attached buttons. */
15 | const InputBar: Component = () => (
16 |
9 |
11 | 12 | {props.participants.join(", ")} 13 |
14 |
15 | This is the beginning of the group conversation.}
18 | >
19 | This is the beginning of your conversation with{" "}
20 | {props.participants[0]}.
21 |
22 |
23 |
24 |
17 |
22 |
23 |
25 |
26 |
28 |
29 |
30 | );
31 |
32 | export default InputBar;
33 |
--------------------------------------------------------------------------------
/src/pages/Chat/components/Message.css:
--------------------------------------------------------------------------------
1 | /** Makes italics a little darker within messages. */
2 | .message-text em {
3 | opacity: 0.5;
4 | }
5 |
--------------------------------------------------------------------------------
/src/pages/Chat/components/Message.tsx:
--------------------------------------------------------------------------------
1 | import { ThumbsDown, ThumbsUp } from "lucide-solid";
2 | import showdown from "showdown";
3 | import { Component, Show } from "solid-js";
4 |
5 | import MessageProps from "../../../models/Message";
6 |
7 | import "./Message.css";
8 |
9 | const showdownConverter = new showdown.Converter();
10 |
11 | /** An individual message. */
12 | const Message: Component
20 |
21 | {props.speaker.name}
22 |
23 | {new Intl.DateTimeFormat("en-US", {
24 | dateStyle: "short",
25 | timeStyle: "short",
26 | }).format(props.timestamp)}
27 |
28 |
29 |
36 |
37 |
42 |
43 |
44 | );
45 |
46 | export default Message;
47 |
--------------------------------------------------------------------------------
/src/pages/Chat/index.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PygmalionAI/galatea-ui/c17ea4ff09ed8eebaa1cd0689cc241754313880d/src/pages/Chat/index.css
--------------------------------------------------------------------------------
/src/pages/Chat/index.tsx:
--------------------------------------------------------------------------------
1 | import { Component, For } from "solid-js";
2 |
3 | import RequiresAuth from "../../shared/RequiresAuth";
4 | import Header from "./components/Header";
5 | import InputBar from "./components/InputBar";
6 | import Message from "./components/Message";
7 | import { mockMessages } from "./mocks";
8 |
9 | import "./index.css";
10 |
11 | const ChatPage: Component = () => (
12 |
38 |
41 |
20 |
28 |
22 |
27 |
23 | {(message) =>
24 |
25 | Generation Settings Settings
10 |11 | Some settings might not show up depending on which inference backend is 12 | being used. 13 |
14 | 15 | 16 |
17 |
86 |
87 | );
88 |
89 | export default GenerationSettings;
90 |
--------------------------------------------------------------------------------
/src/pages/Home/components/CreateNewCard.tsx:
--------------------------------------------------------------------------------
1 | import { A } from "@solidjs/router";
2 | import { Plus } from "lucide-solid";
3 | import { Component } from "solid-js";
4 |
5 | const CreateNewCard: Component = () => (
6 |
7 |
75 |
79 |
80 |
84 |
85 |
8 |
10 |
11 | );
12 |
13 | export default CreateNewCard;
14 |
--------------------------------------------------------------------------------
/src/pages/Home/index.tsx:
--------------------------------------------------------------------------------
1 | import { Component, For, Suspense } from "solid-js";
2 |
3 | import { createQuery } from "@tanstack/solid-query";
4 |
5 | import { fetchCharacters } from "../../api/characters/list";
6 | import Character from "../../models/Character";
7 | import CharacterCard from "../../shared/CharacterCard";
8 | import PageHeader from "../../shared/PageHeader";
9 | import useAuth from "../../hooks/auth";
10 | import RequiresAuth from "../../shared/RequiresAuth";
11 |
12 | const CharacterGroup: Component<{
13 | title: string;
14 | description: string;
15 | characters?: Character[];
16 | }> = (props) => (
17 | <>
18 |
21 |
22 | {(character: Character) => (
23 |
29 |
30 |
31 | );
32 |
33 | const HomePage: Component = () => {
34 | const { jwt } = useAuth();
35 | const query = createQuery(
36 | () => ["characters"],
37 | () => fetchCharacters(jwt()!)
38 | );
39 |
40 | return (
41 |
67 |
68 |
84 | );
85 | };
86 |
87 | export default LoginPage;
88 |
--------------------------------------------------------------------------------
/src/providers/AppStoreProvider.tsx:
--------------------------------------------------------------------------------
1 | import { Component, createContext, JSX, useContext } from "solid-js";
2 | import { createStore, SetStoreFunction } from "solid-js/store";
3 |
4 | import User from "../models/User";
5 |
6 | interface AppStore {
7 | // TODO(11b): Type up proper domain models and use them here.
8 | auth: { jwt?: string; user?: User };
9 | }
10 |
11 | const defaultStore = {
12 | auth: {
13 | jwt: undefined,
14 | user: undefined,
15 | },
16 | };
17 |
18 | const AppStoreContext = createContext
69 |
77 |
79 | {loginError()}
80 |
81 |
82 |
83 |
28 |
36 | );
37 | };
38 |
39 | export default Alert;
40 |
--------------------------------------------------------------------------------
/src/shared/Button.tsx:
--------------------------------------------------------------------------------
1 | import { Component, JSX } from "solid-js";
2 |
3 | type ButtonSchema = "primary" | "secondary";
4 |
5 | const schemaNameToClass: Record
29 | {schemaToIcon[props.schema]({ size: 18 })}
30 |
31 |
32 | {props.title}
33 |
35 | {props.children}
34 |
15 |
16 |
17 |
18 |
19 | {props.character.name}
20 |
22 |
23 | );
24 |
25 | export default CharacterCard;
26 |
--------------------------------------------------------------------------------
/src/shared/Divider.tsx:
--------------------------------------------------------------------------------
1 | import { Component } from "solid-js";
2 |
3 | /** A subtle horizontal divider line. */
4 | const Divider: Component = () => ;
5 |
6 | export default Divider;
7 |
--------------------------------------------------------------------------------
/src/shared/FileUpload.tsx:
--------------------------------------------------------------------------------
1 | import { Component } from "solid-js";
2 |
3 | const FileUpload: Component = () => (
4 | {props.character.description}
21 |
5 |
19 |
20 | );
21 |
22 | export default FileUpload;
23 |
--------------------------------------------------------------------------------
/src/shared/NavBar.tsx:
--------------------------------------------------------------------------------
1 | import { MessageCircle, Settings, User, Users } from "lucide-solid";
2 | import { Component } from "solid-js";
3 |
4 | import { A } from "@solidjs/router";
5 |
6 | const NavBar: Component = () => (
7 |
8 |
9 |
10 | PygmalionAI
11 |
12 |
13 |
14 |
19 | {props.title}
8 |{props.subtitle}
10 |
12 |
36 | );
37 |
38 | export default RadioGroup;
39 |
--------------------------------------------------------------------------------
/src/shared/RangeInput.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Show, createSignal, createEffect } from "solid-js";
2 | import type { JSX } from "solid-js";
3 |
4 | const RangeInput: Component<{
5 | label: string;
6 | value: number;
7 | helperText?: string;
8 | min: number;
9 | max: number;
10 | step: number;
11 | }> = (props) => {
12 | const [value, setValue] = createSignal(props.value);
13 |
14 | function updateRangeSliders() {
15 | Array.from(document.getElementsByTagName("input")).forEach((input) => {
16 | input.style.backgroundSize =
17 | ((Number(input.value) - Number(input.min)) * 100) /
18 | (Number(input.max) - Number(input.min)) +
19 | "% 100%";
20 | });
21 | }
22 |
23 | const onInput: JSX.EventHandler
13 |
14 | {(option) => (
15 |
34 |
35 |
16 |
25 |
31 |
32 | )}
33 |
32 |
45 |
49 |
67 |
68 | );
69 | };
70 |
71 | export default RangeInput;
72 |
--------------------------------------------------------------------------------
/src/shared/RequiresAuth.tsx:
--------------------------------------------------------------------------------
1 | import { Component, createEffect, JSX, Show } from "solid-js";
2 |
3 | import { useLocation, useNavigate } from "@solidjs/router";
4 |
5 | import useAuth from "../hooks/auth";
6 |
7 | const RequiresAuth: Component<{ children: JSX.Element }> = (props) => {
8 | const { isAuthenticated } = useAuth();
9 | const location = useLocation();
10 | const navigate = useNavigate();
11 |
12 | createEffect(() => {
13 | if (isAuthenticated()) {
14 | return;
15 | }
16 |
17 | navigate("/account/login", {
18 | replace: true,
19 | state: { redirectTo: location.pathname },
20 | });
21 | });
22 |
23 | return -
33 |
34 |
43 |
46 | {props.helperText} 47 |
48 |
20 |
21 |
29 |
30 |