واجهة المستخدم لـ ChatGPT: إنشاء دردشة تفاعلية

مقدمة

في هذه الوحدة، سننشئ واجهة مستخدم حديثة وسريعة الاستجابة للتفاعل مع واجهة ChatGPT البرمجية (API). سنستخدم React لبناء الواجهة، لكن يمكن تكييف المفاهيم مع أطر عمل أخرى.

إعداد المشروع

تثبيت الاعتماديات

npm create vite@latest chatgpt-ui -- --template react
cd chatgpt-ui
npm install openai axios @chakra-ui/react @emotion/react @emotion/styled framer-motion

بنية المشروع

chatgpt-ui/
├── src/
│   ├── components/
│   │   ├── ChatWindow.jsx
│   │   ├── MessageInput.jsx
│   │   └── Message.jsx
│   ├── hooks/
│   │   └── useChatGPT.js
│   ├── App.jsx
│   └── main.jsx
└── .env

إنشاء المكوّنات

1. الخطاف useChatGPT

// src/hooks/useChatGPT.js
import { useState } from 'react';
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: import.meta.env.VITE_OPENAI_API_KEY
});

export function useChatGPT() {
  const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const sendMessage = async (content) => {
    try {
      setIsLoading(true);
      
      // إضافة رسالة المستخدم
      const userMessage = { role: 'user', content };
      setMessages(prev => [...prev, userMessage]);

      // استدعاء واجهة ChatGPT البرمجية
      const completion = await openai.chat.completions.create({
        model: "gpt-3.5-turbo",
        messages: [
          { role: "system", content: "Vous êtes un assistant utile." },
          ...messages,
          userMessage
        ],
      });

      // إضافة رد المساعد
      const assistantMessage = completion.choices[0].message;
      setMessages(prev => [...prev, assistantMessage]);

      return assistantMessage;
    } catch (error) {
      console.error('Erreur lors de l\'envoi du message:', error);
      throw error;
    } finally {
      setIsLoading(false);
    }
  };

  return {
    messages,
    isLoading,
    sendMessage
  };
}