Skip to content

Commit

Permalink
Support show toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
AiQL.com authored Oct 22, 2024
1 parent fb5ab61 commit 2e2f537
Showing 1 changed file with 75 additions and 38 deletions.
113 changes: 75 additions & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,9 +263,7 @@
<div id="lottie"></div>
</v-container>
<v-container v-else class="chat-bot">
<div class="message-area" v-for="message in messageStore.conversation">
<tuui-chat-box :message="message" :size="settingStore.avatarSize"></tuui-chat-box>
</div>
<tuui-chat-box :messages="messageStore.conversation" :size="settingStore.avatarSize"></tuui-chat-box>
<div class="fill-area"></div>
</v-container>
<div class="input-area">
Expand Down Expand Up @@ -655,35 +653,46 @@ <h5 class="font-weight-bold">{{ column.key }}</h5>
</div>

<template id="tuui-chat-box-template">
<div v-if="message.role === 'user'">
<div class="px-2 py-5 user-message">
<div class="message text-pre-wrap">
<v-avatar :size=size class="mt-3 mr-3 mr-lg-6" color="primary" icon="mdi-account-circle">
</v-avatar>
<tuui-chat-card class="gradient text-pre-wrap">
<v-card-text v-if="Array.isArray(message.content)">
<div v-for="(item, index) in message.content" :key="index">
<div v-if="item.type=='text'">{{ item.text }}</div>
<tuui-img-dialog v-if="item.type=='image_url'"
:src="item.image_url.url"></tuui-img-dialog>
</div>
</v-card-text>
<v-card-text v-else>
{{ message.content }}
</v-card-text>
</tuui-chat-card>
<div v-for="(message, index) in messages">
<div v-if="message.role === 'user'">
<div class="px-2 py-5 user-message">
<div class="message text-pre-wrap">
<v-avatar :size=size class="mt-3 mr-3 mr-lg-6" color="primary" icon="mdi-account-circle">
</v-avatar>
<tuui-chat-card class="gradient text-pre-wrap" :index="index" :messages="messages">
<v-card-text v-if="Array.isArray(message.content)">
<div v-for="(item, index) in message.content" :key="index">
<div v-if="item.type=='text'">{{ item.text }}</div>
<tuui-img-dialog v-if="item.type=='image_url'"
:src="item.image_url.url"></tuui-img-dialog>
</div>
</v-card-text>
<v-card-text v-else>
{{ message.content }}
</v-card-text>
</tuui-chat-card>
</div>
</div>
</div>
</div>
<div v-else>
<div class="px-2 py-5 assitant-message">
<div class="message">
<v-avatar :size=size class="mt-3 mr-3 mr-lg-6" color="teal" icon="mdi-lightning-bolt-circle">
</v-avatar>
<tuui-chat-card>
<md-preview :model-value="message.content" language="en-US" :code-foldable="true"
auto-fold-threshold="Infinity"></md-preview>
</tuui-chat-card>
<div v-else>
<div class="px-2 py-5 assitant-message">
<div class="message">
<v-avatar :size=size class="mt-3 mr-3 mr-lg-6" color="teal" icon="mdi-lightning-bolt-circle">
</v-avatar>
<tuui-chat-card :index="index" :messages="messages" :show-content="true">
<template v-slot:default="{ showcontent }">
<div v-if="showcontent">
<v-card-text style="white-space: pre-wrap;">
{{ message.content }}
</v-card-text>
</div>
<div v-else>
<md-preview :model-value="message.content" language="en-US" :code-foldable="true"
auto-fold-threshold="Infinity"></md-preview>
</div>
</template>
</tuui-chat-card>
</div>
</div>
</div>
</div>
Expand All @@ -692,7 +701,8 @@ <h5 class="font-weight-bold">{{ column.key }}</h5>
<template id="tuui-img-dialog-template">
<v-dialog>
<template v-slot:activator="{ props: activatorProps }">
<v-img class="history-images mb-3" v-bind="activatorProps" contain :src="src"></v-img>
<v-img class="history-images mb-3" position="left" min-width="100px" min-height="80px" width="50%"
height="50%" max-width="30vw" max-height="30vh" v-bind="activatorProps" :src="src"></v-img>
</template>
<template v-slot:default="{ isActive }">
<v-img @click="isActive.value = false" contain width="100%" height="100%" max-width="80vw"
Expand All @@ -704,33 +714,60 @@ <h5 class="font-weight-bold">{{ column.key }}</h5>
<template id="tuui-chat-card-template">
<v-hover>
<template v-slot:default="{ isHovering, props }">
<v-card v-bind="props" :elevation="isHovering ? 4 : 1">
<slot></slot>
<v-card v-bind="props" :elevation="isHovering ? 4 : 2">
<slot :showcontent="showcontent"></slot>
<v-expand-transition>
<div v-show="isHovering">
<v-divider></v-divider>
<v-card-actions class="ma-0">
<v-spacer></v-spacer>
<v-btn v-if="showDelete" color="error" icon="mdi-delete-off-outline" size="x-small"
variant="plain" @click="messages.splice(index, 1)"></v-btn>
<v-btn v-if="showContent" color="primary" icon="mdi-eye" size="x-small" variant="plain"
@click="showcontent = !showcontent" v-bind="showcontent"></v-btn>
</v-card-actions>
</div>
</v-expand-transition>
</v-card>
</template>
</v-hover>
</template>

<script type="module">
const { createApp, ref, computed, onMounted, watch, nextTick, axios, defineProps } = Vue
<script lang="ts" setup>
const { createApp, ref, computed, onMounted, watch, nextTick, axios, defineProps, defineComponent } = Vue
const { createVuetify } = Vuetify
const { createPinia, defineStore, storeToRefs } = Pinia

const TuuiImgDialog = {
template: '#tuui-img-dialog-template',
props: { src: { type: String, required: true } }
};
const TuuiChatCard = {


const TuuiChatCard = defineComponent({
template: '#tuui-chat-card-template',
};
props: {
index: { type: Number, required: true },
messages: { type: Object, required: true },
showDelete: { type: Boolean, default: true },
showContent: { type: Boolean, default: false },
},
setup() {
const showcontent = ref(false);

return {
showcontent,
};
}
});
const TuuiChatBox = {
template: '#tuui-chat-box-template',
components: {
TuuiImgDialog,
TuuiChatCard
},
props: {
message: { type: Object, required: true },
messages: { type: Object, required: true },
size: { type: Number }
}
};
Expand Down

0 comments on commit 2e2f537

Please # to comment.