enh: style assistant dialog

Signed-off-by: grnd-alt <github@belakkaf.net>

Author: grnd-alt

src/assistant/AssistantDialog.vue

@@ -30,6 +30,13 @@ export default defineComponent({
 			generatedElements: {},
 		}
 	},
+	watch: {
+		taskResponse() {
+			if (!this.waitingForTask) {
+				this.loadPreviewMermaid()
+			}
+		},
+	},
 	mounted() {
 		this.$nextTick(() => {
 			this.$refs.assistantDialog.focus()
@@ -47,6 +54,7 @@ export default defineComponent({
 			this.excalidrawApi.updateScene({
 				elements,
 			})
+			this.onCancel()
 		},
 		async loadPreviewMermaid() {
 			parseMermaidToExcalidraw(this.taskResponse).then(async (res) => {
@@ -77,50 +85,112 @@ export default defineComponent({
 </script>
 
 <template>
-	<NcModal v-if="show" :can-close="true" @close="onCancel">
+	<NcModal v-if="show"
+		:can-close="true"
+		size="large"
+		@close="onCancel">
 		<div class="assistant-dialog">
 			<div v-if="!waitingForTask && !taskResponse">
 				<NcTextField ref="assistantDialog"
 					v-model="assistantQuery"
 					label="Assistant"
 					type="text" />
-				<NcButton type="submit"
-					@click="onCancel">
-					Close
-				</NcButton>
-				<NcButton type="submit" @click="onSubmit">
-					submit
-				</NcButton>
+				<div class="dialog-buttons">
+					<NcButton type="submit"
+						@click="onCancel">
+						Close
+					</NcButton>
+					<NcButton type="submit" @click="onSubmit">
+						Generate
+					</NcButton>
+				</div>
 			</div>
 			<div v-else-if="!waitingForTask && taskResponse" class="preview-wrapper">
-				<NcTextArea v-model="taskResponse"
-					label="Generated mermaid"
-					type="text" />
-				<NcButton type="submit" @click="loadPreviewMermaid">
-					preview
-				</NcButton>
-				<div ref="canvasRef" class="assistant-mermaid-preview" />
-				<NcButton type="submit" @click="onLoadToEditor">
-					submit
-				</NcButton>
+				<div class="preview">
+					<NcTextArea v-model="taskResponse"
+						class="generated"
+						input-class="generated-input"
+						label="Generated mermaid"
+						resize="none"
+						type="text"
+						@change="loadPreviewMermaid" />
+					<div class="preview-canvas-wrapper">
+						<div ref="canvasRef" class="assistant-mermaid-preview" />
+					</div>
+				</div>
+				<div class="dialog-buttons">
+					<NcButton type="submit"
+						@click="() => taskResponse = ''">
+						back
+					</NcButton>
+					<NcButton type="submit" @click="onLoadToEditor">
+						submit
+					</NcButton>
+				</div>
 			</div>
 		</div>
 	</NcModal>
 </template>
-
-<style scoped>
-.preview-wrapper {
+<style>
+.assistant-mermaid-preview{
+	height: 100%;
+	canvas{
+		height: 100%;
+	}
+}
+.generated{
+	.textarea__main-wrapper{
+		height: 100%;
+	}
+	.textarea__input{
+		height: 100%;
+	}
+}
+</style>
+<style scoped lang="scss">
+.preview-button{
+	height: 1rem;
+}
+.assistant-dialog{
+	height: 100%;
 	display: flex;
 	flex-direction: column;
-	align-items: center;
+	justify-content: space-evenly;
+}
+.preview-wrapper{
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding: 15px;
+	padding-top: 30px;
+}
+
+.preview{
+	height: 90%;
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
 }
 
-.assistant-mermaid-preview {
-	margin-block: 20px;
-	align-self: flex-end;
+.generated{
+	width: 50%;
+	height: 100%;
 }
 
-.assistant-dialog {
-	padding-block: 25px;
+.preview-canvas-wrapper{
+	height: 100%;
+	width: 50%;
+	flex-grow: 1;
+	display: flex;
+	justify-content: center;
 }
+
+.dialog-buttons{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+}
+
 </style>