59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<template>
|
|
<svg
|
|
id="messenger"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
@click="emittMessage"
|
|
>
|
|
<AI />
|
|
<MessageRenderer />
|
|
<InputItem />
|
|
<TitleBar />
|
|
</svg>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, inject } from "vue";
|
|
import AI from "../AI/index.vue";
|
|
import InputItem from "./UIDetails/inputItem.vue";
|
|
import TitleBar from "./UIDetails/titleBar.vue";
|
|
import Messages from "./UIDetails/messages";
|
|
import MessageRenderer from "./UIDetails/messageRenderer.vue";
|
|
import { Mitt } from "@/types/mitt/index";
|
|
export default defineComponent({
|
|
name: "UIindex",
|
|
components: { AI, MessageRenderer, InputItem, TitleBar },
|
|
setup() {
|
|
const messages = Messages;
|
|
const count = ref(0);
|
|
|
|
// imports mitt Emitter safely
|
|
let emitter: Mitt;
|
|
const emitterInject: Mitt | undefined = inject("mitt");
|
|
if (emitterInject) emitter = emitterInject;
|
|
|
|
function emittMessage() {
|
|
if (count.value < messages.length) {
|
|
emitter.emit("renderMessage", messages[count.value]);
|
|
count.value++;
|
|
return;
|
|
}
|
|
}
|
|
|
|
return {
|
|
emittMessage,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#messenger {
|
|
width: 350px;
|
|
height: 500px;
|
|
background-color: #e6e6e6;
|
|
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
|
|
border-radius: 20px;
|
|
}
|
|
</style>
|