Skip to content

GitLab

Commit 63182828 authored by Timothy J. Baek's avatar Timothy J. Baek
Browse files

refac: styling

parent 3043e434
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 82 deletions
src/lib/components/chat/Messages.svelte
View file @ 63182828
...@@ -277,85 +277,87 @@ ...@@ -277,85 +277,87 @@
// }; // };
</script> </script>
{#if messages.length == 0} <div class="h-full">
<Placeholder {#if messages.length == 0}
models={selectedModels} <Placeholder
modelfiles={selectedModelfiles} models={selectedModels}
{suggestionPrompts} modelfiles={selectedModelfiles}
submitPrompt={async (p) => { {suggestionPrompts}
const chatTextAreaElement = document.getElementById('chat-textarea'); submitPrompt={async (p) => {
if (chatTextAreaElement) { const chatTextAreaElement = document.getElementById('chat-textarea');
prompt = p; if (chatTextAreaElement) {
prompt = p;
await tick();
await tick();
chatTextAreaElement.style.height = '';
chatTextAreaElement.style.height = Math.min(chatTextAreaElement.scrollHeight, 200) + 'px'; chatTextAreaElement.style.height = '';
chatTextAreaElement.focus(); chatTextAreaElement.style.height = Math.min(chatTextAreaElement.scrollHeight, 200) + 'px';
} chatTextAreaElement.focus();
}} }
/> }}
{:else} />
<div class="pt-2 pb-10"> {:else}
{#key chatId} <div class="pt-2 pb-10">
{#each messages as message, messageIdx} {#key chatId}
<div class=" w-full"> {#each messages as message, messageIdx}
<div <div class=" w-full">
class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null <div
? 'max-w-full' class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null
: 'max-w-3xl'} mx-auto rounded-lg group" ? 'max-w-full'
> : 'max-w-3xl'} mx-auto rounded-lg group"
{#if message.role === 'user'} >
<UserMessage {#if message.role === 'user'}
on:delete={() => messageDeleteHandler(message.id)} <UserMessage
user={$user} on:delete={() => messageDeleteHandler(message.id)}
{readOnly} user={$user}
{message} {readOnly}
isFirstMessage={messageIdx === 0} {message}
siblings={message.parentId !== null isFirstMessage={messageIdx === 0}
? history.messages[message.parentId]?.childrenIds ?? [] siblings={message.parentId !== null
: Object.values(history.messages) ? history.messages[message.parentId]?.childrenIds ?? []
.filter((message) => message.parentId === null) : Object.values(history.messages)
.map((message) => message.id) ?? []} .filter((message) => message.parentId === null)
{confirmEditMessage} .map((message) => message.id) ?? []}
{showPreviousMessage} {confirmEditMessage}
{showNextMessage} {showPreviousMessage}
copyToClipboard={copyToClipboardWithToast} {showNextMessage}
/> copyToClipboard={copyToClipboardWithToast}
{:else} />
<ResponseMessage {:else}
{message} <ResponseMessage
modelfiles={selectedModelfiles} {message}
siblings={history.messages[message.parentId]?.childrenIds ?? []} modelfiles={selectedModelfiles}
isLastMessage={messageIdx + 1 === messages.length} siblings={history.messages[message.parentId]?.childrenIds ?? []}
{readOnly} isLastMessage={messageIdx + 1 === messages.length}
{updateChatMessages} {readOnly}
{confirmEditResponseMessage} {updateChatMessages}
{showPreviousMessage} {confirmEditResponseMessage}
{showNextMessage} {showPreviousMessage}
{rateMessage} {showNextMessage}
copyToClipboard={copyToClipboardWithToast} {rateMessage}
{continueGeneration} copyToClipboard={copyToClipboardWithToast}
{regenerateResponse} {continueGeneration}
on:save={async (e) => { {regenerateResponse}
console.log('save', e); on:save={async (e) => {
console.log('save', e);
const message = e.detail;
history.messages[message.id] = message; const message = e.detail;
await updateChatById(localStorage.token, chatId, { history.messages[message.id] = message;
messages: messages, await updateChatById(localStorage.token, chatId, {
history: history messages: messages,
}); history: history
}} });
/> }}
{/if} />
{/if}
</div>
</div> </div>
</div> {/each}
{/each}
{#if bottomPadding}
{#if bottomPadding} <div class=" mb-10" />
<div class=" mb-10" /> {/if}
{/if} {/key}
{/key} </div>
</div> {/if}
{/if} </div>
src/lib/components/chat/Messages/Placeholder.svelte
View file @ 63182828
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</script> </script>
{#if models.length > 0} {#if models.length > 0}
<div class=" my-auto text-center pb-10 md:pb-32"> <div class=" text-center py-24 md:py-36">
<div class="m-auto max-w-3xl px-8"> <div class="m-auto max-w-3xl px-8">
<div class="flex justify-start mt-8"> <div class="flex justify-start mt-8">
<div class="flex -space-x-4 mb-0.5"> <div class="flex -space-x-4 mb-0.5">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment