自定义AI页面

概述

自定义AI页面示例。

具体请查看examples/src/views/ai/Custom.vue

示例

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getUser, getAi } from 'reed-ui'
import router from '@/router'

const ai = getAi()
const messages = ref()

onMounted(() => {
    getUser().sign(() => { }, () => router.push('/sign/in'))
    ai.init(messages.value)
})
</script>

<template>
    <div class="ai">
        <reed-title :back="router.back" :label="ai.label" :center="true" :action="() => ai.history = true">
            <template #back>
                <grove-icon name="Close" />
            </template>
            <template #action>
                <grove-icon name="List" />
            </template>
        </reed-title>
        <div ref="messages" class="messages">
            <reed-ai-messages />
        </div>
        <div class="input">
            <reed-ai-input>
                <template #send>
                    <grove-icon name="Promotion" />
                </template>
                <template #stop>
                    <grove-icon name="More" />
                </template>
            </reed-ai-input>
        </div>
    </div>
    <reed-ai-history />
</template>

<style scoped>
.ai {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .messages {
        flex-grow: 1;
        overflow: auto;
    }

    .input {
        padding: 8px;
    }
}
</style>