morgan
/
chatgpt-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert scrolling, fix linting

This commit is contained in:
Niek van der Maas 2023-03-12 08:10:58 +01:00
parent 58336d244c
commit b4ab40a869
2 changed files with 28 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app.scss
View File

@ -86,12 +86,12 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
}
/* for copy button */
pre[data-language="plaintext"] {
pre[data-language] {
position: relative;
}
div.copy-prompt {
padding: 5px;
padding: .5rem;
position: absolute;
top: 5px;
right: 5px;
top: .5rem;
right: .5rem;
}

88
src/lib/Chat.svelte
View File

@ -1,12 +1,7 @@
<script lang="ts">
//import { fetchEventSource } from "@microsoft/fetch-event-source";
import {
apiKeyStorage,
chatsStorage,
addMessage,
clearMessages,
} from "./Storage.svelte";
import { apiKeyStorage, chatsStorage, addMessage, clearMessages } from "./Storage.svelte";
import type { Request, Response, Message, Settings } from "./Types.svelte";
import Code from "./Code.svelte";
@ -102,7 +97,7 @@
// Scroll to the bottom of the page after any updates to the messages array
window.scrollTo(0, document.body.scrollHeight);
input.focus();
copyFunction()
copyFunction();
});
// Marked options
@ -149,14 +144,9 @@
// Provide the settings by mapping the settingsMap to key/value pairs
...settingsMap.reduce((acc, setting) => {
const value = (
settings.querySelector(
`#settings-${setting.key}`
) as HTMLInputElement
).value;
const value = (settings.querySelector(`#settings-${setting.key}`) as HTMLInputElement).value;
if (value) {
acc[setting.key] =
setting.type === "number" ? parseFloat(value) : value;
acc[setting.key] = setting.type === "number" ? parseFloat(value) : value;
}
return acc;
}, {}),
@ -208,9 +198,7 @@
addMessage(chatId, choice.message);
// Use TTS to read the response, if query was recorded
if (recorded && "SpeechSynthesisUtterance" in window) {
const utterance = new SpeechSynthesisUtterance(
choice.message.content
);
const utterance = new SpeechSynthesisUtterance(choice.message.content);
speechSynthesis.speak(utterance);
}
});
@ -243,9 +231,7 @@
const deleteChat = () => {
if (confirm("Are you sure you want to delete this chat?")) {
chatsStorage.update((chats) =>
chats.filter((chat) => chat.id !== chatId)
);
chatsStorage.update((chats) => chats.filter((chat) => chat.id !== chatId));
chatId = null;
}
};
@ -260,9 +246,7 @@
const clearSettings = () => {
settingsMap.forEach((setting) => {
const input = settings.querySelector(
`#settings-${setting.key}`
) as HTMLInputElement;
const input = settings.querySelector(`#settings-${setting.key}`) as HTMLInputElement;
input.value = "";
});
};
@ -290,18 +274,15 @@
copyPromptText.innerHTML = showCopyMessage;
copyPrompt.appendChild(copyPromptText);
block.appendChild(copyPrompt);
block
.querySelector(".copy-prompt > button")
.addEventListener("click", (evt) => {
copy(block.querySelector("code").textContent);
block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
setTimeout(() => {
block.querySelector(".copy-prompt > button").innerHTML =
showCopyMessage;
}, 1000);
});
block.querySelector(".copy-prompt > button").addEventListener("click", (evt) => {
copy(block.querySelector("code").textContent);
block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
setTimeout(() => {
block.querySelector(".copy-prompt > button").innerHTML = showCopyMessage;
}, 1000);
});
});
}
};
</script>
<nav class="level chat-header">
@ -314,10 +295,7 @@
class="greyscale ml-2 is-hidden has-text-weight-bold editbutton"
title="Rename chat"
on:click|preventDefault={() => {
let newChatName = prompt(
"Enter a new name for this chat",
chat.name
);
let newChatName = prompt("Enter a new name for this chat", chat.name);
if (newChatName) {
chat.name = newChatName;
chatsStorage.set($chatsStorage);
@ -362,9 +340,7 @@
{#if message.role === "user"}
<article
class="message is-info user-message"
class:has-text-right={message.content
.split("\n")
.filter((line) => line.trim()).length === 1}
class:has-text-right={message.content.split("\n").filter((line) => line.trim()).length === 1}
>
<div class="message-body content">
<a
@ -410,13 +386,9 @@
/>
{#if message.usage}
<p class="is-size-7">
This message was generated using <span class="has-text-weight-bold"
>{message.usage.total_tokens}</span
>
This message was generated using <span class="has-text-weight-bold">{message.usage.total_tokens}</span>
tokens ~=
<span class="has-text-weight-bold"
>${(message.usage.total_tokens * token_price).toFixed(6)}</span
>
<span class="has-text-weight-bold">${(message.usage.total_tokens * token_price).toFixed(6)}</span>
</p>
{/if}
</div>
@ -428,10 +400,7 @@
<progress class="progress is-small is-dark" max="100" />
{/if}
<form
class="field has-addons has-addons-right"
on:submit|preventDefault={() => submitForm()}
>
<form class="field has-addons has-addons-right" on:submit|preventDefault={() => submitForm()}>
<p class="control is-expanded">
<textarea
class="input is-info is-focused chat-input"
@ -453,17 +422,12 @@
/>
</p>
<p class="control" class:is-hidden={!recognition}>
<button
class="button"
class:is-pulse={recording}
on:click|preventDefault={recordToggle}
<button class="button" class:is-pulse={recording} on:click|preventDefault={recordToggle}
><span class="greyscale">🎤</span></button
>
</p>
<p class="control">
<button class="button" on:click|preventDefault={showSettings}
><span class="greyscale">⚙️</span></button
>
<button class="button" on:click|preventDefault={showSettings}><span class="greyscale">⚙️</span></button>
</p>
<p class="control">
<button class="button is-info" type="submit">Send</button>
@ -489,9 +453,7 @@
{#each settingsMap as setting}
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label" for="settings-temperature"
>{setting.name}</label
>
<label class="label" for="settings-temperature">{setting.name}</label>
</div>
<div class="field-body">
<div class="field">
@ -508,9 +470,7 @@
</section>
<footer class="modal-card-foot">
<button class="button is-info" on:click={closeSettings}
>Close settings</button
>
<button class="button is-info" on:click={closeSettings}>Close settings</button>
<button class="button" on:click={clearSettings}>Clear settings</button>
</footer>
</div>