|
@@ -1,14 +1,103 @@
|
|
import { Component } from '@angular/core';
|
|
import { Component } from '@angular/core';
|
|
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
|
|
|
|
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
|
|
|
|
|
|
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonFooter, IonItem, IonInput, IonButton, IonIcon, IonSpinner } from '@ionic/angular/standalone';
|
|
|
|
+import { FormsModule } from '@angular/forms';
|
|
|
|
+import { NgClass, NgFor, NgIf } from '@angular/common';
|
|
|
|
+import { addIcons } from 'ionicons';
|
|
|
|
+import { send } from 'ionicons/icons';
|
|
|
|
+import { HttpClient, HttpHeaders } from '@angular/common/http';
|
|
|
|
+import Parse from 'parse';
|
|
|
|
+
|
|
|
|
+// 定义API响应类型
|
|
|
|
+interface ChatResponse {
|
|
|
|
+ reply: string;
|
|
|
|
+ [key: string]: any;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+interface ChatMessage {
|
|
|
|
+ content: string;
|
|
|
|
+ isUser: boolean;
|
|
|
|
+}
|
|
|
|
|
|
@Component({
|
|
@Component({
|
|
selector: 'app-tab1',
|
|
selector: 'app-tab1',
|
|
templateUrl: 'tab1.page.html',
|
|
templateUrl: 'tab1.page.html',
|
|
styleUrls: ['tab1.page.scss'],
|
|
styleUrls: ['tab1.page.scss'],
|
|
standalone: true,
|
|
standalone: true,
|
|
- imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
|
|
|
|
|
|
+ imports: [
|
|
|
|
+ IonHeader,
|
|
|
|
+ IonToolbar,
|
|
|
|
+ IonTitle,
|
|
|
|
+ IonContent,
|
|
|
|
+ IonFooter,
|
|
|
|
+ IonItem,
|
|
|
|
+ IonInput,
|
|
|
|
+ IonButton,
|
|
|
|
+ IonIcon,
|
|
|
|
+ IonSpinner,
|
|
|
|
+ FormsModule,
|
|
|
|
+ NgClass,
|
|
|
|
+ NgFor,
|
|
|
|
+ NgIf
|
|
|
|
+ ],
|
|
})
|
|
})
|
|
export class Tab1Page {
|
|
export class Tab1Page {
|
|
- constructor() {}
|
|
|
|
-}
|
|
|
|
|
|
+ messages: ChatMessage[] = [];
|
|
|
|
+ userInput: string = '';
|
|
|
|
+ isLoading: boolean = false;
|
|
|
|
+
|
|
|
|
+ constructor(private http: HttpClient) {
|
|
|
|
+ addIcons({ send });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ async sendMessage() {
|
|
|
|
+ if (this.userInput.trim() && !this.isLoading) {
|
|
|
|
+ this.isLoading = true;
|
|
|
|
+
|
|
|
|
+ // 添加用户消息
|
|
|
|
+ this.messages.push({
|
|
|
|
+ content: this.userInput,
|
|
|
|
+ isUser: true
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // 准备AI回复占位
|
|
|
|
+ this.messages.push({
|
|
|
|
+ content: '',
|
|
|
|
+ isUser: false
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ try {
|
|
|
|
+ // 使用直接的HTTP请求
|
|
|
|
+ const headers = new HttpHeaders({
|
|
|
|
+ 'X-Parse-Application-Id': 'ncloudmaster',
|
|
|
|
+ 'X-Parse-Session-Token': Parse.User.current()?.getSessionToken() || '',
|
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ const response = await this.http.post<ChatResponse>(
|
|
|
|
+ 'https://server.fmode.cn/api/apig/chat',
|
|
|
|
+ { message: this.userInput },
|
|
|
|
+ { headers }
|
|
|
|
+ ).toPromise();
|
|
|
|
+
|
|
|
|
+ console.log('API Response:', response);
|
|
|
|
+
|
|
|
|
+ // 更新AI回复
|
|
|
|
+ if (this.messages.length > 0 && response) {
|
|
|
|
+ const aiMessage = this.messages[this.messages.length - 1];
|
|
|
|
+ aiMessage.content = response.reply || '抱歉,我没有收到有效的回复。';
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ } catch (error) {
|
|
|
|
+ console.error('Chat Error:', error);
|
|
|
|
+
|
|
|
|
+ // 显示错误消息
|
|
|
|
+ if (this.messages.length > 0) {
|
|
|
|
+ this.messages[this.messages.length - 1].content = '抱歉,发生了一些错误,请稍后再试。';
|
|
|
|
+ }
|
|
|
|
+ } finally {
|
|
|
|
+ this.isLoading = false;
|
|
|
|
+ this.userInput = ''; // 清空输入框
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|