CHAT AI DEMO

D2D-AI Chat คือแพลตฟอร์ม AI Chat ที่พัฒนาโดยใช้ Next.js 16 (App Router) และ TypeScript โดยเน้นสร้างประสบการณ์การใช้งานที่พรีเมียมและจัดการข้อมูลได้อย่างเป็นระบบ

1. ระบบห้องแชท (Persistent Sessions) รองรับการสร้างหลายห้องแชทพร้อมกัน โดยข้อมูลจะถูกเก็บไว้ในเครื่องผ่าน Zustand ทำให้ประวัติการสนทนาไม่หายไปเมื่อปิดเบราว์เซอร์.

2. การจัดการโปรเจกต์ ผู้ใช้สามารถจัดกลุ่มห้องแชทแยกตามโปรเจกต์ (Projects) เพื่อความเป็นระเบียบในการทำงาน.

3. ดีไซน์ที่สวยงาม ใช้ HeroUI และ Tailwind CSS 4 ในการสร้างหน้าจอที่ทันสมัย รองรับการแสดงผลทุกอุปกรณ์ (Responsive) และมีอนิเมชั่นที่นุ่มนวลจาก Framer Motion

4. ฟีเจอร์ครบครัน รองรับการแก้ไขข้อความที่ส่งไปแล้ว (และตัดบทสนทนาต่อจากนั้น), การแนบไฟล์, การจัดการโปรไฟล์ผู้ใช้ และหน้าตั้งค่าที่ละเอียดมาก (ปรับธีม, การแจ้งเตือน, ความปลอดภัย)

5. โครงสร้างแอปฯ มีระบบสมาชิก (Login/Register) และหน้าเฉพาะทางอื่นๆ เช่น ส่วนจัดการเอกสาร (Documents), คลังภาพ (Gallery), และหน้าราคา (Pricing)

Main page

หน้าแรกเมื่อยังไม่มีการเริ่มแชท จะแสดงคำทักทายตามช่วงเวลา (เช่น "Good morning") มีช่องป้อนคำสั่ง (Chat Input) ตรงกลางที่โดดเด่น พร้อมด้วย "Quick Prompts" หรือคำแนะนำด่วนเพื่อช่วยให้ผู้ใช้เริ่มบทสนทนาได้ทันที ส่วนแถบด้านบนจะแสดงชื่อว่า "New Chat"

Chat page

เมื่อเริ่มการสนทนา หน้าจอจะเปลี่ยนเป็นรูปแบบเธรดการแชท (Chat Thread) ที่เลื่อนดูได้โดยแสดงข้อความโต้ตอบระหว่างผู้ใช้และ AI ช่องป้อนคำสั่งจะถูกปรับให้เล็กลง (Compact) และตรึงไว้ที่ด้านล่าง ผู้ใช้สามารถแก้ไขข้อความที่เคยส่งไปแล้วได้ ซึ่งระบบจะตัดประวัติการแชทที่ตามมาออกเพื่อให้การสนทนาต่อเนื่องอย่างสมเหตุสมผล

Login page

หน้าเข้าสู่ระบบที่ออกแบบมาอย่างทันสมัยและปลอดภัย ประกอบด้วยช่องกรอกอีเมลและรหัสผ่าน (ที่สามารถเปิด-ปิดการมองเห็นได้) มีลิงก์สำหรับลืมรหัสผ่าน และปุ่ม "Sign In" สีไล่เฉดที่โดดเด่น พร้อมทั้งมีทางเลือกให้ผู้ใช้ใหม่กดไปหน้าสมัครสมาชิกได้ง่าย

Pricing page

หน้าแสดงแพ็กเกจราคาที่โปร่งใส แบ่งเป็น 3 ระดับ: Basic (ฟรี), Pro (คุ้มค่าที่สุด) และ Enterprise (สำหรับองค์กร) แต่ละบัตรจะระบุฟีเจอร์ที่ได้รับอย่างชัดเจน โดยแผน "Pro" จะถูกเน้นด้วยขอบสีไล่เฉดที่เคลื่อนไหวได้และติดป้าย "Best Value" เพื่อดึงดูดความสนใจ

New Project management

ส่วนจัดการพื้นที่ทำงานสำหรับจัดระเบียบการแชท ผู้ใช้สามารถสร้าง "Project" ใหม่ผ่านหน้าต่าง Modal และจะแสดงผลเป็นตาราง (Grid) ส่วนนี้ช่วยให้ผู้ใช้จัดกลุ่มการสนทนาที่เกี่ยวข้องกันไว้ในโฟลเดอร์เดียวกัน ช่วยให้การจัดการหลายงานหรือหลายหัวข้อทำได้ง่ายขึ้นอย่างเป็นระบบ

Click here to visit https://d2d-ai-chat-demo.vercel.app/

Technical Stack

1. Framework Next.js 16 (App Router)

2. Language TypeScript

3. Styling Tailwind CSS 4 & HeroUI

4. State Management Zustand (with Persistence)

5. Animations Framer Motion

6. Icons React Icons