From 22cb4b26bcb1cbef52322cbc5b101063ec8c4cf9 Mon Sep 17 00:00:00 2001 From: Webifi Date: Sat, 27 May 2023 05:25:54 -0500 Subject: [PATCH 001/150] Refactor and add many features --- .vscode/settings.json | 2 + package-lock.json | 166 ++++++++ package.json | 5 + src/app.scss | 5 +- src/lib/Chat.svelte | 748 +++++++++++++++++++++++++++++-------- src/lib/EditMessage.svelte | 192 ++++++++++ src/lib/Export.svelte | 30 +- src/lib/Messages.svelte | 84 +---- src/lib/Profiles.svelte | 233 ++++++++++++ src/lib/Settings.svelte | 309 +++++++++++++++ src/lib/Sidebar.svelte | 50 ++- src/lib/Stats.svelte | 49 +++ src/lib/Storage.svelte | 231 +++++++++++- src/lib/Types.svelte | 130 +++++-- 14 files changed, 1960 insertions(+), 274 deletions(-) create mode 100644 src/lib/EditMessage.svelte create mode 100644 src/lib/Profiles.svelte create mode 100644 src/lib/Settings.svelte create mode 100644 src/lib/Stats.svelte diff --git a/.vscode/settings.json b/.vscode/settings.json index 733bf49..46fe7da 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,4 +12,6 @@ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, + "editor.insertSpaces": true, + "editor.tabSize": 2, } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c804407..ebce529 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "chatgpt-web", "version": "0.0.0", "devDependencies": { + "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fullhuman/postcss-purgecss": "^5.0.0", "@microsoft/fetch-event-source": "^2.0.1", "@rollup/plugin-dsv": "^3.0.2", @@ -22,16 +23,20 @@ "eslint-config-standard-with-typescript": "^34.0.1", "eslint-plugin-svelte3": "^4.0.0", "flourite": "^1.2.3", + "gpt-tokenizer": "^2.0.0", "postcss": "^8.4.22", "sass": "^1.61.0", + "streamed-chatgpt-api": "^1.0.7", "svelte": "^3.58.0", "svelte-check": "^3.2.0", + "svelte-fa": "^3.0.3", "svelte-highlight": "^7.2.1", "svelte-local-storage-store": "^0.4.0", "svelte-markdown": "^0.2.3", "svelte-spa-router": "^3.3.0", "tslib": "^2.5.0", "typescript": "^5.0.4", + "uuid": "^9.0.0", "vite": "^4.1.0" } }, @@ -447,6 +452,29 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz", + "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==", + "dev": true, + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz", + "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@fullhuman/postcss-purgecss": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-5.0.0.tgz", @@ -1466,6 +1494,16 @@ "tsv2json": "bin/dsv2json" } }, + "node_modules/data-uri-to-buffer": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", + "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==", + "dev": true, + "optional": true, + "engines": { + "node": ">= 12" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -2237,6 +2275,30 @@ "reusify": "^1.0.4" } }, + "node_modules/fetch-blob": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz", + "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/jimmywarting" + }, + { + "type": "paypal", + "url": "https://paypal.me/jimmywarting" + } + ], + "optional": true, + "dependencies": { + "node-domexception": "^1.0.0", + "web-streams-polyfill": "^3.0.3" + }, + "engines": { + "node": "^12.20 || >= 14.13" + } + }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -2319,6 +2381,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/formdata-polyfill": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", + "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==", + "dev": true, + "optional": true, + "dependencies": { + "fetch-blob": "^3.1.2" + }, + "engines": { + "node": ">=12.20.0" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2526,6 +2601,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gpt-tokenizer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/gpt-tokenizer/-/gpt-tokenizer-2.0.0.tgz", + "integrity": "sha512-41odV6Mma0DUvUdfV4Z3F7cWUyXZSXGdP72coAxBhd6rCKZSu2HuPDkE8X1MA3j64h7Vm//T8IDngMimycPEGQ==", + "dev": true, + "dependencies": { + "rfc4648": "^1.5.2" + } + }, "node_modules/graceful-fs": { "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", @@ -3230,6 +3314,45 @@ "dev": true, "peer": true }, + "node_modules/node-domexception": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", + "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/jimmywarting" + }, + { + "type": "github", + "url": "https://paypal.me/jimmywarting" + } + ], + "optional": true, + "engines": { + "node": ">=10.5.0" + } + }, + "node_modules/node-fetch": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.1.tgz", + "integrity": "sha512-cRVc/kyto/7E5shrWca1Wsea4y6tL9iYJE5FBCius3JQfb/4P4I295PfhgbJQBLTx6lATE4z+wK0rPM4VS2uow==", + "dev": true, + "optional": true, + "dependencies": { + "data-uri-to-buffer": "^4.0.0", + "fetch-blob": "^3.1.4", + "formdata-polyfill": "^4.0.10" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/node-fetch" + } + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -3624,6 +3747,12 @@ "node": ">=0.10.0" } }, + "node_modules/rfc4648": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/rfc4648/-/rfc4648-1.5.2.tgz", + "integrity": "sha512-tLOizhR6YGovrEBLatX1sdcuhoSCXddw3mqNVAcKxGJ+J0hFeJ+SjeWCv5UPA/WU3YzWPPuCVYgXBKZUPGpKtg==", + "dev": true + }, "node_modules/rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -3886,6 +4015,18 @@ "node": ">=0.10.0" } }, + "node_modules/streamed-chatgpt-api": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/streamed-chatgpt-api/-/streamed-chatgpt-api-1.0.7.tgz", + "integrity": "sha512-pVbRP9gvYCK7IfHn59Z1GrMjD24UzbOlSodhpJpMpXucB8zTixdZ3Y4DfUsi3G9dWLqYml4R74BeIlVJAXCvMg==", + "dev": true, + "engines": { + "node": ">=18.0.0" + }, + "optionalDependencies": { + "node-fetch": "^3.1.0" + } + }, "node_modules/string.prototype.trim": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz", @@ -4039,6 +4180,12 @@ "svelte": "^3.55.0" } }, + "node_modules/svelte-fa": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/svelte-fa/-/svelte-fa-3.0.3.tgz", + "integrity": "sha512-GIikJjcVCD+5Y/x9hZc2R4gvuA0gVftacuWu1a+zVQWSFjFYZ+hhU825x+QNs2slsppfrgmFiUyU9Sz9gj4Rdw==", + "dev": true + }, "node_modules/svelte-highlight": { "version": "7.3.0", "resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-7.3.0.tgz", @@ -4337,6 +4484,15 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/uuid": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/vite": { "version": "4.3.8", "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz", @@ -4399,6 +4555,16 @@ } } }, + "node_modules/web-streams-polyfill": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz", + "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==", + "dev": true, + "optional": true, + "engines": { + "node": ">= 8" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index 3bf51aa..db47d00 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "lint": "eslint . --fix" }, "devDependencies": { + "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fullhuman/postcss-purgecss": "^5.0.0", "@microsoft/fetch-event-source": "^2.0.1", "@rollup/plugin-dsv": "^3.0.2", @@ -28,16 +29,20 @@ "eslint-config-standard-with-typescript": "^34.0.1", "eslint-plugin-svelte3": "^4.0.0", "flourite": "^1.2.3", + "gpt-tokenizer": "^2.0.0", "postcss": "^8.4.22", "sass": "^1.61.0", + "streamed-chatgpt-api": "^1.0.7", "svelte": "^3.58.0", "svelte-check": "^3.2.0", + "svelte-fa": "^3.0.3", "svelte-highlight": "^7.2.1", "svelte-local-storage-store": "^0.4.0", "svelte-markdown": "^0.2.3", "svelte-spa-router": "^3.3.0", "tslib": "^2.5.0", "typescript": "^5.0.4", + "uuid": "^9.0.0", "vite": "^4.1.0" } } diff --git a/src/app.scss b/src/app.scss index 62acc7e..1a195c3 100644 --- a/src/app.scss +++ b/src/app.scss @@ -68,7 +68,7 @@ a.is-disabled { resize: vertical; } -$footer-padding: 3rem 1.5rem; +$footer-padding: 1.5rem 1.5rem; $fullhd: 2000px; $modal-content-width: 1000px; @@ -102,7 +102,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t .modal-card-body { // remove this once https: //github.com/jloh/bulma-prefers-dark/pull/90 is merged and released - background-color: $background-dark; + background-color: hsl(0, 0%, 96%); } /* Support for copy code button */ @@ -135,6 +135,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t width: 1.5rem; height: 1.5rem; border-width: 0.25em; + display: inline-block; } /* Support for fullwidth dropdowns, see https://github.com/jgthms/bulma/issues/2055 */ diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte index 866b588..6fe6ff0 100644 --- a/src/lib/Chat.svelte +++ b/src/lib/Chat.svelte @@ -1,126 +1,98 @@ - + {#if updating}
- + + {updatingMessage}
{/if} -{#if chat.messages.length === 0} +{#if chat.messages.length === 0 || (chat.messages.length === 1 && chat.messages[0].role === 'system')} {/if}
submitForm()}>

+ + {:else} +

+ +
+ {/if}
{#if setting.type === 'number'} @@ -465,24 +830,38 @@ type={setting.type} title="{setting.title}" id="settings-{setting.key}" + value="{getChatSettingValue(chatId, setting)}" min={setting.min} max={setting.max} step={setting.step} placeholder={String(setting.default)} + on:change={e => queueSettingValueChange(e, setting)} /> {:else if setting.type === 'select'}
- queueSettingValueChange(e, setting) } > {#each setting.options as option} - + {/each}
+ {:else if setting.type === 'text'} +
+ { queueSettingValueChange(e, setting) }} + > +
{/if}
+ {/if} {/each} + {/key}
- - - - -
- -
-
-
-

Enter a new name for this chat

-
-
-
-
- -
-
-
- -
-
-
-
-
- - -
-
- - - { if (event.key === 'Escape') { From aa94788573d012a150dc929a31dbb0e7c3160921 Mon Sep 17 00:00:00 2001 From: Webifi Date: Sat, 3 Jun 2023 13:15:20 -0500 Subject: [PATCH 099/150] Fix profile loading issues on new chat --- src/lib/ChatSettingField.svelte | 33 ++++++++++++++++++++++++++------ src/lib/ChatSettingsModal.svelte | 22 +++++++++++++++++---- src/lib/Sidebar.svelte | 2 +- src/lib/Storage.svelte | 6 ++++-- src/lib/Types.svelte | 4 +++- 5 files changed, 53 insertions(+), 14 deletions(-) diff --git a/src/lib/ChatSettingField.svelte b/src/lib/ChatSettingField.svelte index bd11cbb..e9ade0d 100644 --- a/src/lib/ChatSettingField.svelte +++ b/src/lib/ChatSettingField.svelte @@ -1,9 +1,10 @@ From 39233051daee8f54c17f30f958b8621230606c4e Mon Sep 17 00:00:00 2001 From: Webifi Date: Sun, 4 Jun 2023 20:47:08 -0500 Subject: [PATCH 104/150] Lay groundwork for dynamic modals --- package-lock.json | 10 ++++ package.json | 1 + src/App.svelte | 22 +++++++- src/app.scss | 2 +- src/lib/Chat.svelte | 77 +++++---------------------- src/lib/ChatSettingsModal.svelte | 2 +- src/lib/PromptInput.svelte | 90 ++++++++++++++++++++++++++++++++ src/lib/Sidebar.svelte | 5 +- 8 files changed, 141 insertions(+), 68 deletions(-) create mode 100644 src/lib/PromptInput.svelte diff --git a/package-lock.json b/package-lock.json index 3b15cb1..db06df2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "svelte-highlight": "^7.2.1", "svelte-local-storage-store": "^0.4.0", "svelte-markdown": "^0.2.3", + "svelte-modals": "^1.2.1", "svelte-spa-router": "^3.3.0", "svelte-use-click-outside": "^1.0.0", "tslib": "^2.5.0", @@ -4186,6 +4187,15 @@ "integrity": "sha512-vSSbKZFbNktrQ15v7o1EaH78EbWV+sPQbPjHG+Cp8CaNcPFUEfjZ0Iml/V0bFDwsTlYe8o6XC5Hfdp91cqPV2g==", "dev": true }, + "node_modules/svelte-modals": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/svelte-modals/-/svelte-modals-1.2.1.tgz", + "integrity": "sha512-7MEKUx5wb5YppkXWFGeRlYM5FMGEnpix39u9Y6GtCNTMXRDZ7DB2Z50IYLMRTMW5lOsCdtJgFbB0E3iZMKmsAA==", + "dev": true, + "peerDependencies": { + "svelte": "^3.0.0" + } + }, "node_modules/svelte-preprocess": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.3.tgz", diff --git a/package.json b/package.json index f65ad40..04c3e36 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "svelte-highlight": "^7.2.1", "svelte-local-storage-store": "^0.4.0", "svelte-markdown": "^0.2.3", + "svelte-modals": "^1.2.1", "svelte-spa-router": "^3.3.0", "svelte-use-click-outside": "^1.0.0", "tslib": "^2.5.0", diff --git a/src/App.svelte b/src/App.svelte index 0e2c734..ee62ee6 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -8,6 +8,7 @@ import Chat from './lib/Chat.svelte' import NewChat from './lib/NewChat.svelte' import { chatsStorage, apiKeyStorage } from './lib/Storage.svelte' + import { Modals, closeModal } from 'svelte-modals' // The definition of the routes with some conditions const routes = { @@ -31,7 +32,6 @@ } -
@@ -41,3 +41,23 @@ replace('/')}/> {/key}
+ + + +
+ + + diff --git a/src/app.scss b/src/app.scss index 5658593..f16b743 100644 --- a/src/app.scss +++ b/src/app.scss @@ -60,7 +60,7 @@ html { } @media screen and (min-width: 1024px) { - .modal-card { + .modal-card.wide { width: 960px !important; } } diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte index 65f70c5..559c488 100644 --- a/src/lib/Chat.svelte +++ b/src/lib/Chat.svelte @@ -40,6 +40,8 @@ import { autoGrowInputOnEvent, sizeTextElements } from './Util.svelte' import ChatSettingsModal from './ChatSettingsModal.svelte' import Footer from './Footer.svelte' + import { openModal } from 'svelte-modals' + import PromptInput from './PromptInput.svelte' // This makes it possible to override the OpenAI API base URL in the .env file const apiBase = import.meta.env.VITE_API_BASE || 'https://api.openai.com' @@ -51,7 +53,7 @@ let updatingMessage: string = '' let input: HTMLTextAreaElement // let settings: HTMLDivElement - let chatNameSettings: HTMLFormElement + // let chatNameSettings: HTMLFormElement let recognition: any = null let recording = false @@ -469,24 +471,16 @@ } } - const showChatNameSettings = () => { - chatNameSettings.classList.add('is-active'); - (chatNameSettings.querySelector('#settings-chat-name') as HTMLInputElement).focus(); - (chatNameSettings.querySelector('#settings-chat-name') as HTMLInputElement).select() - } - - const saveChatNameSettings = () => { - const newChatName = (chatNameSettings.querySelector('#settings-chat-name') as HTMLInputElement).value - // save if changed - if (newChatName && newChatName !== chat.name) { - chat.name = newChatName - chatsStorage.set($chatsStorage) - } - closeChatNameSettings() - } - - const closeChatNameSettings = () => { - chatNameSettings.classList.remove('is-active') + function promptRename () { + openModal(PromptInput, { + title: 'Enter Name for Chat', + label: 'Name', + value: chat.name, + onSubmit: (value) => { + chat.name = (value || '').trim() || chat.name + $checkStateChange++ + } + }) } const recordToggle = () => { @@ -503,48 +497,13 @@ - - -
- -
-
-
-

Enter a new name for this chat

-
-
-
-
- -
-
-
- -
-
-
-
-
- - -
-
- - - -