app-gift/app-angular/src/modules/lesson/page-chat/page-chat.component.html

<div class="ion-page">
    <ion-header>
        <ion-toolbar>
            <ion-title>AI</ion-title>
        </ion-toolbar>
        <ion-segment value="all">
            <ion-segment-button value="all" (click)="changeTab('all')">
                <ion-label>AI情商课堂</ion-label>
            </ion-segment-button>
            <ion-segment-button value="favorites" (click)="changeTab('favorites')">
                <ion-label>社交虚拟形象制定</ion-label>
            </ion-segment-button>
        </ion-segment>
    </ion-header>
    <ion-content>

        <!-- AI人格 -->
        <ng-container *ngIf="currentTab === 'all'">

            <div class="page">
                <div class="chat-container">
                    <!--AI固定内容-->
                    <div class="message-container">
                        <img class="avatar-left"
                            src="../../../assets/jl.png"
                            alt="Avatar">
                        <div class="message-box-left">
                            <div class="message-content">
                                有什么我可以帮助你的吗？
                            </div>
                        </div>
                    </div>
                    <!--AI-->
                    <ng-container *ngFor="let msg of messageList">
                        <ng-container *ngIf="msg?.role === 'assistant'">
                            <div class="message-container">
                                <img class="avatar-left"
                                src="../../../assets/jl.png"
                                    alt="Avatar">
                                <div class="message-box-left">
                                    <div class="message-content">
                                        {{msg?.content}}
                                    </div>
                                </div>
                            </div>
                        </ng-container>
                        <ng-container *ngIf="msg?.role === 'user'">
                            <div class="message-container-mine">
                                <img class="avatar-right"
                                    [src]="currentUser?.get('avatar')||'https://pic2.zhimg.com/v2-45e3ca228438d1e4c3e98e38c8f8e4a4_r.jpg?source=1940ef5c'"
                                    alt="Avatar">
                                <div class="message-box-right">
                                    <div class="message-content">
                                        {{msg?.content}}
                                    </div>
                                </div>
                            </div>
                        </ng-container>
                    </ng-container>

                </div>

                <div class="footer">
                    <div class="send-container">
                        <input [(ngModel)]="userInput" type="text" class="message-input" placeholder="输入消息...">
                        <button class="send-button" (click)="send()">发送</button>
                    </div>

                </div>

            </div>

        </ng-container>
        <!-- 显示AI人格定制. -->
        <ng-container *ngIf="currentTab === 'favorites'">
            <ion-list>
                <h4 style="text-align: center;padding: 15px;">请填写以下信息，以便为你定制虚拟社交形象</h4>

                <ion-item>
                    <ion-select [value]="planOptions.gender" (ionChange)="setOption('gender',$event)" label="性别" placeholder=""cancelText="取消" okText="确定">
                        <ion-select-option value="女">女</ion-select-option>
                        <ion-select-option value="男">男</ion-select-option>
                        <ion-select-option value="未知">未知</ion-select-option>
                    </ion-select>
                </ion-item>
                <ion-item>
                    <ion-input label="称呼" type="number" placeholder=""></ion-input>
                </ion-item>
                <ion-item>
                    <ion-input label="身高（cm）" type="number" placeholder=""></ion-input>
                </ion-item>
                <ion-item>
                    <ion-input label="年龄（year）" type="number" placeholder=""></ion-input>
                </ion-item>
                <ion-item>
                    <ion-input label="技能&能力（skill）" type="string" placeholder=""></ion-input>
                </ion-item>
                <ion-item>
                    <ion-select [value]="planOptions.targets" (ionChange)="setOption('targets',$event)"
                        aria-label="object" placeholder="风格设定" [multiple]="true">
                        <ion-select-option value="慵懒休闲">成熟稳重</ion-select-option>
                        <ion-select-option value="活泼好动">自信坦荡</ion-select-option>
                        <ion-select-option value="独立自主">遇到困难就摆烂</ion-select-option>
                    </ion-select>
                </ion-item>
                <ion-item>
                    <ion-textarea label="你是否有其他信息或补充（如MBTI性格测试的结果）" labelPlacement="floating" placeholder=" "></ion-textarea>
                </ion-item>
            </ion-list>
            <!-- <div style="display: flex; justify-content: center;"> -->
            <ion-button (click)="sendPlan()" expand="block">生成</ion-button>
            <!-- </div> -->
            <div>
                <!--AI计划显示区-->
            </div>

        </ng-container>
        <div class="navfooter"> </div>
    </ion-content>
</div>