Use class directive
This commit is contained in:
		
							parent
							
								
									c2180589ac
								
							
						
					
					
						commit
						aa521d5a19
					
				|  | @ -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> | ||||
|  |  | |||
|  | @ -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; | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	 Niek van der Maas
						Niek van der Maas