add loading icon when chat is thinking, fix conversation header style

Signed-off-by: Julien Veyssier <[email protected]>
nextcloud · Jul 12, 2024 · e0df3f8 · e0df3f8
1 parent 1f9474c
commit e0df3f8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/components/ChattyLLM/ChattyLLMInputForm.vue b/src/components/ChattyLLM/ChattyLLMInputForm.vue
@@ -641,14 +641,17 @@ export default {
 
 		&--close {
 			.app-navigation-toggle-wrapper {
-				margin-right: -38px !important;
+				margin-right: -33px !important;
 			}
 		}
 
 		&--close ~ .session-area {
 			.session-area__chat-area, .session-area__input-area {
 				padding-left: 0 !important;
 			}
+			.session-area__top-bar {
+				padding-left: 36px !important;
+			}
 		}
 	}
 
@@ -719,6 +722,7 @@ export default {
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
+			gap: 4px;
 			position: sticky;
 			top: 0;
 			height: calc(var(--default-clickable-area) + var(--default-grid-baseline) * 2);

diff --git a/src/components/ChattyLLM/EditableTextField.vue b/src/components/ChattyLLM/EditableTextField.vue
@@ -19,6 +19,7 @@
 			:maxlength="maxLength"
 			:disabled="loading"
 			:placeholder="placeholder"
+			:label-outside="true"
 			@keydown.enter="handleSubmitText"
 			@keydown.esc="handleCancelEditing" />
 		<template v-if="!loading">
@@ -166,11 +167,16 @@ export default {
 <style lang="scss" scoped>
 .editable-text-field {
 	display: flex;
-	width: 100%;
+	//width: 100%;
 	overflow: hidden;
 	position: relative;
 	min-height: var(--default-clickable-area);
 	align-items: center;
+	gap: 4px;
+
+	> div.input-field {
+		margin: 0 0 0 6px !important;
+	}
 
 	&__edit {
 		margin-left: var(--default-clickable-area);
@@ -179,6 +185,7 @@ export default {
 	&__output {
 		width: 100%;
 		padding: 10px;
+		margin: 0 !important;
 		line-height: var(--default-line-height) !important;
 	}
 

diff --git a/src/components/ChattyLLM/InputArea.vue b/src/components/ChattyLLM/InputArea.vue
@@ -20,7 +20,8 @@
 				type="primary"
 				@click="$emit('submit', $event)">
 				<template #icon>
-					<SendIcon :size="20" />
+					<NcLoadingIcon v-if="loading.llmGeneration" />
+					<SendIcon v-else :size="20" />
 				</template>
 			</NcButton>
 		</div>
@@ -32,6 +33,7 @@ import SendIcon from 'vue-material-design-icons/Send.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 /*
 maxlength calculation (just a rough estimate):
@@ -48,6 +50,7 @@ export default {
 
 		NcButton,
 		NcRichContenteditable,
+		NcLoadingIcon,
 	},
 
 	props: {