Use class directive

This commit is contained in:
Niek van der Maas 2023-03-06 11:57:38 +01:00
parent c2180589ac
commit aa521d5a19
2 changed files with 12 additions and 8 deletions

View File

@ -17,7 +17,7 @@
<strong>private</strong>. You can also close the browser tab and come back later to continue the conversation.
</div>
</article>
<article class="message {!apiKey ? 'is-danger' : 'is-warning'}">
<article class="message" class:is-danger={!apiKey} class:is-warning={apiKey}>
<div class="message-body">
Set your OpenAI API key below:
@ -28,7 +28,7 @@
}}
>
<p class="control is-expanded">
<input aria-label="OpenAI API key" type="password" class="input {!apiKey ? 'is-danger' : ''}" value={apiKey} />
<input aria-label="OpenAI API key" type="password" class="input" class:is-danger={!apiKey} value={apiKey} />
</p>
<p class="control">
<button class="button is-info" type="submit">Save</button>

View File

@ -19,9 +19,9 @@
<li>
<a
href={"#"}
class="panel-block {!apiKey ? 'is-disabled' : ''} {activeChatId === chat.id
? 'has-background-light'
: ''}"
class="panel-block"
class:is-disabled={!apiKey}
class:has-background-light={activeChatId === chat.id}
on:click|preventDefault={() => (activeChatId = chat.id)}>{chat.name || `Chat ${chat.id}`}</a
>
</li>
@ -35,7 +35,9 @@
<li>
<a
href={"#"}
class="panel-block {!apiKey ? 'is-disabled' : ''} {activeChatId ? '' : 'has-background-light'}"
class="panel-block"
class:is-disabled={!apiKey}
class:has-background-light={!activeChatId}
on:click|preventDefault={() => {
activeChatId = null;
}}><span class="greyscale mr-2">🔑</span> API key</a
@ -44,7 +46,8 @@
<li>
<a
href={"#"}
class="panel-block {!apiKey ? 'is-disabled' : ''}"
class="panel-block"
class:is-disabled={!apiKey}
on:click|preventDefault={() => {
activeChatId = addChat();
}}><span class="greyscale mr-2"></span> New chat</a
@ -53,7 +56,8 @@
<li>
<a
href={"#"}
class="panel-block {!apiKey ? 'is-disabled' : ''}"
class="panel-block"
class:is-disabled={!apiKey}
on:click|preventDefault={() => {
clearChats();
activeChatId = null;