Feat/UI finalize

docker-compose.yml

@@ -17,21 +17,22 @@ services:
         env_file:
             - .env
     astra_playground:
-        image: ghcr.io/rte-design/astra_playground:v0.2.0-35-g0ecbc41
+        image: ghcr.io/rte-design/astra_playground:v0.3.0-rc1-1-g7b39348
         container_name: astra_playground
         restart: always
         ports:
             - "3000:3000"
 
-    astra_playground_dev:
-        image: node:20-alpine
-        container_name: astra_playground_dev
-        restart: always
-        command: sh -c "cd /app/playground && npm i && npm run dev" #build && npm run start"
-        ports:
-        - "3002:3000"
-        volumes:
-        - ./:/app
+    # use this when you want to run the playground in local development mode
+    # astra_playground_dev:
+    #     image: node:20-alpine
+    #     container_name: astra_playground_dev
+    #     restart: always
+    #     command: sh -c "cd /app/playground && npm i && npm run dev" #build && npm run start"
+    #     ports:
+    #     - "3002:3000"
+    #     volumes:
+    #     - ./:/app
     astra_graph_designer:
         image: agoraio/astra_graph_designer:0.3.0
         container_name: astra_graph_designer

playground/src/common/constant.ts

@@ -33,6 +33,11 @@ export const GRAPH_OPTIONS: GraphOptionItem[] = [
     value: "va.qwen.rag"
   },
 ]
+
+export const isRagGraph = (graphName: string) => {
+  return graphName === "va.qwen.rag"
+}
+
 export const VOICE_OPTIONS: VoiceOptionItem[] = [
   {
     label: "Male",

playground/src/platform/mobile/chat/index.module.scss

@@ -8,8 +8,10 @@
   overflow: hidden;
 
   .header {
-    align-items: center;
-    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    row-gap: 10px;
     border-bottom: 1px solid #272A2F;
 
 

playground/src/platform/mobile/chat/index.tsx

@@ -1,8 +1,8 @@
 import { ReactElement, useEffect, useContext, useState } from "react"
 import ChatItem from "./chatItem"
 import { IChatItem } from "@/types"
-import { useAppDispatch, useAutoScroll, LANGUAGE_OPTIONS, useAppSelector } from "@/common"
-import { setLanguage } from "@/store/reducers/global"
+import { useAppDispatch, useAutoScroll, LANGUAGE_OPTIONS, useAppSelector, GRAPH_OPTIONS, isRagGraph } from "@/common"
+import { setGraphName, setLanguage } from "@/store/reducers/global"
 import { Select, } from 'antd';
 import { MenuContext } from "../menu/context"
 import PdfSelect from "@/components/pdfSelect"
@@ -14,6 +14,7 @@ const Chat = () => {
   const chatItems = useAppSelector(state => state.global.chatItems)
   const language = useAppSelector(state => state.global.language)
   const agentConnected = useAppSelector(state => state.global.agentConnected)
+  const graphName = useAppSelector(state => state.global.graphName)
   const dispatch = useAppDispatch()
   // genRandomChatList
   // const [chatItems, setChatItems] = useState<IChatItem[]>([])
@@ -36,21 +37,21 @@ const Chat = () => {
     dispatch(setLanguage(val))
   }
 
+  const onGraphNameChange = (val: any) => {
+    dispatch(setGraphName(val))
+  }
 
 
   return <section className={styles.chat}>
     <div className={styles.header}>
-      <div>
-        <Select className={styles.languageSelect}
-          options={LANGUAGE_OPTIONS}
-          disabled={agentConnected}
-          value={language} onChange={onLanguageChange}></Select>
-      </div>
-      <div style={{
-        marginTop: "12px"
-      }}>
-        <PdfSelect></PdfSelect>
-      </div>
+      <Select className={styles.graphName}
+        disabled={agentConnected} options={GRAPH_OPTIONS}
+        value={graphName} onChange={onGraphNameChange}></Select>
+      <Select className={styles.languageSelect}
+        options={LANGUAGE_OPTIONS}
+        disabled={agentConnected}
+        value={language} onChange={onLanguageChange}></Select>
+      {isRagGraph(graphName) ? <PdfSelect></PdfSelect> : null}
     </div>
     <div className={`${styles.content}`} >
       {chatItems.map((item, index) => {

playground/src/platform/pc/chat/index.tsx

@@ -6,6 +6,7 @@ import {
   genRandomChatList, useAppDispatch, useAutoScroll,
   LANGUAGE_OPTIONS, useAppSelector,
   GRAPH_OPTIONS,
+  isRagGraph,
 } from "@/common"
 import { setGraphName, setLanguage } from "@/store/reducers/global"
 import { Select, } from 'antd';
@@ -50,7 +51,7 @@ const Chat = () => {
         <Select className={styles.languageSelect}
           disabled={agentConnected} options={LANGUAGE_OPTIONS}
           value={language} onChange={onLanguageChange}></Select>
-        <PdfSelect></PdfSelect>
+        {isRagGraph(graphName) ? <PdfSelect></PdfSelect> : null}
       </span>
     </div>
     <div className={`${styles.content}`} ref={chatRef}>

playground/src/store/reducers/global.ts

@@ -20,7 +20,7 @@ const getInitialState = (): InitialState => {
     roomConnected: false,
     agentConnected: false,
     language: "en-US",
-    voiceType: "female",
+    voiceType: "male",
     chatItems: [],
     graphName: "va.openai.azure"
   }