From c65e0fcb0b239028335b08f2402327d7e0405370 Mon Sep 17 00:00:00 2001
From: scarqin <1054139596@qq.com>
Date: Tue, 7 Mar 2023 12:18:55 +0800
Subject: [PATCH] feat: star-motivation standalone component

---
 .../chat-robot.component.scss                 |  2 +-
 .../chat-robot.component.ts                   | 24 ++++++----
 .../modules/chat-robot/chat-robot.service.ts  |  5 ++-
 .../star-motivation.component.ts              | 44 +++++++++++++++++++
 .../common/about.component.scss               | 13 ------
 .../system-setting/common/about.component.ts  | 21 +++------
 .../system-setting/system-setting.module.ts   | 13 +++++-
 .../chatgpt-robot.component.scss              | 14 ------
 .../chatgpt-robot/chatgpt-robot.component.ts  | 28 +++++-------
 .../browser/src/app/pages/pages.module.ts     | 22 +++-------
 .../browser/src/app/shared/shared.module.ts   |  2 +-
 11 files changed, 102 insertions(+), 86 deletions(-)
 create mode 100644 src/workbench/browser/src/app/modules/star-motivation/star-motivation.component.ts
 delete mode 100644 src/workbench/browser/src/app/modules/system-setting/common/about.component.scss

diff --git a/src/workbench/browser/src/app/modules/chat-robot/chat-robot-container/chat-robot.component.scss b/src/workbench/browser/src/app/modules/chat-robot/chat-robot-container/chat-robot.component.scss
index 515defcd..a87d917a 100644
--- a/src/workbench/browser/src/app/modules/chat-robot/chat-robot-container/chat-robot.component.scss
+++ b/src/workbench/browser/src/app/modules/chat-robot/chat-robot-container/chat-robot.component.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   background-color: var(--background-color);
   width: 500px;
-  height: 500px;
+  height: 50%;
   border-radius: 6px;
   box-shadow: 0 0 10px var(--shadow-color);
 }
diff --git a/src/workbench/browser/src/app/modules/chat-robot/chat-robot-container/chat-robot.component.ts b/src/workbench/browser/src/app/modules/chat-robot/chat-robot-container/chat-robot.component.ts
index cdff6f8b..a4d96f8a 100644
--- a/src/workbench/browser/src/app/modules/chat-robot/chat-robot-container/chat-robot.component.ts
+++ b/src/workbench/browser/src/app/modules/chat-robot/chat-robot-container/chat-robot.component.ts
@@ -2,20 +2,19 @@
  * API Design reference: https://github.dev/akveo/nebular/blob/master/src/playground/with-layout/chat/chat.module.ts
  * Component Document:https://akveo.github.io/nebular/docs/components/chat-ui/overview/#nbchatcomponent
  */
-import { Component, ContentChildren, Input, QueryList } from '@angular/core';
+import { Component, ContentChildren, Input, QueryList, TemplateRef } from '@angular/core';
 
 import { ChatRobotMessageComponent } from '../chat-robot-message/chat-robot-message.component';
+import { ChatRobotService } from '../chat-robot.service';
 
 @Component({
   selector: 'pc-chat-robot',
   template: `
-    <div class="header flex justify-between">
+    <div class="header flex justify-between items-center">
       <span>{{ title }}</span>
-      <eo-iconpark-icon
-        class="box-border flex items-center justify-center w-4 h-4 rounded-full end_icon"
-        name="close"
-        size="10"
-      ></eo-iconpark-icon>
+      <button eo-ng-button nzType="text">
+        <eo-iconpark-icon size="14" name="close" (click)="closeRobot()"></eo-iconpark-icon>
+      </button>
     </div>
     <div class="messages flex flex-col flex-1">
       <ng-content select="pc-chat-robot-message"></ng-content>
@@ -23,7 +22,9 @@ import { ChatRobotMessageComponent } from '../chat-robot-message/chat-robot-mess
     </div>
     <div class="form">
       <ng-content select="pc-chat-robot-form"></ng-content>
-      <p class="mt-[5px] text-[12px] text-tips">Power by <a href="https://www.apispace.com" target="_blank">APISpace</a></p>
+      <p class="mt-[5px] text-[12px] text-tips"
+        >Power by <a [href]="powerBy.link" target="_blank">{{ powerBy.title }}</a></p
+      >
     </div>
   `,
   styleUrls: ['./chat-robot.component.scss']
@@ -31,4 +32,11 @@ import { ChatRobotMessageComponent } from '../chat-robot-message/chat-robot-mess
 export class ChatRobotComponent {
   @Input() title: string;
   @ContentChildren(ChatRobotMessageComponent) messages: QueryList<ChatRobotMessageComponent>;
+
+  @Input() powerBy: { title: string; link: string };
+
+  constructor(private chat: ChatRobotService) {}
+  closeRobot() {
+    this.chat.close();
+  }
 }
diff --git a/src/workbench/browser/src/app/modules/chat-robot/chat-robot.service.ts b/src/workbench/browser/src/app/modules/chat-robot/chat-robot.service.ts
index 12279ad6..c863a043 100644
--- a/src/workbench/browser/src/app/modules/chat-robot/chat-robot.service.ts
+++ b/src/workbench/browser/src/app/modules/chat-robot/chat-robot.service.ts
@@ -4,11 +4,14 @@ import { Injectable } from '@angular/core';
   providedIn: 'root'
 })
 export class ChatRobotService {
-  isShow: boolean = false;
+  isShow: boolean = true;
   constructor() {}
   open() {
     this.isShow = true;
   }
+  close() {
+    this.isShow = false;
+  }
   toggleShowStatus() {
     this.isShow = !this.isShow;
   }
diff --git a/src/workbench/browser/src/app/modules/star-motivation/star-motivation.component.ts b/src/workbench/browser/src/app/modules/star-motivation/star-motivation.component.ts
new file mode 100644
index 00000000..56f6f452
--- /dev/null
+++ b/src/workbench/browser/src/app/modules/star-motivation/star-motivation.component.ts
@@ -0,0 +1,44 @@
+import { Component, Input } from '@angular/core';
+
+import { SharedModule } from '../../shared/shared.module';
+
+@Component({
+  selector: 'pc-star-motivation',
+  template: ` <div class="flex flex-col items-center"
+    ><p i18n class="text-center mt-[15px]">
+      Hi!~ If you like <b>{{ subject }}</b
+      >, please give the Postcat a Star!<br />Your support is our greatest motivation~
+    </p>
+    <a
+      class="favor-image-link mt-[15px]"
+      target="_blank"
+      href="https://github.com/Postcatlab/postcat"
+      trace
+      traceID="jump_to_github"
+      [traceParams]="{ where_jump_to_github: 'heart' }"
+    >
+      <img loading="lazy" class="w-[40px] favor-image align-middle" src="assets/images/heart.png" />
+    </a>
+  </div>`,
+  standalone: true,
+  imports: [SharedModule],
+  styles: [
+    `
+      .favor-image-link {
+        background-color: #eee;
+        border-radius: 50%;
+        padding: 13px;
+      }
+
+      .favor-image {
+        transition: all 0.3s;
+      }
+      .favor-image:hover {
+        transform: scale(1.2);
+      }
+    `
+  ]
+})
+export class StarMotivationComponent {
+  @Input() subject: string = 'Postcat';
+}
diff --git a/src/workbench/browser/src/app/modules/system-setting/common/about.component.scss b/src/workbench/browser/src/app/modules/system-setting/common/about.component.scss
deleted file mode 100644
index 32508195..00000000
--- a/src/workbench/browser/src/app/modules/system-setting/common/about.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.favor-image {
-  transition: all 0.3s;
-
-  &:hover {
-    transform: scale(1.2);
-  }
-}
-
-.favor-image-link {
-  background-color: #eee;
-  border-radius: 50%;
-  padding: 13px;
-}
diff --git a/src/workbench/browser/src/app/modules/system-setting/common/about.component.ts b/src/workbench/browser/src/app/modules/system-setting/common/about.component.ts
index 2ee60232..09284f0c 100644
--- a/src/workbench/browser/src/app/modules/system-setting/common/about.component.ts
+++ b/src/workbench/browser/src/app/modules/system-setting/common/about.component.ts
@@ -8,7 +8,7 @@ import { WebService } from '../../../core/services';
       <eo-logo class="logo mt-[30px] w-[150px] h-[150px]"></eo-logo>
       <p class="font-bold mt-[15px] text-[16px]">Postcat</p>
       <p class="">V{{ versionInfo?.version }}</p>
-      <!-- star -->
+      <!-- Star -->
       <a
         href="https://github.com/Postcatlab/postcat"
         target="_blank"
@@ -19,26 +19,15 @@ import { WebService } from '../../../core/services';
       >
         <img loading="lazy" class="mx-4" src="https://img.shields.io/github/stars/postcatlab/postcat?style=social" alt="" />
       </a>
-      <p i18n class="text-center mt-[15px]">
-        Hi!~ If you like <b>Postcat</b>, please give the Postcat a Star!<br />Your support is our greatest motivation~
-      </p>
-      <a
-        class="favor-image-link mt-[15px]"
-        target="_blank"
-        href="https://github.com/Postcatlab/postcat"
-        trace
-        traceID="jump_to_github"
-        [traceParams]="{ where_jump_to_github: 'heart' }"
-      >
-        <img loading="lazy" class="w-[40px] favor-image align-middle" src="assets/images/heart.png" />
-      </a>
+      <!-- Star motivation -->
+      <pc-star-motivation></pc-star-motivation>
       <nz-divider></nz-divider>
+      <!-- System info -->
       <div class="w-[300px] text-[12px] text-center m-auto">
         <p *ngFor="let item of list" class="mt-[10px]">{{ item.label }}: {{ item.value }}</p>
       </div>
     </div>
-  `,
-  styleUrls: ['./about.component.scss']
+  `
 })
 export class AboutComponent implements OnInit {
   list;
diff --git a/src/workbench/browser/src/app/modules/system-setting/system-setting.module.ts b/src/workbench/browser/src/app/modules/system-setting/system-setting.module.ts
index 690cc24c..7e2cacf1 100644
--- a/src/workbench/browser/src/app/modules/system-setting/system-setting.module.ts
+++ b/src/workbench/browser/src/app/modules/system-setting/system-setting.module.ts
@@ -11,6 +11,7 @@ import { NzTreeViewModule } from 'ng-zorro-antd/tree-view';
 
 import { EoSettingModule } from '../eo-ui/setting/setting.module';
 import { LogoModule } from '../logo/logo.module';
+import { StarMotivationComponent } from '../star-motivation/star-motivation.component';
 import { AboutComponent, DataStorageComponent, LanguageSwticherComponent, TokenComponent } from './common';
 import { AccountComponent } from './common/account.component';
 import { SelectThemeComponent } from './common/select-theme/select-theme.component';
@@ -27,7 +28,17 @@ const ANTDMODULES = [NzDividerModule, NzInputNumberModule, NzEmptyModule, NzDesc
     LanguageSwticherComponent,
     AboutComponent
   ],
-  imports: [EoSettingModule, LogoModule, FormsModule, EoNgTabsModule, ReactiveFormsModule, SharedModule, CommonModule, ...ANTDMODULES],
+  imports: [
+    EoSettingModule,
+    StarMotivationComponent,
+    LogoModule,
+    FormsModule,
+    EoNgTabsModule,
+    ReactiveFormsModule,
+    SharedModule,
+    CommonModule,
+    ...ANTDMODULES
+  ],
   exports: [SystemSettingComponent]
 })
 export class SystemSettingModule {}
diff --git a/src/workbench/browser/src/app/pages/components/chatgpt-robot/chatgpt-robot.component.scss b/src/workbench/browser/src/app/pages/components/chatgpt-robot/chatgpt-robot.component.scss
index a844805d..e5095fb2 100644
--- a/src/workbench/browser/src/app/pages/components/chatgpt-robot/chatgpt-robot.component.scss
+++ b/src/workbench/browser/src/app/pages/components/chatgpt-robot/chatgpt-robot.component.scss
@@ -4,17 +4,3 @@
   bottom: 25px;
   z-index: 10;
 }
-
-.favor-image-link {
-  background-color: #eee;
-  border-radius: 50%;
-  padding: 13px;
-}
-
-.favor-image {
-  transition: all 0.3s;
-
-  &:hover {
-    transform: scale(1.2);
-  }
-}
diff --git a/src/workbench/browser/src/app/pages/components/chatgpt-robot/chatgpt-robot.component.ts b/src/workbench/browser/src/app/pages/components/chatgpt-robot/chatgpt-robot.component.ts
index 15321835..6e3cb4cb 100644
--- a/src/workbench/browser/src/app/pages/components/chatgpt-robot/chatgpt-robot.component.ts
+++ b/src/workbench/browser/src/app/pages/components/chatgpt-robot/chatgpt-robot.component.ts
@@ -1,7 +1,11 @@
+import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 
+import { ChatRobotModule } from '../../../modules/chat-robot/chat-robot.module';
 import { ChatRobotService } from '../../../modules/chat-robot/chat-robot.service';
+import { StarMotivationComponent } from '../../../modules/star-motivation/star-motivation.component';
+import { TraceService } from '../../../shared/services/trace.service';
 
 type messageItem = {
   text: string;
@@ -16,8 +20,10 @@ type messageItem = {
 
 @Component({
   selector: 'pc-chatgpt-robot',
+  standalone: true,
+  imports: [StarMotivationComponent, CommonModule, ChatRobotModule],
   template: `
-    <pc-chat-robot *ngIf="chat.isShow" [title]="title">
+    <pc-chat-robot *ngIf="chat.isShow" [powerBy]="powerBy" [title]="title">
       <pc-chat-robot-message
         [reply]="initMessage.reply"
         [sender]="initMessage.user.name"
@@ -26,21 +32,7 @@ type messageItem = {
         [messageContent]="messageTemplate"
       >
         <ng-template #messageTemplate>
-          <div class="flex flex-col items-center">
-            <p i18n class="text-center mt-[15px]">
-              Hi!~ If you like <b>ChatGPT Extensions</b>, please give the Postcat a Star!<br />Your support is our greatest motivation~
-            </p>
-            <a
-              class="favor-image-link mt-[15px]"
-              target="_blank"
-              href="https://github.com/Postcatlab/postcat"
-              trace
-              traceID="jump_to_github"
-              [traceParams]="{ where_jump_to_github: 'heart' }"
-            >
-              <img loading="lazy" class="w-[40px] favor-image align-middle" src="assets/images/heart.png" />
-            </a>
-          </div>
+          <pc-star-motivation subject="ChatGPT Extensions" i18n-subject></pc-star-motivation>
         </ng-template>
       </pc-chat-robot-message>
       <pc-chat-robot-message
@@ -67,6 +59,10 @@ export class ChatgptRobotComponent implements OnInit {
       avatar: './assets/images/logo.svg'
     }
   };
+  powerBy = {
+    title: 'APISPace',
+    link: 'https://www.apispace.com?utm_source=postcat&utm_medium=robot&utm_term=chatgptturbo'
+  };
   messages: messageItem[] = [];
   constructor(private http: HttpClient, public chat: ChatRobotService) {}
   ngOnInit() {
diff --git a/src/workbench/browser/src/app/pages/pages.module.ts b/src/workbench/browser/src/app/pages/pages.module.ts
index 4b9efb58..d69081c4 100644
--- a/src/workbench/browser/src/app/pages/pages.module.ts
+++ b/src/workbench/browser/src/app/pages/pages.module.ts
@@ -6,7 +6,6 @@ import { LocalWorkspaceTipComponent } from '../layouts/local-workspace-tip/local
 import { NavbarModule } from '../layouts/navbar/navbar.module';
 import { SidebarComponent } from '../layouts/sidebar/sidebar.component';
 import { ToolbarModule } from '../layouts/toolbar/toolbar.module';
-import { ChatRobotModule } from '../modules/chat-robot/chat-robot.module';
 import { NpsMaskModule } from '../modules/nps-mask/nps-mask.module';
 import { SystemSettingModule } from '../modules/system-setting/system-setting.module';
 import { SharedModule } from '../shared/shared.module';
@@ -17,7 +16,12 @@ import { PagesRoutingModule } from './pages-routing.module';
 import { PagesComponent } from './pages.component';
 
 @NgModule({
+  declarations: [PagesComponent, SidebarComponent, LocalWorkspaceTipComponent, UserModalComponent, ThirdLoginComponent],
+  exports: [],
+  providers: [],
+  schemas: [],
   imports: [
+    ChatgptRobotComponent,
     PagesRoutingModule,
     NpsMaskModule,
     NzNotificationModule,
@@ -25,19 +29,7 @@ import { PagesComponent } from './pages.component';
     CommonModule,
     NavbarModule,
     ToolbarModule,
-    SharedModule,
-    ChatRobotModule
-  ],
-  declarations: [
-    PagesComponent,
-    SidebarComponent,
-    LocalWorkspaceTipComponent,
-    UserModalComponent,
-    ThirdLoginComponent,
-    ChatgptRobotComponent
-  ],
-  exports: [],
-  providers: [],
-  schemas: []
+    SharedModule
+  ]
 })
 export class PagesModule {}
diff --git a/src/workbench/browser/src/app/shared/shared.module.ts b/src/workbench/browser/src/app/shared/shared.module.ts
index 7b97335d..6b05bf26 100644
--- a/src/workbench/browser/src/app/shared/shared.module.ts
+++ b/src/workbench/browser/src/app/shared/shared.module.ts
@@ -13,7 +13,6 @@ import { EoNgSelectModule } from 'eo-ng-select';
 import { EoNgSwitchModule } from 'eo-ng-switch';
 import { ExtensionFeedbackComponent } from 'eo/workbench/browser/src/app/shared/components/extension-feedback/extension-feedback';
 import { EoSchemaFormComponent } from 'eo/workbench/browser/src/app/shared/components/schema-form/schema-form.component';
-import { TraceDirective } from 'eo/workbench/browser/src/app/shared/directives/trace.directive';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzFormModule } from 'ng-zorro-antd/form';
@@ -29,6 +28,7 @@ import { EoIconparkIconModule } from '../modules/eo-ui/iconpark-icon/eo-iconpark
 import { DownloadClientModalComponent } from './components/download-client.component';
 import { ExtensionAppComponent } from './components/extension-app/extension-app.component';
 import { ClickStopPropagationDirective, FormFocusDirective } from './directives';
+import { TraceDirective } from './directives/trace.directive';
 
 const COMPONENTS = [DownloadClientModalComponent, ExtensionAppComponent, EoSchemaFormComponent, ExtensionFeedbackComponent];
 const DIRECTIVES = [ClickStopPropagationDirective, FormFocusDirective, TraceDirective];