Skip to content
Snippets Groups Projects
Commit 04848534 authored by Denys Mishunov's avatar Denys Mishunov :palm_tree:
Browse files

Merge branch 'tanuki-bot-textarea-height' into 'master'

GitLab Chat: Add ability to change height of input

See merge request !121238



Merged-by: Denys Mishunov's avatarDenys Mishunov <dmishunov@gitlab.com>
Approved-by: default avatarAnnabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Denys Mishunov's avatarDenys Mishunov <dmishunov@gitlab.com>
Reviewed-by: Denys Mishunov's avatarDenys Mishunov <dmishunov@gitlab.com>
Co-authored-by: default avatarSascha Eggenberger <seggenberger@gitlab.com>
parents 41923cf9 e446468e
No related branches found
No related tags found
1 merge request!121238GitLab Chat: Add ability to change height of input
Pipeline #879273128 passed
......@@ -4,7 +4,7 @@ import {
GlAlert,
GlBadge,
GlFormInputGroup,
GlFormInput,
GlFormTextarea,
GlForm,
GlIcon,
} from '@gitlab/ui';
......@@ -20,7 +20,7 @@ export default {
GlAlert,
GlBadge,
GlFormInputGroup,
GlFormInput,
GlFormTextarea,
GlForm,
GlIcon,
AiGenieLoader,
......@@ -198,18 +198,25 @@ export default {
>
<gl-form @submit.stop.prevent="sendChatPrompt">
<gl-form-input-group>
<gl-form-input
v-model="prompt"
data-testid="chat-prompt-input"
:placeholder="$options.i18n.GENIE_CHAT_PROMPT_PLACEHOLDER"
:disabled="isLoading"
/>
<div
class="ai-genie-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base"
:data-value="prompt"
>
<gl-form-textarea
v-model="prompt"
data-testid="chat-prompt-input"
class="gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!"
:placeholder="$options.i18n.GENIE_CHAT_PROMPT_PLACEHOLDER"
:disabled="isLoading"
@keydown.enter.exact.prevent="sendChatPrompt"
/>
</div>
<template #append>
<gl-button
icon="paper-airplane"
category="primary"
variant="info"
class="gl-border-l-0"
class="gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-top-left-base!"
type="submit"
:disabled="isLoading"
/>
......
......@@ -73,3 +73,29 @@
transform: scale(1);
}
}
.ai-genie-chat-input {
display: inline-grid;
&:focus-within {
@include gl-focus($color: $gray-900);
}
.gl-form-textarea.form-control,
&::after {
grid-area: 2/1;
resize: none;
max-height: 240px;
}
.gl-form-textarea.form-control {
width: calc(100% - 40px);
}
&::after {
content: attr(data-value) ' ';
@include gl-visibility-hidden;
@include gl-white-space-pre-wrap;
@include gl-py-4;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment