From abb7006874b332c95734df6347cef432f165594a Mon Sep 17 00:00:00 2001
From: kibumpark <top5w5@naver.com>
Date: Fri, 27 Dec 2024 16:10:13 +0900
Subject: [PATCH] =?UTF-8?q?auto=20modeling=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/global-style.css                       |  3 --
 .../designer/modeling/AutoModelingDialog.vue  | 54 ++++++++++++-------
 .../modeling/generators/CJMDialoger.vue       |  2 +-
 .../modeling/generators/ESDialoger.vue        |  4 +-
 .../modeling/generators/UIWizardDialoger.vue  | 10 ++--
 .../modeling/generators/UMLDialoger.vue       |  2 +-
 6 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/public/global-style.css b/public/global-style.css
index 8592399c..25b5cf26 100644
--- a/public/global-style.css
+++ b/public/global-style.css
@@ -710,10 +710,7 @@ code[class*=language-]:nth-child(1) {
 
 .auto-modeling-user-story-card {
     white-space: pre !important;
-    margin: 10px !important;
     margin-bottom: -10px !important;
-    float: right !important;
-    width: 90% !important;
 }
 
 .lab-list-group-box .v-list-group__items{
diff --git a/src/components/designer/modeling/AutoModelingDialog.vue b/src/components/designer/modeling/AutoModelingDialog.vue
index 9225f802..79bfd9e9 100644
--- a/src/components/designer/modeling/AutoModelingDialog.vue
+++ b/src/components/designer/modeling/AutoModelingDialog.vue
@@ -14,18 +14,19 @@
                     </v-chip>
                 </v-col>
             </v-row>
-            <v-card-text style="font-weight: 500;">
-                <v-text-field
+            <v-card-text class="pt-2 pb-2" style="font-weight: 500;">
+                <v-textarea
                     class="auto-modeling-text"
-                    style="margin-bottom: -30px;"
                     v-model="projectInfo.prompt"
                     solo
                     :placeholder="$t('autoModeling.mainClick')"
                     :label="$t('autoModeling.main1')"
                     :append-icon="startTemplateGenerate ? 'mdi-spin mdi-loading':'mdi-auto-fix'"
                     @click:append="openProjectDialog()"
-                    @keydown.enter="openProjectDialog()"
-                ></v-text-field>
+                    @keydown="openProjectDialogHandleKeydown"
+                    auto-grow
+                    :rows="1"
+                ></v-textarea>
             </v-card-text>
         </v-card>
 
@@ -48,19 +49,24 @@
                             </v-row>
 
                             <!-- autofocus -->
-                            <v-text-field class="auto-modeling-input"
-                                v-model="projectInfo.prompt"
-                                style="margin-bottom: -30px; padding: 10px; width: 80%; float: right; margin-top: 10px;"
-                                :style="!openAiResult && openAiResult == '' ? 'margin-top: 15px;':''"
-                                solo
-                                :hint="$t('autoModeling.mainClick')"
-                                persistent-hint
-                                :label="$t('autoModeling.main2')"
-                                :append-icon="startTemplateGenerate ? 'mdi-spin mdi-loading':'mdi-auto-fix'"
-                                @click:append="startGen(genType)"
-                                @keydown.enter="startGen(genType)"
-                            ></v-text-field>
-                            <div v-if="openChatUI" style="margin-left: 10px; margin-top: 100px;">
+                            <v-row class="pt-2 pb-2">
+                                <v-spacer></v-spacer>
+                                <v-textarea class="auto-modeling-input"
+                                    v-model="projectInfo.prompt"
+                                    style="padding: 10px; width: 80%;"
+                                    :style="!openAiResult && openAiResult == '' ? 'margin-top: 15px;':''"
+                                    solo
+                                    :hint="$t('autoModeling.mainClick')"
+                                    persistent-hint
+                                    :label="$t('autoModeling.main2')"
+                                    :append-icon="startTemplateGenerate ? 'mdi-spin mdi-loading':'mdi-auto-fix'"
+                                    @click:append="startGen(genType)"
+                                    @keydown="startGenHandleKeydown(genType)"
+                                    auto-grow
+                                    :rows="1"
+                                ></v-textarea>
+                            </v-row>
+                            <div v-if="openChatUI">
                                 <v-col style="padding:0px;">
                                     <v-card style="display:inline-block; background-color: #DAF5FF;">
                                         <v-card-text class="auto-modeling-message">
@@ -444,6 +450,18 @@
             });
         },
         methods: {
+            startGenHandleKeydown(genType) {
+                if (event.key === 'Enter' && !event.shiftKey) {
+                    event.preventDefault(); // 기본 Enter 동작 방지
+                    this.startGen(genType) // 메서드 실행
+                }
+            },
+            openProjectDialogHandleKeydown(event) {
+                if (event.key === 'Enter' && !event.shiftKey) {
+                    event.preventDefault(); // 기본 Enter 동작 방지
+                    this.openProjectDialog(); // 메서드 실행
+                }
+            },
             setAutoModelingText(inputAutoModelingChip) {
                 var me = this
                 me.projectInfo.prompt = inputAutoModelingChip;
diff --git a/src/components/designer/modeling/generators/CJMDialoger.vue b/src/components/designer/modeling/generators/CJMDialoger.vue
index 047d6fde..634222bf 100644
--- a/src/components/designer/modeling/generators/CJMDialoger.vue
+++ b/src/components/designer/modeling/generators/CJMDialoger.vue
@@ -1,6 +1,6 @@
 <template>
     <div style="margin-top: 10px;">        
-        <div class="auto-modeling-message-border">
+        <div>
             <v-card class="auto-modeling-message-card">
                 <v-card-text class="auto-modeling-message">
                     <vue-typed-js 
diff --git a/src/components/designer/modeling/generators/ESDialoger.vue b/src/components/designer/modeling/generators/ESDialoger.vue
index f97f8263..7dc60a79 100644
--- a/src/components/designer/modeling/generators/ESDialoger.vue
+++ b/src/components/designer/modeling/generators/ESDialoger.vue
@@ -1,6 +1,6 @@
 <template>
     <div style="margin-top: 10px;">
-        <div class="auto-modeling-message-border">
+        <div>
             <v-col class="auto-modeling-message-box">
                 <v-card class="auto-modeling-message-card">
                     <v-card-text class="auto-modeling-message">
@@ -31,7 +31,7 @@
             </v-col>
         </div>
         <div style="display: flex; flex-direction: column;">
-            <v-card v-if="!state.secondMessageIsTyping" class="auto-modeling-user-story-card">
+            <v-card v-if="!state.secondMessageIsTyping">
                 <v-card-subtitle>{{$t('autoModeling.explanation')}}</v-card-subtitle>
                 <v-card-text class="auto-modling-textarea">
                     <v-textarea 
diff --git a/src/components/designer/modeling/generators/UIWizardDialoger.vue b/src/components/designer/modeling/generators/UIWizardDialoger.vue
index cf07e1fd..50d28661 100644
--- a/src/components/designer/modeling/generators/UIWizardDialoger.vue
+++ b/src/components/designer/modeling/generators/UIWizardDialoger.vue
@@ -13,7 +13,7 @@
         </v-tabs>
         <v-tabs-items v-model="tab">
             <v-tab-item key="mainIamge">
-                <div class="auto-modeling-message-border">
+                <div>
                     <v-row style="margin-top:0px; margin-left: 0px;">
                         <v-card class="auto-modeling-message-card"
                                     style="margin-top:10px; margin-bottom: 10px;">
@@ -91,7 +91,7 @@
                 </v-tabs>
                 <v-tabs-items v-model="paletteTab">
                     <v-tab-item key="AI color Palettes">
-                        <div class="auto-modeling-message-border">
+                        <div>
                             <v-card class="auto-modeling-message-card"
                                         style="margin-top:10px;">
                                 <v-card-text class="auto-modeling-message">
@@ -293,7 +293,7 @@
                 </v-tabs-items>
             </v-tab-item>
             <v-tab-item key="fonts">
-                <div class="auto-modeling-message-border">
+                <div>
                     <v-card class="auto-modeling-message-card"
                                 style="margin-top:10px;">
                         <v-card-text class="auto-modeling-message">
@@ -344,7 +344,7 @@
             </v-tab-item>
 
             <v-tab-item key="menuImages" v-if="cachedModels.ESGenerator">
-                <div class="auto-modeling-message-border" v-for="(aggregate, key) in aggregates" :key="aggregate.name">
+                <div v-for="(aggregate, key) in aggregates" :key="aggregate.name">
                     <v-row style="position: relative; right: -8%; margin-bottom: 0px;">
                         <v-card class="auto-modeling-user-story-card" style="bottom: 10px; top: -5px;">
                             <v-card-subtitle>Image description for {{aggregate.name}}</v-card-subtitle>
@@ -394,7 +394,7 @@
             </v-tab-item>
 
             <v-tab-item key="menuUiStyles" v-if="cachedModels.ESGenerator">
-                <div class="auto-modeling-message-border" v-for="(aggregate, key) in aggregates" :key="aggregate.name">
+                <div v-for="(aggregate, key) in aggregates" :key="aggregate.name">
                     <v-row style="position: relative; right: -8%; margin-bottom: 0px;">
                         <v-card class="auto-modeling-user-story-card" style="bottom: 10px; top: -5px;">
                             <v-card-subtitle>UI Style for {{aggregate.name}}</v-card-subtitle>
diff --git a/src/components/designer/modeling/generators/UMLDialoger.vue b/src/components/designer/modeling/generators/UMLDialoger.vue
index 1c1bfe66..4652bfc2 100644
--- a/src/components/designer/modeling/generators/UMLDialoger.vue
+++ b/src/components/designer/modeling/generators/UMLDialoger.vue
@@ -1,6 +1,6 @@
 <template>
     <div style="margin-top: 10px;">
-        <div class="auto-modeling-message-border">
+        <div>
             <v-col class="auto-modeling-message-box">
                 <v-card class="auto-modeling-message-card">
                     <v-card-text class="auto-modeling-message">