diff --git a/src/games/ai/assets/style.css b/src/games/ai/assets/style.css index f9477b2..254532e 100644 --- a/src/games/ai/assets/style.css +++ b/src/games/ai/assets/style.css @@ -22,13 +22,13 @@ } textarea, -input { +input, +select { color: var(--color); border: var(--border); background-color: var(--backgroundColorDark); font-size: 1em; font-family: sans-serif; - appearance: none; outline: none; } @@ -106,7 +106,8 @@ body { flex-direction: row; height: auto; width: 100%; - > textarea { + + >textarea { min-height: 48px; resize: none; background-color: var(--backgroundColor); diff --git a/src/games/ai/components/header/header.module.css b/src/games/ai/components/header/header.module.css index d972408..ee7f15e 100644 --- a/src/games/ai/components/header/header.module.css +++ b/src/games/ai/components/header/header.module.css @@ -6,13 +6,20 @@ width: 100%; border: var(--border); - >input { - &.valid { - background-color: var(--green); - } + .valid { + background-color: var(--green); + } - &.invalid { - background-color: var(--red); + .invalid { + background-color: var(--red); + } + + .inputs { + display: flex; + flex-direction: row; + + select { + text-transform: capitalize; } } @@ -25,7 +32,7 @@ } .modalTitle { - margin: 0; + margin: 0; } .scrollPane { diff --git a/src/games/ai/components/header/header.tsx b/src/games/ai/components/header/header.tsx index af373cc..d0c4ab1 100644 --- a/src/games/ai/components/header/header.tsx +++ b/src/games/ai/components/header/header.tsx @@ -2,7 +2,7 @@ import { useCallback, useContext, useEffect, useMemo, useState } from "preact/ho import { useBool } from "@common/hooks/useBool"; import { Modal } from "@common/components/modal/modal"; -import { StateContext } from "../../contexts/state"; +import { Instruct, StateContext } from "../../contexts/state"; import { LLMContext } from "../../contexts/llm"; import { MiniChat } from "../minichat/minichat"; import { AutoTextarea } from "../autoTextarea"; @@ -13,8 +13,8 @@ import { Ace } from "../ace"; export const Header = () => { const { getContextLength } = useContext(LLMContext); const { - messages, connectionUrl, systemPrompt, lore, userPrompt, bannedWords, - setConnectionUrl, setSystemPrompt, setLore, setUserPrompt, addSwipe, setBannedWords, + messages, connectionUrl, systemPrompt, lore, userPrompt, bannedWords, instruct, + setConnectionUrl, setSystemPrompt, setLore, setUserPrompt, addSwipe, setBannedWords, setInstruct } = useContext(StateContext); const [urlValid, setUrlValid] = useState(false); const [urlEditing, setUrlEditing] = useState(false); @@ -66,11 +66,21 @@ export const Header = () => { return (