John Remillard
c78604de02
Sets up the basic project configuration for Cognitive Clarity. This includes: - Initializing `package.json` with necessary dependencies (React, Gemini API, Lucide React) and build scripts for Vite. - Creating a basic `index.html` with Tailwind CSS and Google Fonts integration. - Setting up `index.tsx` as the React application entry point. - Configuring `tsconfig.json` for TypeScript compilation with Vite. - Establishing `vite.config.ts` for development server setup and environment variable handling. - Adding a standard `.gitignore` file. - Updating `README.md` with local run instructions and AI Studio links. - Defining `metadata.json` for application details. - Creating core type definitions in `types.ts`. - Populating `constants.ts` with initial CBT glossary terms. - Adding utility functions for audio processing in `services/audioUtils.ts`.
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import { Send } from 'lucide-react';
|
|
|
|
interface ChatInputProps {
|
|
onSend: (text: string) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const ChatInput: React.FC<ChatInputProps> = ({ onSend, disabled }) => {
|
|
const [input, setInput] = useState('');
|
|
|
|
const handleSend = () => {
|
|
if (!input.trim() || disabled) return;
|
|
onSend(input);
|
|
setInput('');
|
|
};
|
|
|
|
return (
|
|
<div className="p-4 border-t border-slate-100 bg-[#FCFDFF]">
|
|
<div className="flex gap-2 max-w-3xl mx-auto">
|
|
<input
|
|
type="text"
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleSend()}
|
|
placeholder="Type your response in character..."
|
|
className="flex-grow px-5 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-500 bg-white text-slate-900 placeholder:text-slate-400 text-sm shadow-inner"
|
|
disabled={disabled}
|
|
/>
|
|
<button
|
|
onClick={handleSend}
|
|
disabled={disabled || !input.trim()}
|
|
className="bg-teal-600 text-white p-3 rounded-xl hover:bg-teal-700 disabled:opacity-50 transition-all shadow-md shadow-teal-100 active:scale-95"
|
|
>
|
|
<Send size={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ChatInput);
|