feat: story explorer page

.deploy/webapp/package.json

@@ -67,6 +67,7 @@
     "immer": "^10.0.1",
     "js-yaml": "^4.1.0",
     "json5": "^2.2.3",
+    "langchain": "^0.0.152",
     "lato-font": "^3.0.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
@@ -94,6 +95,8 @@
     "tslib": "^2.3.0",
     "typeorm": "^0.2.37",
     "xlsx": "^0.18.5",
+    "zod": "^3.22.2",
+    "zod-to-json-schema": "^3.21.4",
     "zone.js": "0.13.1"
   },
   "devDependencies": {

apps/cloud/src/app/features/story/story/story.component.html

@@ -139,3 +139,9 @@
 </mat-drawer-container>
 
 <div *ngIf="error" class="pac-story__error">{{error}}</div>
+
+<ngm-story-explorer *ngIf="showExplorer()" class="absolute top-o left-0 w-full h-full z-10"
+    cdkDropListGroup
+    [data]="explore()"
+    (closed)="closeExplorer($event)"
+></ngm-story-explorer>

apps/cloud/src/app/features/story/story/story.component.ts

@@ -14,9 +14,10 @@ import {
   ViewChild
 } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
+import { CdkDragEnd } from '@angular/cdk/drag-drop'
 import { ResizerModule } from '@metad/ocap-angular/common'
 import { NgmDSCoreService, OcapCoreModule } from '@metad/ocap-angular/core'
-import { AgentType, isEqual } from '@metad/ocap-core'
+import { AgentType, C_MEASURES, isEqual } from '@metad/ocap-core'
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
 import { TranslateModule } from '@ngx-translate/core'
 import { NgMapPipeModule, NxCoreService, ReversePipe } from '@metad/core'
@@ -29,8 +30,10 @@ import {
   StoryPointType,
   WidgetComponentType
 } from '@metad/story/core'
+import { WasmAgentService } from '@metad/ocap-angular/wasm-agent'
 import { NxDesignerModule, NxSettingsPanelService } from '@metad/story/designer'
 import { NxStoryComponent, NxStoryModule } from '@metad/story/story'
+import { StoryExplorerModule } from '@metad/story'
 import { registerTheme } from 'echarts/core'
 import { NGXLogger } from 'ngx-logger'
 import { firstValueFrom } from 'rxjs'
@@ -39,9 +42,8 @@ import { MenuCatalog, registerWasmAgentModel, Store } from '../../../@core'
 import { MaterialModule } from '../../../@shared'
 import { AppService } from '../../../app.service'
 import { StoryToolbarComponent } from '../toolbar/toolbar.component'
-import { CdkDragEnd } from '@angular/cdk/drag-drop'
 import { StoryToolbarService } from '../toolbar/toolbar.service'
-import { WasmAgentService } from '@metad/ocap-angular/wasm-agent'
+
 
 type ResponsiveBreakpointType = {
   name: string;
@@ -65,6 +67,7 @@ type ResponsiveBreakpointType = {
     NxStoryModule,
     NxDesignerModule,
     StoryToolbarComponent,
+    StoryExplorerModule
   ],
   selector: 'pac-story',
   templateUrl: './story.component.html',
@@ -156,6 +159,10 @@ export class StoryComponent implements OnInit {
   readonly pageKey$ = this.route.queryParams.pipe(map((queryParams) => queryParams['pageKey']))
   readonly widgetKey$ = this.route.queryParams.pipe(map((queryParams) => queryParams['widgetKey']))
 
+  // Story explorer
+  showExplorer = signal(false)
+  explore = signal(null)
+
   /**
   |--------------------------------------------------------------------------
   | Subscriptions (effect)
@@ -193,6 +200,11 @@ export class StoryComponent implements OnInit {
     if (params.$language) {
       this.storyOptions.locale = params.$language
     }
+
+    if (params.explore) {
+      this.showExplorer.set(true)
+      this.explore.set(JSON.parse(atob(params.explore)))
+    }
   })
 
   private themeSub = this.storyService.themeChanging$.pipe(delay(300)).subscribe(async ([prev, current]) => {
@@ -320,4 +332,13 @@ export class StoryComponent implements OnInit {
   onToolbarDragEnded(event: CdkDragEnd) {
     this.toolbarComponent.calculateRightSide(event)
   }
+
+  closeExplorer(event) {
+    this.showExplorer.set(false)
+    this._router.navigate([], {
+      relativeTo: this.route,
+      queryParams: {explore: null},
+      queryParamsHandling: 'merge' // remove to replace all query params by provided
+    })
+  }
 }

apps/cloud/src/app/features/story/toolbar/toolbar.component.ts

@@ -29,6 +29,7 @@ import { ConfirmUniqueComponent } from '@metad/components/confirm'
 import { ConfirmCodeEditorComponent } from '@metad/components/editor'
 import { DeepPartial, IsNilPipe } from '@metad/core'
 import {
+  CHARTS,
   ParametersComponent,
   PreferencesComponent,
   QuerySettingComponent,
@@ -55,7 +56,7 @@ import { SaveAsTemplateComponent } from '../save-as-template/save-as-template.co
 import { StoryDetailsComponent } from '../story-details/story-details.component'
 import { DeviceOrientation, DeviceZooms, EmulatedDevices, StoryScales, downloadStory } from '../types'
 import { StoryToolbarService } from './toolbar.service'
-import { CHARTS, COMPONENTS, PAGES } from './types'
+import { COMPONENTS, PAGES } from './types'
 
 
 @Component({