Skip to content

Commit

Permalink
Fix ChatBot DarkMode Display Bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@yangjiakai
yangjiakai committed Jul 4, 2023
1 parent 8e616dc commit bf7021b
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 25 deletions.
61 changes: 47 additions & 14 deletions src/views/chatgpt/ChatBotV1.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,6 @@ const handleKeydown = (e) => {
}
};


const inputRow = ref(1);
</script>

Expand All @@ -171,18 +170,30 @@ const inputRow = ref(1);
</v-avatar>
<v-card class="gradient gray text-pre-wrap" theme="dark">
<v-card-text>
<b> {{ message.content }}</b></v-card-text>
<b> {{ message.content }}</b></v-card-text
>
</v-card>
</div>
</div>
<div v-else>
<div class="pa-2 pa-md-5 assistant-message">
<v-avatar class="d-none d-md-block mr-2 mr-md-4" rounded="sm" variant="elevated">
<img src="@/assets/images/avatars/avatar_assistant.jpg" alt="alt" />
<v-avatar
class="d-none d-md-block mr-2 mr-md-4"
rounded="sm"
variant="elevated"
>
<img
src="@/assets/images/avatars/avatar_assistant.jpg"
alt="alt"
/>
</v-avatar>
<v-card>
<div>
<md-editor v-model="message.content" class="font-1" previewOnly />
<md-editor
v-model="message.content"
class="font-1"
previewOnly
/>
</div>
</v-card>
</div>
Expand All @@ -204,22 +215,46 @@ const inputRow = ref(1);
</div>
</div>
<div class="input-area">
<v-sheet color="transparent" elevation="0" class="input-panel d-flex align-end pa-1">
<v-btn class="mb-1" variant="elevated" icon @click="chatGPTStore.configDialog = true">
<v-sheet
color="transparent"
elevation="0"
class="input-panel d-flex align-end pa-1"
>
<v-btn
class="mb-1"
variant="elevated"
icon
@click="chatGPTStore.configDialog = true"
>
<v-icon size="30" class="text-primary">mdi-cog-outline</v-icon>
<v-tooltip activator="parent" location="top" text="ChatGPT Config"></v-tooltip>
<v-tooltip
activator="parent"
location="top"
text="ChatGPT Config"
></v-tooltip>
</v-btn>
<transition name="fade">
<v-textarea class="mx-2" color="primary" type="text" clearable variant="solo" ref="input" v-model="userMessage"
placeholder="Ask Anything" hide-details @keydown="handleKeydown" :rows="inputRow" @focus="inputRow = 3"
@blur="inputRow = 1">
<v-textarea
class="mx-2"
color="primary"
type="text"
clearable
variant="solo"
ref="input"
v-model="userMessage"
placeholder="Ask Anything"
hide-details
@keydown="handleKeydown"
:rows="inputRow"
@focus="inputRow = 3"
@blur="inputRow = 1"
>
</v-textarea>
</transition>

<v-btn class="mb-1" color="primary" variant="elevated" icon>
<v-icon @click="sendMessage">mdi-send</v-icon>
</v-btn>

</v-sheet>
<ApiKeyDialog />
</div>
Expand All @@ -228,7 +263,6 @@ const inputRow = ref(1);

<style scoped lang="scss">
.chat-bot {
background-image: url("@/assets/images/chat-bg-2.png");
background-repeat: repeat;
height: 100%;
display: flex;
Expand Down Expand Up @@ -303,7 +337,6 @@ const inputRow = ref(1);
}

@media screen and (max-width: 768px) {

:deep(#md-editor-v3-preview),
.user-message {
font-size: 14px !important;
Expand Down
52 changes: 41 additions & 11 deletions src/views/chatgpt/ChatBotV2.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,10 @@ const inputRow = ref(1);
<div class="pa-5 user-message">
<div class="message align-center text-pre-wrap">
<v-avatar class="mr-4 mr-lg-8">
<img src="@/assets/images/avatars/avatar_user.jpg" alt="alt" />
<img
src="@/assets/images/avatars/avatar_user.jpg"
alt="alt"
/>
</v-avatar>
<span> {{ message.content }}</span>
</div>
Expand All @@ -173,7 +176,10 @@ const inputRow = ref(1);
<div class="pa-5 assitant-message">
<div class="message">
<v-avatar class="mr-4 mr-lg-8">
<img src="@/assets/images/avatars/avatar_assistant.jpg" alt="alt" />
<img
src="@/assets/images/avatars/avatar_assistant.jpg"
alt="alt"
/>
</v-avatar>
<md-editor v-model="message.content" previewOnly />
</div>
Expand All @@ -189,20 +195,45 @@ const inputRow = ref(1);
</div>
</div>
<div class="input-area">
<v-sheet elevation="0" class="input-panel d-flex align-end pa-1" max-width="1200">
<v-btn class="mb-1" variant="elevated" icon @click="chatGPTStore.configDialog = true">
<v-sheet
elevation="0"
class="input-panel d-flex align-end pa-1"
max-width="1200"
color="transparent"
>
<v-btn
class="mb-1"
variant="elevated"
icon
@click="chatGPTStore.configDialog = true"
>
<v-icon size="30" class="text-primary">mdi-cog-outline</v-icon>
<v-tooltip activator="parent" location="top" text="ChatGPT Config"></v-tooltip>
<v-tooltip
activator="parent"
location="top"
text="ChatGPT Config"
></v-tooltip>
</v-btn>
<v-textarea class="mx-2" color="primary" type="text" clearable variant="solo" ref="input" v-model="userMessage"
placeholder="Ask Me Anything" hide-details @keydown="handleKeydown" no-resize :rows="inputRow"
@focus="inputRow = 3" @blur="inputRow = 1">

<v-textarea
class="mx-2"
color="primary"
type="text"
clearable
variant="solo"
ref="input"
v-model="userMessage"
placeholder="Ask Me Anything"
hide-details
@keydown="handleKeydown"
no-resize
:rows="inputRow"
@focus="inputRow = 3"
@blur="inputRow = 1"
>
</v-textarea>
<v-btn class="mb-1" color="primary" variant="elevated" icon>
<v-icon @click="sendMessage">mdi-send</v-icon>
</v-btn>

</v-sheet>
<ApiKeyDialog />
</div>
Expand All @@ -211,7 +242,6 @@ const inputRow = ref(1);

<style scoped lang="scss">
.chat-bot {
background-color: #fcfcfe;
height: 100%;
display: flex;
flex-direction: column;
Expand Down

0 comments on commit bf7021b

Please sign in to comment.