refac: components/templates.tsx
This commit is contained in:
113
src/components/templates.tsx
Normal file
113
src/components/templates.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { TemplateChatStore } from "@/types/chatstore";
|
||||
import { ChatStore } from "@/types/chatstore";
|
||||
import { getDefaultParams } from "@/utils/getDefaultParam";
|
||||
|
||||
const Templates = (props: {
|
||||
templates: TemplateChatStore[];
|
||||
chatStore: ChatStore;
|
||||
setChatStore: (cs: ChatStore) => void;
|
||||
setTemplates: (templates: TemplateChatStore[]) => void;
|
||||
}) => {
|
||||
const { templates, chatStore, setChatStore, setTemplates } = props;
|
||||
return (
|
||||
<>
|
||||
{templates.map((t, index) => (
|
||||
<div
|
||||
className="cursor-pointer rounded bg-green-400 w-fit p-2 m-1 flex flex-col"
|
||||
onClick={() => {
|
||||
const newChatStore: ChatStore = structuredClone(t);
|
||||
// @ts-ignore
|
||||
delete newChatStore.name;
|
||||
if (!newChatStore.apiEndpoint) {
|
||||
newChatStore.apiEndpoint = getDefaultParams(
|
||||
"api",
|
||||
chatStore.apiEndpoint,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.apiKey) {
|
||||
newChatStore.apiKey = getDefaultParams("key", chatStore.apiKey);
|
||||
}
|
||||
if (!newChatStore.whisper_api) {
|
||||
newChatStore.whisper_api = getDefaultParams(
|
||||
"whisper-api",
|
||||
chatStore.whisper_api,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.whisper_key) {
|
||||
newChatStore.whisper_key = getDefaultParams(
|
||||
"whisper-key",
|
||||
chatStore.whisper_key,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.tts_api) {
|
||||
newChatStore.tts_api = getDefaultParams(
|
||||
"tts-api",
|
||||
chatStore.tts_api,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.tts_key) {
|
||||
newChatStore.tts_key = getDefaultParams(
|
||||
"tts-key",
|
||||
chatStore.tts_key,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.image_gen_api) {
|
||||
newChatStore.image_gen_api = getDefaultParams(
|
||||
"image-gen-api",
|
||||
chatStore.image_gen_api,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.image_gen_key) {
|
||||
newChatStore.image_gen_key = getDefaultParams(
|
||||
"image-gen-key",
|
||||
chatStore.image_gen_key,
|
||||
);
|
||||
}
|
||||
newChatStore.cost = 0;
|
||||
|
||||
// manage undefined value because of version update
|
||||
newChatStore.toolsString = newChatStore.toolsString || "";
|
||||
|
||||
setChatStore({ ...newChatStore });
|
||||
}}
|
||||
>
|
||||
<span className="w-full text-center">{t.name}</span>
|
||||
<hr className="mt-2" />
|
||||
<span className="flex justify-between">
|
||||
<button
|
||||
onClick={(event) => {
|
||||
// prevent triggert other event
|
||||
event.stopPropagation();
|
||||
|
||||
const name = prompt("Give template a name");
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
t.name = name;
|
||||
setTemplates(structuredClone(templates));
|
||||
}}
|
||||
>
|
||||
🖋
|
||||
</button>
|
||||
<button
|
||||
onClick={(event) => {
|
||||
// prevent triggert other event
|
||||
event.stopPropagation();
|
||||
|
||||
if (!confirm("Are you sure to delete this template?")) {
|
||||
return;
|
||||
}
|
||||
templates.splice(index, 1);
|
||||
setTemplates(structuredClone(templates));
|
||||
}}
|
||||
>
|
||||
❌
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Templates;
|
||||
@@ -15,7 +15,7 @@ import { upgrade } from "@/indexedDB/upgrade";
|
||||
export function App() {
|
||||
// init selected index
|
||||
const [selectedChatIndex, setSelectedChatIndex] = useState(
|
||||
parseInt(localStorage.getItem(STORAGE_NAME_SELECTED) ?? "1")
|
||||
parseInt(localStorage.getItem(STORAGE_NAME_SELECTED) ?? "1"),
|
||||
);
|
||||
console.log("selectedChatIndex", selectedChatIndex);
|
||||
useEffect(() => {
|
||||
@@ -55,7 +55,7 @@ export function App() {
|
||||
const max = chatStore.maxTokens - chatStore.tokenMargin;
|
||||
let sum = 0;
|
||||
chatStore.postBeginIndex = chatStore.history.filter(
|
||||
({ hide }) => !hide
|
||||
({ hide }) => !hide,
|
||||
).length;
|
||||
for (const msg of chatStore.history
|
||||
.filter(({ hide }) => !hide)
|
||||
@@ -70,7 +70,7 @@ export function App() {
|
||||
|
||||
// manually estimate token
|
||||
chatStore.totalTokens = calculate_token_length(
|
||||
chatStore.systemMessageContent
|
||||
chatStore.systemMessageContent,
|
||||
);
|
||||
for (const msg of chatStore.history
|
||||
.filter(({ hide }) => !hide)
|
||||
@@ -92,7 +92,7 @@ export function App() {
|
||||
|
||||
// all chat store indexes
|
||||
const [allChatStoreIndexes, setAllChatStoreIndexes] = useState<IDBValidKey>(
|
||||
[]
|
||||
[],
|
||||
);
|
||||
|
||||
const handleNewChatStoreWithOldOne = async (chatStore: ChatStore) => {
|
||||
|
||||
@@ -45,6 +45,7 @@ import { ListAPIs } from "@/listAPIs";
|
||||
import { ListToolsTempaltes } from "@/listToolsTemplates";
|
||||
import { autoHeight } from "@/textarea";
|
||||
import Search from "@/search";
|
||||
import Templates from "@/components/templates";
|
||||
|
||||
export default function ChatBOX(props: {
|
||||
db: Promise<IDBPDatabase<ChatStore>>;
|
||||
@@ -743,104 +744,12 @@ export default function ChatBOX(props: {
|
||||
</h2>
|
||||
<div className="divider"></div>
|
||||
<div className="flex flex-wrap">
|
||||
{templates.map((t, index) => (
|
||||
<div
|
||||
className="cursor-pointer rounded bg-green-400 w-fit p-2 m-1 flex flex-col"
|
||||
onClick={() => {
|
||||
const newChatStore: ChatStore = structuredClone(t);
|
||||
// @ts-ignore
|
||||
delete newChatStore.name;
|
||||
if (!newChatStore.apiEndpoint) {
|
||||
newChatStore.apiEndpoint = getDefaultParams(
|
||||
"api",
|
||||
chatStore.apiEndpoint,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.apiKey) {
|
||||
newChatStore.apiKey = getDefaultParams(
|
||||
"key",
|
||||
chatStore.apiKey,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.whisper_api) {
|
||||
newChatStore.whisper_api = getDefaultParams(
|
||||
"whisper-api",
|
||||
chatStore.whisper_api,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.whisper_key) {
|
||||
newChatStore.whisper_key = getDefaultParams(
|
||||
"whisper-key",
|
||||
chatStore.whisper_key,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.tts_api) {
|
||||
newChatStore.tts_api = getDefaultParams(
|
||||
"tts-api",
|
||||
chatStore.tts_api,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.tts_key) {
|
||||
newChatStore.tts_key = getDefaultParams(
|
||||
"tts-key",
|
||||
chatStore.tts_key,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.image_gen_api) {
|
||||
newChatStore.image_gen_api = getDefaultParams(
|
||||
"image-gen-api",
|
||||
chatStore.image_gen_api,
|
||||
);
|
||||
}
|
||||
if (!newChatStore.image_gen_key) {
|
||||
newChatStore.image_gen_key = getDefaultParams(
|
||||
"image-gen-key",
|
||||
chatStore.image_gen_key,
|
||||
);
|
||||
}
|
||||
newChatStore.cost = 0;
|
||||
|
||||
// manage undefined value because of version update
|
||||
newChatStore.toolsString = newChatStore.toolsString || "";
|
||||
|
||||
setChatStore({ ...newChatStore });
|
||||
}}
|
||||
>
|
||||
<span className="w-full text-center">{t.name}</span>
|
||||
<hr className="mt-2" />
|
||||
<span className="flex justify-between">
|
||||
<button
|
||||
onClick={(event) => {
|
||||
// prevent triggert other event
|
||||
event.stopPropagation();
|
||||
|
||||
const name = prompt("Give template a name");
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
t.name = name;
|
||||
setTemplates(structuredClone(templates));
|
||||
}}
|
||||
>
|
||||
🖋
|
||||
</button>
|
||||
<button
|
||||
onClick={(event) => {
|
||||
// prevent triggert other event
|
||||
event.stopPropagation();
|
||||
|
||||
if (!confirm("Are you sure to delete this template?")) {
|
||||
return;
|
||||
}
|
||||
templates.splice(index, 1);
|
||||
setTemplates(structuredClone(templates));
|
||||
}}
|
||||
>
|
||||
❌
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<Templates
|
||||
templates={templates}
|
||||
setTemplates={setTemplates}
|
||||
chatStore={chatStore}
|
||||
setChatStore={setChatStore}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user