1  import { useState } from 'react';
 2  import PropTypes from 'prop-types';
 3  
 4  import './NewChatInterface.css';
 5  
 6  const NewChatInterface = ({ onClose }) => {
 7    const [chatName, setChatName] = useState('');
 8    const [selectedModel, setSelectedModel] = useState('');
 9    const [systemPrompt, setSystemPrompt] = useState('');
10    const [temperature, setTemperature] = useState(0.5);
11    const [maxTokens, setMaxTokens] = useState(500);
12  
13    const handleSubmit = (e) => {
14      e.preventDefault();
15      // Handle the form submission and start the new chat
16      console.log('Chat Name:', chatName);
17      console.log('Selected Model:', selectedModel);
18      console.log('System Prompt:', systemPrompt);
19      console.log('Temperature:', temperature);
20      console.log('Max Tokens:', maxTokens);
21    };
22  
23    return (
24      <div className="new-chat-interface">
25        <div className="new-chat-header">
26          <h2 className="new-chat-header-texr">New Chat</h2>
27          <button className="close-button" onClick={onClose}>
28            &times;
29          </button>
30        </div>
31        <form className="new-chat-form" onSubmit={handleSubmit}>
32          <div className="new-chat-form-group" id="chat-name-form-group">
33            <label id="chat-name-label" htmlFor="chat-name">Chat name:</label>
34            <input
35              type="text"
36              id="chat-name-input"
37              value={chatName}
38              onChange={(e) => setChatName(e.target.value)}
39            />
40          </div>
41          <div className="new-chat-form-group" id="model-select-form-group">
42            <label htmlFor="model-select">Select Model:</label>
43            <select
44              id="model-select"
45              value={selectedModel}
46              onChange={(e) => setSelectedModel(e.target.value)}
47            >
48              <option value="">Select a model</option>
49              <option value="openai">OpenAI</option>
50              <option value="anthropic">Anthropic</option>
51              {/* Add more model options */}
52            </select>
53          </div>
54          <div className="new-chat-form-group" id="temperature-form-group">
55            <label htmlFor="temperature">Temperature:</label>
56            <input
57              type="range"
58              id="temperature"
59              min="0"
60              max="1"
61              step="0.01"
62              value={temperature}
63              onChange={(e) => setTemperature(parseFloat(e.target.value))}
64            />
65            <span className="temperature-value">{temperature.toFixed(2)}</span>
66          </div>
67          <div className="new-chat-form-group" id="max-tokens-form-group">
68            <label htmlFor="max-tokens">Maximum Tokens:</label>
69            <input
70              type="text"
71              id="max-tokens"
72              value={maxTokens}
73              onChange={(e) => setMaxTokens(parseInt(e.target.value))}
74            />
75          </div>
76          <div className="new-chat-form-group" id="system-prompt-form-group">
77            <label htmlFor="system-prompt">System Prompt:</label>
78            <textarea
79              id="system-prompt"
80              value={systemPrompt}
81              onChange={(e) => setSystemPrompt(e.target.value)}
82            ></textarea>
83          </div>
84          <button type="submit" className="start-new-chat-button">
85            Start New Chat
86          </button>
87        </form>
88      </div>
89    );
90  };
91  
92  NewChatInterface.propTypes = {
93    onClose: PropTypes.func.isRequired
94  }
95  
96  export default NewChatInterface;