소스 검색

peat:app2.5

19136808282 4 달 전
부모
커밋
b253c2154b
35개의 변경된 파일2046개의 추가작업 그리고 3개의 파일을 삭제
  1. 22 0
      .history/Mind-app/src/app/page-companion/page-companion.component.spec_20241201180725.ts
  2. 30 0
      .history/Mind-app/src/app/page-companion/page-companion.component.spec_20241201201525.ts
  3. 37 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201201336.html
  4. 65 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201201338.ts
  5. 83 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201201339.scss
  6. 37 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201201356.html
  7. 37 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201201357.html
  8. 65 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201202001.ts
  9. 70 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201204531.ts
  10. 87 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201204533.scss
  11. 73 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201205537.ts
  12. 37 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201205743.html
  13. 47 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201210052.html
  14. 47 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201210130.html
  15. 73 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201210453.ts
  16. 74 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201210950.ts
  17. 74 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201211532.ts
  18. 73 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201211653.ts
  19. 45 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201212246.html
  20. 40 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201212439.html
  21. 77 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201212754.ts
  22. 76 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201212952.ts
  23. 76 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201212953.ts
  24. 76 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201213213.ts
  25. 77 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201213248.ts
  26. 41 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201213255.html
  27. 39 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201213637.html
  28. 73 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201213711.ts
  29. 87 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201213925.scss
  30. 89 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201214319.scss
  31. 89 0
      .history/Mind-app/src/app/page-companion/page-companion.component_20241201214621.scss
  32. 21 1
      Mind-app/src/app/page-companion/page-companion.component.html
  33. 52 0
      Mind-app/src/app/page-companion/page-companion.component.scss
  34. 8 0
      Mind-app/src/app/page-companion/page-companion.component.spec.ts
  35. 49 2
      Mind-app/src/app/page-companion/page-companion.component.ts

+ 22 - 0
.history/Mind-app/src/app/page-companion/page-companion.component.spec_20241201180725.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PageCompanionComponent } from './page-companion.component';
+
+describe('PageCompanionComponent', () => {
+  let component: PageCompanionComponent;
+  let fixture: ComponentFixture<PageCompanionComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [PageCompanionComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageCompanionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

+ 30 - 0
.history/Mind-app/src/app/page-companion/page-companion.component.spec_20241201201525.ts

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PageCompanionComponent } from './page-companion.component';
+
+describe('PageCompanionComponent', () => {
+  let component: PageCompanionComponent;
+  let fixture: ComponentFixture<PageCompanionComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [PageCompanionComponent],
+      
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageCompanionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should add user message to messages array', () => {
+    component.userInput = 'Hello, I need help';
+    component.sendMessage();
+    expect(component.messages.length).toBe(1);
+    expect(component.messages[0].role).toBe('user');
+  });
+});

+ 37 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201201336.html

@@ -0,0 +1,37 @@
+
+<ion-header [translucent]="true">
+  <div class="button-container">
+  <ion-button (click)="goTab1()" fill="clear"  class="custom-button daily-button"><ion-icon name="chevron-back" slot="start"></ion-icon>返回</ion-button>
+  </div>
+
+  <ion-toolbar>
+    <ion-title >
+    <div style="display: flex; align-items: center; justify-content: center;  margin: auto;">
+     <ion-icon name="heart" style="color: rgb(250, 222, 222); font-size: 18px; "></ion-icon>
+      <span style="color: rgb(250, 222, 222); font-size: 18px; margin-left: 2px;">心灵陪伴</span>
+    </div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="chat-container">
+  <h1 class="chat-title">心理咨询聊天</h1>
+
+  <!-- 消息列表 -->
+  <div class="messages">
+    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <p>{{ message.content }}</p>
+    </div>
+  </div>
+
+  <!-- 输入区域 -->
+  <div class="input-area">
+    <ion-input 
+      [(ngModel)]="userInput" 
+      (ionInput)="onInputChange($event)" 
+      placeholder="请分享您的感受或问题" 
+      clearInput
+    ></ion-input>
+    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
+  </div>
+</ion-content>

+ 65 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201201338.ts

@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion } from 'fmode-ng';
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  // 用户输入变化
+  onInputChange(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+  // 发送消息
+  sendMessage() {
+    if (!this.userInput.trim()) return; // 确保输入不为空
+
+    // 添加用户消息到消息列表
+    this.messages.push({ role: 'user', content: this.userInput });
+
+    // 调用 AI 接口
+    const promptTemplate = `
+      作为一名专业的心理咨询师,请您根据用户的描述提供情感疏导和建议。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    const completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 添加 AI 消息到消息列表
+      this.messages.push({ role: 'ai', content: message.content });
+      // 清空用户输入框
+      this.userInput = '';
+    });
+  }
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 83 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201201339.scss

@@ -0,0 +1,83 @@
+.button-container {
+  position: absolute; /* 绝对定位 */
+  top: 8px; /* 距离顶部的距离 */
+  left: 6px; /* 距离左侧的距离 */
+  display: flex; /* 使用flexbox布局 */
+  flex-direction: row; /* 垂直排列 */
+}
+
+.custom-button {
+  font-size: 14px; /* 按钮字体大小 */
+  border-radius: 6px; /* 圆角按钮 */
+  color: rgb(250, 222, 222); /* 字体颜色 */
+  transition: opacity 0.3s, color 0.3s; /* 添加过渡效果 */
+  
+}
+
+/* 添加按钮的悬停效果 */
+.custom-button:hover {
+  opacity: 0.5 !important; /* 悬停时透明度变化 */
+  color:aqua !important;
+}
+
+ion-content {
+    --background: #ffcccb; /* 设置背景颜色为粉色 */
+    color: black; /* 设置文本颜色为黑色,确保可读性 */
+  }
+  ion-header {
+    background-color: #f19595; /* 设置背景颜色为淡粉色 */
+    color: black; /* 设置文本颜色为黑色 */
+    
+  }
+  
+  ion-toolbar {
+    --background: transparent; /* 如果需要透明效果,可以设置为透明 */
+   width: 200px;
+    margin: auto;
+  }
+  .chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 10px;
+    background-color: #f0f0f0;
+  }
+  
+  .chat-title {
+    text-align: center;
+    margin: 10px 0;
+  }
+  
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .user-message {
+    text-align: right;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border-radius: 10px;
+    display: inline-block;
+  }
+  
+  .ai-message {
+    text-align: left;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    display: inline-block;
+  }
+  
+  .input-area {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+  }

+ 37 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201201356.html

@@ -0,0 +1,37 @@
+
+<ion-header [translucent]="true">
+  <div class="button-container">
+  <ion-button (click)="goTab1()" fill="clear"  class="custom-button daily-button"><ion-icon name="chevron-back" slot="start"></ion-icon>返回</ion-button>
+  </div>
+
+  <ion-toolbar>
+    <ion-title >
+    <div style="display: flex; align-items: center; justify-content: center;  margin: auto;">
+     <ion-icon name="heart" style="color: rgb(250, 222, 222); font-size: 18px; "></ion-icon>
+      <span style="color: rgb(250, 222, 222); font-size: 18px; margin-left: 2px;">心灵陪伴</span>
+    </div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="chat-container">
+  <h1 class="chat-title">心理咨询聊天</h1>
+
+  <!-- 消息列表 -->
+  <div class="messages">
+    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <p>{{ message.content }}</p>
+    </div>
+  </div>
+
+  <!-- 输入区域 -->
+  <div class="input-area">
+    <ion-input 
+      [(ngModel)]="userInput" 
+      (ionInput)="onInputChange($event)" 
+      placeholder="请分享您的感受或问题" 
+      clearInput
+    ></ion-input>
+    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
+  </div>
+</ion-content>

+ 37 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201201357.html

@@ -0,0 +1,37 @@
+
+<ion-header [translucent]="true">
+  <div class="button-container">
+  <ion-button (click)="goTab1()" fill="clear"  class="custom-button daily-button"><ion-icon name="chevron-back" slot="start"></ion-icon>返回</ion-button>
+  </div>
+
+  <ion-toolbar>
+    <ion-title >
+    <div style="display: flex; align-items: center; justify-content: center;  margin: auto;">
+     <ion-icon name="heart" style="color: rgb(250, 222, 222); font-size: 18px; "></ion-icon>
+      <span style="color: rgb(250, 222, 222); font-size: 18px; margin-left: 2px;">心灵陪伴</span>
+    </div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="chat-container">
+  <h1 class="chat-title">心理咨询聊天</h1>
+
+  <!-- 消息列表 -->
+  <div class="messages">
+    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <p>{{ message.content }}</p>
+    </div>
+  </div>
+
+  <!-- 输入区域 -->
+  <div class="input-area">
+    <ion-input 
+      [(ngModel)]="userInput" 
+      (ionInput)="onInputChange($event)" 
+      placeholder="请分享您的感受或问题" 
+      clearInput
+    ></ion-input>
+    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
+  </div>
+</ion-content>

+ 65 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201202001.ts

@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  onInputChange(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+  // 发送消息
+  sendMessage() {
+    if (!this.userInput.trim()) return; // 确保输入不为空
+
+    // 添加用户消息到消息列表
+    this.messages.push({ role: 'user', content: this.userInput });
+
+    // 调用 AI 接口
+    const promptTemplate = `
+      作为一名专业的心理咨询师,请您根据用户的描述提供情感疏导和建议。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    const completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 添加 AI 消息到消息列表
+      this.messages.push({ role: 'ai', content: message.content });
+      // 清空用户输入框
+      this.userInput = '';
+    });
+  }
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 70 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201204531.ts

@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  onInputChange(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+  // 发送消息
+  sendMessage() {
+    if (!this.userInput.trim()) return; // 确保输入不为空
+
+    // 添加用户消息到消息列表
+    this.messages.push({ role: 'user', content: this.userInput });
+
+    // 调用 AI 接口
+    const promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    const completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+    let aiResponse = '';
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      // 将生成的消息内容累加到 aiResponse 中
+      aiResponse += message.content; // 假设 message.content 是 AI 生成的内容
+      // 添加 AI 消息到消息列表
+      this.messages.push({ role: 'ai', content:aiResponse });
+      // 清空用户输入框
+      this.userInput = '';
+    });
+  }
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 87 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201204533.scss

@@ -0,0 +1,87 @@
+.button-container {
+  position: absolute; /* 绝对定位 */
+  top: 8px; /* 距离顶部的距离 */
+  left: 6px; /* 距离左侧的距离 */
+  display: flex; /* 使用flexbox布局 */
+  flex-direction: row; /* 垂直排列 */
+}
+
+.custom-button {
+  font-size: 14px; /* 按钮字体大小 */
+  border-radius: 6px; /* 圆角按钮 */
+  color: rgb(250, 222, 222); /* 字体颜色 */
+  transition: opacity 0.3s, color 0.3s; /* 添加过渡效果 */
+  
+}
+
+/* 添加按钮的悬停效果 */
+.custom-button:hover {
+  opacity: 0.5 !important; /* 悬停时透明度变化 */
+  color:aqua !important;
+}
+
+ion-content {
+    --background: #ffcccb; /* 设置背景颜色为粉色 */
+    color: black; /* 设置文本颜色为黑色,确保可读性 */
+  }
+  ion-header {
+    background-color: #f19595; /* 设置背景颜色为淡粉色 */
+    color: black; /* 设置文本颜色为黑色 */
+    
+  }
+  
+  ion-toolbar {
+    --background: transparent; /* 如果需要透明效果,可以设置为透明 */
+   width: 200px;
+    margin: auto;
+  }
+  .chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 10px;
+    background-color: #f0f0f0;
+  }
+  
+  .chat-title {
+    text-align: center;
+    margin: 10px 0;
+  }
+  
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .user-message {
+    text-align: right;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border-radius: 10px;
+    display: inline-block;
+    max-width: 70%; /* 限制用户消息宽度 */
+    align-self: flex-end; /* 用户消息右对齐 */
+  }
+  
+  .ai-message {
+    text-align: left;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    display: inline-block;
+    max-width: 70%; /* 限制 AI 消息宽度 */
+    align-self: flex-start; /* AI 消息左对齐 */
+  }
+  
+  .input-area {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+  }

+ 73 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201205537.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+    // 属性:组件内用于展示消息内容的变量
+    responseMsg:any = ""
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+    isComplete:boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  // 发送消息
+  sendMessage() {
+    console.log("create")
+ 
+     
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+      }
+    })}
+    
+  
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 37 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201205743.html

@@ -0,0 +1,37 @@
+
+<ion-header [translucent]="true">
+  <div class="button-container">
+  <ion-button (click)="goTab1()" fill="clear"  class="custom-button daily-button"><ion-icon name="chevron-back" slot="start"></ion-icon>返回</ion-button>
+  </div>
+
+  <ion-toolbar>
+    <ion-title >
+    <div style="display: flex; align-items: center; justify-content: center;  margin: auto;">
+     <ion-icon name="heart" style="color: rgb(250, 222, 222); font-size: 18px; "></ion-icon>
+      <span style="color: rgb(250, 222, 222); font-size: 18px; margin-left: 2px;">心灵陪伴</span>
+    </div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="chat-container">
+  <h1 class="chat-title">心理咨询聊天</h1>
+
+  <!-- 消息列表 -->
+  <div class="messages">
+    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <p>{{ message.content }}</p>
+    </div>
+  </div>
+
+  <!-- 输入区域 -->
+  <div class="input-area">
+    <ion-input 
+      [(ngModel)]="userInput" 
+      (ionInput)="promptInput($event)" 
+      placeholder="请分享您的感受或问题" 
+      clearInput
+    ></ion-input>
+    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
+  </div>
+</ion-content>

+ 47 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201210052.html

@@ -0,0 +1,47 @@
+
+<ion-header [translucent]="true">
+  <div class="button-container">
+  <ion-button (click)="goTab1()" fill="clear"  class="custom-button daily-button"><ion-icon name="chevron-back" slot="start"></ion-icon>返回</ion-button>
+  </div>
+
+  <ion-toolbar>
+    <ion-title >
+    <div style="display: flex; align-items: center; justify-content: center;  margin: auto;">
+     <ion-icon name="heart" style="color: rgb(250, 222, 222); font-size: 18px; "></ion-icon>
+      <span style="color: rgb(250, 222, 222); font-size: 18px; margin-left: 2px;">心灵陪伴</span>
+    </div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="chat-container">
+  <h1 class="chat-title">心理咨询聊天</h1>
+
+  <!-- 消息列表 -->
+  <div class="messages">
+    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <p>{{ message.content }}</p>
+    </div>
+  </div>
+
+  <!-- 输入区域 -->
+  <div class="input-area">
+    <ion-input 
+      [value]="userPrompt" 
+      (ionInput)="promptInput($event)" 
+      placeholder="请分享您的感受或问题" 
+      autoGrow="true"
+      clearInput
+    ></ion-input>
+
+    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
+    @if(!isComplete){
+      <div>{{responseMsg}}</div>
+    }
+    <!-- 消息传输完成后,实时预览Markdown格式 -->
+    @if(isComplete){
+      <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+    }
+
+  </div>
+</ion-content>

+ 47 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201210130.html

@@ -0,0 +1,47 @@
+
+<ion-header [translucent]="true">
+  <div class="button-container">
+  <ion-button (click)="goTab1()" fill="clear"  class="custom-button daily-button"><ion-icon name="chevron-back" slot="start"></ion-icon>返回</ion-button>
+  </div>
+
+  <ion-toolbar>
+    <ion-title >
+    <div style="display: flex; align-items: center; justify-content: center;  margin: auto;">
+     <ion-icon name="heart" style="color: rgb(250, 222, 222); font-size: 18px; "></ion-icon>
+      <span style="color: rgb(250, 222, 222); font-size: 18px; margin-left: 2px;">心灵陪伴</span>
+    </div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="chat-container">
+  <h1 class="chat-title">心理咨询聊天</h1>
+
+  <!-- 消息列表 -->
+  <div class="messages">
+    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <p>{{ message.content }}</p>
+    </div>
+  </div>
+
+  <!-- 输入区域 -->
+  <div class="input-area">
+    <ion-input 
+      [value]="userInput" 
+      (ionInput)="promptInput($event)" 
+      placeholder="请分享您的感受或问题" 
+      autoGrow="true"
+      clearInput
+    ></ion-input>
+
+    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
+    @if(!isComplete){
+      <div>{{responseMsg}}</div>
+    }
+    <!-- 消息传输完成后,实时预览Markdown格式 -->
+    @if(isComplete){
+      <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+    }
+
+  </div>
+</ion-content>

+ 73 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201210453.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+    // 属性:组件内用于展示消息内容的变量
+    responseMsg:any = ""
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+    isComplete:boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  // 发送消息
+  sendMessage() {
+    console.log("create")
+ 
+     
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg.push({role:'ai',content:message.content})
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+      }
+    })}
+    
+  
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 74 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201210950.ts

@@ -0,0 +1,74 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+    // 属性:组件内用于展示消息内容的变量
+    responseMsg:any = ""
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+    isComplete:boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  // 发送消息
+  sendMessage() {
+    console.log("create")
+ 
+     
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg.push({role:'ai',content:message.content})
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+      }
+      this.userInput='';
+    })}
+    
+  
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 74 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201211532.ts

@@ -0,0 +1,74 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+  isComplete: boolean = false; // 定义完成状态属性,用来标记是否补全完成
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+    // 属性:组件内用于展示消息内容的变量
+    responseMsg:any = ""
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+   
+
+  // 发送消息
+  sendMessage() {
+    console.log("create")
+    if (!this.userInput.trim()) return; // 确保输入不为空
+    this.messages.push({ role: 'user', content: this.userInput });
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg.push({role:'ai',content:message.content})
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+      }
+      this.userInput='';
+    })}
+    
+  
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 73 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201211653.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+    // 属性:组件内用于展示消息内容的变量
+    responseMsg:any = ""
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+    isComplete:boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  // 发送消息
+  sendMessage() {
+    console.log("create")
+ 
+     
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+      }
+    })}
+    
+  
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 45 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201212246.html

@@ -0,0 +1,45 @@
+
+<ion-header [translucent]="true">
+  <div class="button-container">
+  <ion-button (click)="goTab1()" fill="clear"  class="custom-button daily-button"><ion-icon name="chevron-back" slot="start"></ion-icon>返回</ion-button>
+  </div>
+
+  <ion-toolbar>
+    <ion-title >
+    <div style="display: flex; align-items: center; justify-content: center;  margin: auto;">
+     <ion-icon name="heart" style="color: rgb(250, 222, 222); font-size: 18px; "></ion-icon>
+      <span style="color: rgb(250, 222, 222); font-size: 18px; margin-left: 2px;">心灵陪伴</span>
+    </div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="chat-container">
+  <h1 class="chat-title">心理咨询聊天</h1>
+
+  <!-- 消息列表 -->
+  <div class="messages">
+    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <p>{{ message.content }}</p>
+    </div>
+  </div>
+
+  <!-- 输入区域 -->
+  <div class="input-area">
+    <ion-input 
+      [value]="userInput" 
+      (ionInput)="promptInput($event)" 
+      placeholder="请分享您的感受或问题" 
+      
+      clearInput
+    ></ion-input>
+
+    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
+    
+    <!-- 消息传输完成后,实时预览Markdown格式 -->
+    @if(isComplete){
+      <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+    }
+
+  </div>
+</ion-content>

+ 40 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201212439.html

@@ -0,0 +1,40 @@
+
+<ion-header [translucent]="true">
+  <div class="button-container">
+  <ion-button (click)="goTab1()" fill="clear"  class="custom-button daily-button"><ion-icon name="chevron-back" slot="start"></ion-icon>返回</ion-button>
+  </div>
+
+  <ion-toolbar>
+    <ion-title >
+    <div style="display: flex; align-items: center; justify-content: center;  margin: auto;">
+     <ion-icon name="heart" style="color: rgb(250, 222, 222); font-size: 18px; "></ion-icon>
+      <span style="color: rgb(250, 222, 222); font-size: 18px; margin-left: 2px;">心灵陪伴</span>
+    </div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="chat-container">
+  <h1 class="chat-title">心理咨询聊天</h1>
+
+  <!-- 消息列表 -->
+  <div class="messages">
+    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <p>{{ message.content }}</p>
+    </div>
+  </div>
+
+  <!-- 输入区域 -->
+  <div class="input-area">
+    <ion-input 
+      [value]="userInput" 
+      (ionInput)="promptInput($event)" 
+      placeholder="请分享您的感受或问题" 
+      
+      clearInput
+    ></ion-input>
+
+    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
+    
+  </div>
+</ion-content>

+ 77 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201212754.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+    // 属性:组件内用于展示消息内容的变量
+    responseMsg:any = ""
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+    isComplete:boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  // 发送消息
+  sendMessage() {
+    if (!this.userInput.trim()) return; // 确保输入不为空
+    this.messages.push({ role: 'user', content: this.userInput });
+    console.log("create")
+ 
+     
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+      this.messages.push({ role: 'ai', content: message.content });
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+        this.userInput = '';
+      }
+    })}
+    
+  
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 76 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201212952.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+   
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+    isComplete:boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  // 发送消息
+  sendMessage() {
+    if (!this.userInput.trim()) return; // 确保输入不为空
+    this.messages.push({ role: 'user', content: this.userInput });
+    console.log("create")
+ 
+     
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.messages = message.content
+      this.messages.push({ role: 'ai', content: message.content });
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+        this.userInput = '';
+      }
+    })}
+    
+  
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 76 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201212953.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+   
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+    isComplete:boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  // 发送消息
+  sendMessage() {
+    if (!this.userInput.trim()) return; // 确保输入不为空
+    this.messages.push({ role: 'user', content: this.userInput });
+    console.log("create")
+ 
+     
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.messages = message.content
+      this.messages.push({ role: 'ai', content: message.content });
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+        this.userInput = '';
+      }
+    })}
+    
+  
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 76 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201213213.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+   
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+    isComplete:boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  // 发送消息
+  sendMessage() {
+    if (!this.userInput.trim()) return; // 确保输入不为空
+    this.messages.push({ role: 'user', content: this.userInput });
+    // console.log("create")
+ 
+     
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      // console.log(message.content)
+      // 赋值消息内容给组件内属性
+      // this.messages = message.content
+      this.messages.push({ role: 'ai', content: message.content });
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+        this.userInput = '';
+      }
+    })}
+    
+  
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 77 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201213248.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+   
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+    isComplete:boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  // 发送消息
+  sendMessage() {
+    if (!this.userInput.trim()) return; // 确保输入不为空
+    this.messages.push({ role: 'user', content: this.userInput });
+    // console.log("create")
+ 
+     
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      // console.log(message.content)
+      // 赋值消息内容给组件内属性
+      // this.messages = message.content
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+      this.messages.push({ role: 'ai', content: message.content });
+      
+        this.userInput = '';
+      }
+    })}
+    
+  
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 41 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201213255.html

@@ -0,0 +1,41 @@
+
+<ion-header [translucent]="true">
+  <div class="button-container">
+  <ion-button (click)="goTab1()" fill="clear"  class="custom-button daily-button"><ion-icon name="chevron-back" slot="start"></ion-icon>返回</ion-button>
+  </div>
+
+  <ion-toolbar>
+    <ion-title >
+    <div style="display: flex; align-items: center; justify-content: center;  margin: auto;">
+     <ion-icon name="heart" style="color: rgb(250, 222, 222); font-size: 18px; "></ion-icon>
+      <span style="color: rgb(250, 222, 222); font-size: 18px; margin-left: 2px;">心灵陪伴</span>
+    </div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="chat-container">
+  <h1 class="chat-title">心理咨询聊天</h1>
+
+  <!-- 消息列表 -->
+  <div class="messages">
+    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <p>{{ message.content }}</p>
+    </div>
+  </div>
+
+  <!-- 输入区域 -->
+  <div class="input-area">
+    <ion-input 
+      [value]="userInput" 
+      (ionInput)="promptInput($event)" 
+      placeholder="请分享您的感受或问题" 
+      
+      clearInput
+    ></ion-input>
+
+    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
+    
+
+  </div>
+</ion-content>

+ 39 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201213637.html

@@ -0,0 +1,39 @@
+
+<ion-header [translucent]="true">
+  <div class="button-container">
+  <ion-button (click)="goTab1()" fill="clear"  class="custom-button daily-button"><ion-icon name="chevron-back" slot="start"></ion-icon>返回</ion-button>
+  </div>
+
+  <ion-toolbar>
+    <ion-title >
+    <div style="display: flex; align-items: center; justify-content: center;  margin: auto;">
+     <ion-icon name="heart" style="color: rgb(250, 222, 222); font-size: 18px; "></ion-icon>
+      <span style="color: rgb(250, 222, 222); font-size: 18px; margin-left: 2px;">心灵陪伴</span>
+    </div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="chat-container">
+  <h1 class="chat-title">心理咨询聊天</h1>
+
+  <!-- 消息列表 -->
+  <div class="messages">
+    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <p>{{ message.content }}</p>
+    </div>
+  </div>
+
+  <!-- 输入区域 -->
+  <div class="input-area">
+    <ion-input 
+      [value]="userInput" 
+      (ionInput)="promptInput($event)" 
+      placeholder="请分享您的感受或问题" 
+      
+      clearInput
+    ></ion-input>
+
+    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
+  </div>
+</ion-content>

+ 73 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201213711.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBack,heart } from 'ionicons/icons';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
+
+@Component({
+  selector: 'app-page-companion',
+  templateUrl: './page-companion.component.html',
+  styleUrls: ['./page-companion.component.scss'],
+  standalone: true,
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
+})
+export class PageCompanionComponent  implements OnInit {
+
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+   
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+    isComplete:boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  // 发送消息
+  sendMessage() {
+    if (!this.userInput.trim()) return; // 确保输入不为空
+    this.messages.push({ role: 'user', content: this.userInput });
+    // console.log("create")
+ 
+     
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+      this.messages.push({ role: 'ai', content: message.content });
+      
+        this.userInput = '';
+      }
+    })}
+
+  constructor(private router: Router) { 
+    addIcons({chevronBack,heart});
+  }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+  ngOnInit() {}
+
+}

+ 87 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201213925.scss

@@ -0,0 +1,87 @@
+.button-container {
+  position: absolute; /* 绝对定位 */
+  top: 8px; /* 距离顶部的距离 */
+  left: 6px; /* 距离左侧的距离 */
+  display: flex; /* 使用flexbox布局 */
+  flex-direction: row; /* 垂直排列 */
+}
+
+.custom-button {
+  font-size: 14px; /* 按钮字体大小 */
+  border-radius: 6px; /* 圆角按钮 */
+  color: rgb(250, 222, 222); /* 字体颜色 */
+  transition: opacity 0.3s, color 0.3s; /* 添加过渡效果 */
+  
+}
+
+/* 添加按钮的悬停效果 */
+.custom-button:hover {
+  opacity: 0.5 !important; /* 悬停时透明度变化 */
+  color:aqua !important;
+}
+
+ion-content {
+    --background: #ffcccb; /* 设置背景颜色为粉色 */
+    color: black; /* 设置文本颜色为黑色,确保可读性 */
+  }
+  ion-header {
+    background-color: #f19595; /* 设置背景颜色为淡粉色 */
+    color: black; /* 设置文本颜色为黑色 */
+    
+  }
+  
+  ion-toolbar {
+    --background: transparent; /* 如果需要透明效果,可以设置为透明 */
+   width: 200px;
+    margin: auto;
+  }
+  .chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 10px;
+    background-color: #f0f0f0;
+  }
+  
+  .chat-title {
+    text-align: center;
+    margin: 10px 0;
+  }
+  
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .user-message {
+    text-align: right;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border-radius: 10px;
+    display: inline-block;
+    max-width: 70%; /* 限制用户消息宽度 */
+    align-self: flex-end; /* 用户消息右对齐 */
+  }
+  
+  .ai-message {
+    text-align: left;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    display: inline-block;
+    max-width: 70%; /* 限制 AI 消息宽度 */
+    align-self: flex-start; /* AI 消息左对齐 */
+  }
+  
+  .input-area {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+  }

+ 89 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201214319.scss

@@ -0,0 +1,89 @@
+.button-container {
+  position: absolute; /* 绝对定位 */
+  top: 8px; /* 距离顶部的距离 */
+  left: 6px; /* 距离左侧的距离 */
+  display: flex; /* 使用flexbox布局 */
+  flex-direction: row; /* 垂直排列 */
+}
+
+.custom-button {
+  font-size: 14px; /* 按钮字体大小 */
+  border-radius: 6px; /* 圆角按钮 */
+  color: rgb(250, 222, 222); /* 字体颜色 */
+  transition: opacity 0.3s, color 0.3s; /* 添加过渡效果 */
+  
+}
+
+/* 添加按钮的悬停效果 */
+.custom-button:hover {
+  opacity: 0.5 !important; /* 悬停时透明度变化 */
+  color:aqua !important;
+}
+
+ion-content {
+    --background: #ffcccb; /* 设置背景颜色为粉色 */
+    color: black; /* 设置文本颜色为黑色,确保可读性 */
+  }
+  ion-header {
+    background-color: #f19595; /* 设置背景颜色为淡粉色 */
+    color: black; /* 设置文本颜色为黑色 */
+    
+  }
+  
+  ion-toolbar {
+    --background: transparent; /* 如果需要透明效果,可以设置为透明 */
+   width: 200px;
+    margin: auto;
+  }
+  .chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 10px;
+    background-color: #f0f0f0;
+  }
+  
+  .chat-title {
+    text-align: center;
+    margin: 10px 0;
+  }
+  
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: flex; /* 添加 flex 布局 */
+    flex-direction: column; /* 垂直排列消息 */
+  }
+  
+  .user-message {
+    text-align: right;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border-radius: 10px;
+    display: inline-block;
+    max-width: 70%; /* 限制用户消息宽度 */
+    align-self: flex-end; /* 用户消息右对齐 */
+  }
+  
+  .ai-message {
+    text-align: left;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    display: inline-block;
+    max-width: 70%; /* 限制 AI 消息宽度 */
+    align-self: flex-start; /* AI 消息左对齐 */
+  }
+  
+  .input-area {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+  }

+ 89 - 0
.history/Mind-app/src/app/page-companion/page-companion.component_20241201214621.scss

@@ -0,0 +1,89 @@
+.button-container {
+  position: absolute; /* 绝对定位 */
+  top: 8px; /* 距离顶部的距离 */
+  left: 6px; /* 距离左侧的距离 */
+  display: flex; /* 使用flexbox布局 */
+  flex-direction: row; /* 垂直排列 */
+}
+
+.custom-button {
+  font-size: 14px; /* 按钮字体大小 */
+  border-radius: 6px; /* 圆角按钮 */
+  color: rgb(250, 222, 222); /* 字体颜色 */
+  transition: opacity 0.3s, color 0.3s; /* 添加过渡效果 */
+  
+}
+
+/* 添加按钮的悬停效果 */
+.custom-button:hover {
+  opacity: 0.5 !important; /* 悬停时透明度变化 */
+  color:aqua !important;
+}
+
+ion-content {
+    --background: #ffcccb; /* 设置背景颜色为粉色 */
+    color: black; /* 设置文本颜色为黑色,确保可读性 */
+  }
+  ion-header {
+    background-color: #f19595; /* 设置背景颜色为淡粉色 */
+    color: black; /* 设置文本颜色为黑色 */
+    
+  }
+  
+  ion-toolbar {
+    --background: transparent; /* 如果需要透明效果,可以设置为透明 */
+   width: 200px;
+    margin: auto;
+  }
+  .chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 10px;
+    background-color: #f0f0f0;
+  }
+  
+  .chat-title {
+    text-align: center;
+    margin: 10px 0;
+  }
+  
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: flex; /* 添加 flex 布局 */
+    flex-direction: column; /* 垂直排列消息 */
+  }
+  
+  .user-message {
+    text-align: right;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border-radius: 10px;
+    display: inline-block;
+    max-width: 70%; /* 限制用户消息宽度 */
+    align-self: flex-end; /* 用户消息右对齐 */
+  }
+  
+  .ai-message {
+    text-align: left;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    display: inline-block;
+    max-width: 70%; /* 限制 AI 消息宽度 */
+    align-self: flex-start; /* AI 消息左对齐 */
+  }
+  
+  .input-area {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+  }

+ 21 - 1
Mind-app/src/app/page-companion/page-companion.component.html

@@ -14,6 +14,26 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" class="chat-container">
+  <h1 class="chat-title">心理咨询聊天</h1>
 
+  <!-- 消息列表 -->
+  <div class="messages">
+    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <p>{{ message.content }}</p>
+    </div>
+  </div>
+
+  <!-- 输入区域 -->
+  <div class="input-area">
+    <ion-input 
+      [value]="userInput" 
+      (ionInput)="promptInput($event)" 
+      placeholder="请分享您的感受或问题" 
+      
+      clearInput
+    ></ion-input>
+
+    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
+  </div>
 </ion-content>

+ 52 - 0
Mind-app/src/app/page-companion/page-companion.component.scss

@@ -34,4 +34,56 @@ ion-content {
     --background: transparent; /* 如果需要透明效果,可以设置为透明 */
    width: 200px;
     margin: auto;
+  }
+  .chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 10px;
+    background-color: #f0f0f0;
+  }
+  
+  .chat-title {
+    text-align: center;
+    margin: 10px 0;
+  }
+  
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: flex; /* 添加 flex 布局 */
+    flex-direction: column; /* 垂直排列消息 */
+  }
+  
+  .user-message {
+    text-align: right;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border-radius: 10px;
+    display: inline-block;
+    max-width: 70%; /* 限制用户消息宽度 */
+    align-self: flex-end; /* 用户消息右对齐 */
+  }
+  
+  .ai-message {
+    text-align: left;
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    display: inline-block;
+    max-width: 70%; /* 限制 AI 消息宽度 */
+    align-self: flex-start; /* AI 消息左对齐 */
+  }
+  
+  .input-area {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
   }

+ 8 - 0
Mind-app/src/app/page-companion/page-companion.component.spec.ts

@@ -9,6 +9,7 @@ describe('PageCompanionComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [PageCompanionComponent],
+      
     }).compileComponents();
 
     fixture = TestBed.createComponent(PageCompanionComponent);
@@ -19,4 +20,11 @@ describe('PageCompanionComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should add user message to messages array', () => {
+    component.userInput = 'Hello, I need help';
+    component.sendMessage();
+    expect(component.messages.length).toBe(1);
+    expect(component.messages[0].role).toBe('user');
+  });
 });

+ 49 - 2
Mind-app/src/app/page-companion/page-companion.component.ts

@@ -1,18 +1,65 @@
 import { Component, OnInit } from '@angular/core';
-import {IonHeader, IonToolbar, IonTitle, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
+import {IonHeader, IonToolbar, IonTitle,IonInput, IonContent,IonButton, IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { chevronBack,heart } from 'ionicons/icons';
 import { Router } from '@angular/router';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { CommonModule } from '@angular/common'; // 添加 CommonModule
+import { FormsModule } from '@angular/forms'; // 添加 FormsModule
 
 @Component({
   selector: 'app-page-companion',
   templateUrl: './page-companion.component.html',
   styleUrls: ['./page-companion.component.scss'],
   standalone: true,
-  imports:[IonHeader, IonToolbar, IonTitle, IonContent,IonButton, IonIcon]
+  imports:[IonHeader, CommonModule, FormsModule, IonToolbar, IonTitle, IonContent,IonButton,IonInput, IonIcon,MarkdownPreviewModule]
 })
 export class PageCompanionComponent  implements OnInit {
 
+  userInput: string = ''; // 用户输入内容
+  messages: { role: string, content: string }[] = []; // 消息列表
+
+  
+
+  // 用户输入变化
+  promptInput(ev: any) {
+    this.userInput = ev.detail.value;
+  }
+
+   
+    // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+    isComplete:boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  // 发送消息
+  sendMessage() {
+    if (!this.userInput.trim()) return; // 确保输入不为空
+    this.messages.push({ role: 'user', content: this.userInput });
+    // console.log("create")
+ 
+     
+    // 调用 AI 接口
+    let promptTemplate = `
+      请你先分析用户的口述,如果是明显需要心理咨询帮助的意思,那么请你作为专业的心理咨询师,根据用户的描述提供情感疏导和建议;如果用户只是简单的日常聊天,比如吐槽、唠嗑,那么请你作为一个朋友的形象,根据的用户的消息提供友好并有情绪价值的回复。
+      以下是用户的口述:${this.userInput}
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: promptTemplate }
+    ]);
+
+
+    completion.sendCompletion().subscribe((message: any) => {
+      
+      
+      if(message?.complete){ // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true
+      this.messages.push({ role: 'ai', content: message.content });
+      
+        this.userInput = '';
+      }
+    })}
+
   constructor(private router: Router) { 
     addIcons({chevronBack,heart});
   }