Minichan

- src/
  - components/
    - ChatGPT/
      - ChatGPT.js
      - ChatGPT.module.css
    - GoogleSearch/
      - GoogleSearch.js
      - GoogleSearch.module.css
  - App.js
  - App.css
  - index.js
  - index.css
- public/
  - index.html
  - favicon.ico
  - manifest.json
- package.json
- README.md

// CoDev - A GPT 4.0 Virtual Developer

import React, { useState, useEffect } from "react";
import styles from "./ChatGPT.module.css";

const ChatGPT = ({ apiKey }) => {
  const [input, setInput] = useState("");
  const [responses, setResponses] = useState([]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!input.trim()) return;

    try {
      const response = await fetch(`https://api.openai.com/v1/engines/davinci-codex/completions`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${apiKey}`,
        },
        body: JSON.stringify({
          prompt: input,
          max_tokens: 100,
          n: 1,
          stop: null,
          temperature: 1,
        }),
      });

      if (response.ok) {
        const data = await response.json();
        setResponses([...responses, { input, output: data.choices[0].text }]);
      } else {
        console.error("Error fetching completion:", response.status, response.statusText);
      }
    } catch (error) {
      console.error("Error fetching completion:", error);
    }

    setInput("");
  };

  return (
    <div className={styles.ChatGPT}>
      <h2>ChatGPT</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask ChatGPT something..."
        />
        <button type="submit">Send</button>
      </form>
      <div className={styles.responses}>
        {responses.map((response, index) => (
          <div key={index} className={styles.response}>
            <p>
              <strong>You:</strong> {response.input}
            </p>
            <p>
              <strong>ChatGPT:</strong> {response.output}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ChatGPT;

/* CoDev - A GPT 4.0 Virtual Developer */

.ChatGPT {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.ChatGPT form {
  display: flex;
  width: 100%;
  max-width: 600px;
}

.ChatGPT input {
  flex-grow: 1;
  padding: 8px;
}

.ChatGPT button {
  padding: 8px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

.ChatGPT button:hover {
  background-color: #45a049;
}

.responses {
  width: 100%;
  max-width: 600px;
  margin-top: 16px;
}

.response {
  border-bottom: 1px solid #ccc;
  padding: 8px;
}

.response:last-child {
  border-bottom: none;
}