feat: separate playground and demo (#282)

- support graph reading for playground
- support property adjusting

.github/workflows/build-docker.yaml

@@ -1,53 +1,63 @@
 name: Build Docker
 
-on: 
+on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
     # Publish semver tags as releases.
-    tags: [ 'v*.*.*' ]
+    tags: ["v*.*.*"]
     paths-ignore:
-      - '.devcontainer/**'
-      - '.github/ISSUE_TEMPLATE/**'
-      - 'images/**'
-      - 'playground/**'
-      - '**.md'
+      - ".devcontainer/**"
+      - ".github/ISSUE_TEMPLATE/**"
+      - "images/**"
+      - "playground/**"
+      - "**.md"
   pull_request:
-    branches: [ "main" ]
+    branches: ["main"]
   workflow_dispatch:
 
 env:
   SERVER_IMAGE_NAME: astra_agents_server
   PLAYGROUND_IMAGE_NAME: astra_playground
+  DEMO_IMAGE_NAME: agent_demo
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-      with:
-        fetch-tags: true
-        fetch-depth: '0'
-    - id: pre-step
-      shell: bash
-      run: echo "image-tag=$(git describe --tags --always)" >> $GITHUB_OUTPUT
-    - name: Build & Publish Docker Image for Agents Server 
-      uses: elgohr/Publish-Docker-Github-Action@v5
-      with:
-        name: ${{ github.repository_owner }}/${{ env.SERVER_IMAGE_NAME }}
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
-        registry: ghcr.io
-        tags: "${{ github.ref == 'refs/heads/main' && 'latest,' || '' }}${{ steps.pre-step.outputs.image-tag }}"
-        no_push: ${{ github.event_name == 'pull_request' }}
-    - name: Build & Publish Docker Image for Playground
-      uses: elgohr/Publish-Docker-Github-Action@v5
-      with:
-        name: ${{ github.repository_owner }}/${{ env.PLAYGROUND_IMAGE_NAME }}
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
-        registry: ghcr.io
-        workdir: playground
-        tags: "${{ github.ref == 'refs/heads/main' && 'latest,' || '' }}${{ steps.pre-step.outputs.image-tag }}"
-        no_push: ${{ github.event_name == 'pull_request' }}
-
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-tags: true
+          fetch-depth: "0"
+      - id: pre-step
+        shell: bash
+        run: echo "image-tag=$(git describe --tags --always)" >> $GITHUB_OUTPUT
+      - name: Build & Publish Docker Image for Agents Server
+        uses: elgohr/Publish-Docker-Github-Action@v5
+        with:
+          name: ${{ github.repository_owner }}/${{ env.SERVER_IMAGE_NAME }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+          registry: ghcr.io
+          tags: "${{ github.ref == 'refs/heads/main' && 'latest,' || '' }}${{ steps.pre-step.outputs.image-tag }}"
+          no_push: ${{ github.event_name == 'pull_request' }}
+      - name: Build & Publish Docker Image for Playground
+        uses: elgohr/Publish-Docker-Github-Action@v5
+        with:
+          name: ${{ github.repository_owner }}/${{ env.PLAYGROUND_IMAGE_NAME }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+          registry: ghcr.io
+          workdir: playground
+          tags: "${{ github.ref == 'refs/heads/main' && 'latest,' || '' }}${{ steps.pre-step.outputs.image-tag }}"
+          no_push: ${{ github.event_name == 'pull_request' }}
+      - name: Build & Publish Docker Image for demo
+        uses: elgohr/Publish-Docker-Github-Action@v5
+        with:
+          name: ${{ github.repository_owner }}/${{ env.DEMO_IMAGE_NAME }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+          registry: ghcr.io
+          workdir: demo
+          tags: "${{ github.ref == 'refs/heads/main' && 'latest,' || '' }}${{ steps.pre-step.outputs.image-tag }}"
+          no_push: ${{ github.event_name == 'pull_request' }}

demo/.dockerignore

@@ -0,0 +1,3 @@
+.git
+.next
+node_modules

demo/.env

@@ -0,0 +1 @@
+AGENT_SERVER_URL=http://localhost:8080

demo/.gitignore

@@ -0,0 +1,135 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+# .env
+!.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# lock
+package-lock.json
+yarn.lock

demo/Dockerfile

@@ -0,0 +1,27 @@
+FROM node:20-alpine AS base
+
+FROM base AS builder
+
+WORKDIR /app
+
+# COPY .env.example .env
+COPY . .
+
+RUN npm i --verbose && \
+    npm run build
+
+
+FROM base AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN mkdir .next
+
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+EXPOSE 3000
+
+CMD HOSTNAME="0.0.0.0" node server.js

demo/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Agora Community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

demo/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

demo/next.config.mjs

@@ -0,0 +1,37 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  // basePath: '/ai-agent',
+  // output: 'export',
+  output: 'standalone',
+  reactStrictMode: false,
+  webpack(config) {
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.('.svg'),
+    )
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ['@svgr/webpack'],
+      },
+    )
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i
+
+    return config
+  }
+};
+
+export default nextConfig;

demo/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "astra.ai-playground",
+  "version": "0.4.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "proto": "pbjs -t json-module -w commonjs -o src/protobuf/SttMessage.js src/protobuf/SttMessage.proto"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.2.4",
+    "redux": "^5.0.1",
+    "protobufjs": "^7.2.5",
+    "react-redux": "^9.1.0",
+    "@reduxjs/toolkit": "^2.2.3",
+    "antd": "^5.15.3",
+    "@ant-design/icons": "^5.3.7",
+    "agora-rtc-sdk-ng": "^4.21.0",
+    "react-colorful": "^5.6.1"
+  },
+  "devDependencies": {
+    "@minko-fe/postcss-pxtoviewport": "^1.3.2",
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-redux": "^7.1.22",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.4",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "sass": "^1.77.5",
+    "@svgr/webpack": "^8.1.0",
+    "protobufjs-cli": "^1.1.2"
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+}

demo/postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    "@minko-fe/postcss-pxtoviewport": {
+      viewportWidth: 375,
+      exclude: /node_modules/,
+      include: /\/src\/platform\/mobile\//,
+    }
+  },
+}