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

chat room is scrollable

This commit is contained in:
littlemoonstones 2023-03-12 14:22:43 +08:00
parent 66c0fe57df
commit 87a8fdc1d4
2 changed files with 136 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app.scss
View File

@ -95,3 +95,15 @@ div.copy-prompt {
top: 5px; top: 5px;
right: 5px; right: 5px;
} }
.message-container{
display: flex;
flex-direction: column;
height: 720px;
}
.message-list{
// max-height: 100%;
overflow-y: auto;
flex: 1;
margin-bottom: 10px;
}

27
src/lib/Chat.svelte
View File

@ -102,7 +102,7 @@
// Scroll to the bottom of the page after any updates to the messages array // Scroll to the bottom of the page after any updates to the messages array
window.scrollTo(0, document.body.scrollHeight); window.scrollTo(0, document.body.scrollHeight);
input.focus(); input.focus();
copyFunction() copyFunction();
}); });
// Marked options // Marked options
@ -286,7 +286,13 @@
const copyPrompt = document.createElement("div"); const copyPrompt = document.createElement("div");
copyPrompt.className = "copy-prompt"; copyPrompt.className = "copy-prompt";
const copyPromptText = document.createElement("button"); const copyPromptText = document.createElement("button");
copyPromptText.classList.add("button", "is-light", "is-outlined", "is-small", "is-responsive"); copyPromptText.classList.add(
"button",
"is-light",
"is-outlined",
"is-small",
"is-responsive"
);
copyPromptText.innerHTML = showCopyMessage; copyPromptText.innerHTML = showCopyMessage;
copyPrompt.appendChild(copyPromptText); copyPrompt.appendChild(copyPromptText);
block.appendChild(copyPrompt); block.appendChild(copyPrompt);
@ -301,7 +307,7 @@
}, 1000); }, 1000);
}); });
}); });
} };
</script> </script>
<nav class="level chat-header"> <nav class="level chat-header">
@ -357,7 +363,8 @@
</p> </p>
</div> </div>
</nav> </nav>
<div class="is-fullhd message-container">
<div class="message-list">
{#each chat.messages as message} {#each chat.messages as message}
{#if message.role === "user"} {#if message.role === "user"}
<article <article
@ -410,12 +417,15 @@
/> />
{#if message.usage} {#if message.usage}
<p class="is-size-7"> <p class="is-size-7">
This message was generated using <span class="has-text-weight-bold" This message was generated using <span
class="has-text-weight-bold"
>{message.usage.total_tokens}</span >{message.usage.total_tokens}</span
> >
tokens ~= tokens ~=
<span class="has-text-weight-bold" <span class="has-text-weight-bold"
>${(message.usage.total_tokens * token_price).toFixed(6)}</span >${(message.usage.total_tokens * token_price).toFixed(
6
)}</span
> >
</p> </p>
{/if} {/if}
@ -423,7 +433,8 @@
</article> </article>
{/if} {/if}
{/each} {/each}
</div>
<div class="message-send">
{#if updating} {#if updating}
<progress class="progress is-small is-dark" max="100" /> <progress class="progress is-small is-dark" max="100" />
{/if} {/if}
@ -469,6 +480,8 @@
<button class="button is-info" type="submit">Send</button> <button class="button is-info" type="submit">Send</button>
</p> </p>
</form> </form>
</div>
</div>
<svelte:window <svelte:window
on:keydown={(event) => { on:keydown={(event) => {