สร้าง Copilot client

• ในโปรเจคนี้เราใช้ component จาก react-bootstrap นะ
• แผนภาพ slide ในส่วน redux แบบ PDF

Part 1: User Interface

1.1 เริ่มโปรเจค

เลือกเริ่มโปรเจคได้ 2 วิธีคือ A. โคลนโปรเจคมาไว้ในเครื่อง หรือ B. ใช้ Codespace

A. โคลนโปรเจคมาไว้ในเครื่องด้วยคำสั่งด้านล่าง

git clone -b starter https://github.com/teerasej/nextflow-openai-react-redux-simple

จากนั้นเข้าไปในโฟลเดอร์โปรเจค

cd nextflow-openai-react-redux-simple

และติดตั้ง package ที่จำเป็นด้วยคำสั่ง

npm install 

B. ใช้ Codespace

1. Fork โปรเจค https://github.com/teerasej/nextflow-openai-react-redux-simple โดยให้ติ๊ก only on branch main ออก เพราะต้องใช้ branch starter ในการทำแลป
2. ใน Repo ที่ได้มาให้เปลี่ยน branch เป็น starter
3. เปิด Codespace จาก Repo ที่ fork มา

1.2 Building Components

1. สร้าง User Interface: Prompt input
2. สร้าง User Interface: Chat history
3. สร้าง User Interface: ChatMessage

Part 2: Redux

1. สร้าง Redux store
2. สร้าง Reducer Slice
3. ดึงข้อมูลจาก Reducer มาใช้ด้วย useSelector()
4. สร้างและเรียกใช้ Action

5. สร้าง Thunk เพื่อเรียกใช้ Async Operation Azure OpenAI Service

   OpenAI API

6. (Optional) คุยต่อเนื่อง Azure OpenAI service