got rid of the excess whitespaces and added the maxOutputTokens into the GenerateConfig in the types.ts

This commit is contained in:
Ivan Rudik
2025-11-09 05:42:16 +00:00
parent 3686ae72da
commit 73668377bf
16 changed files with 366 additions and 371 deletions
+48 -49
View File
@@ -17,8 +17,8 @@ export default function ChatInput({ onSend, onOpenSettings }: ChatInputProps) {
const handleSend = () => {
if (message.trim()) {
onSend(message.trim());
setMessage("");
onSend(message.trim());
setMessage("");
}
};
@@ -34,62 +34,61 @@ export default function ChatInput({ onSend, onOpenSettings }: ChatInputProps) {
return (
<div className="fixed bottom-0 left-0 right-0 flex flex-col max-w-4xl mx-auto w-full">
<div
className={`
<div
className={`
flex items-center border border-black/10 p-3 mx-4 rounded-t-3xl
bg-white
shadow-md transition-all duration-200
`}
>
<div className="relative flex-1 mx-2">
<textarea
className="w-full px-3 py-2 bg-transparent border-none focus:outline-none"
placeholder="Type a message..."
value={message}
onChange={handleChange}
onKeyDown={handleKeyPress}
/>
{message && (
<button
className="absolute right-0 top-1/2 transform -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 "
onClick={handleClear}
aria-label="Clear input"
>
<X size={16} />
</button>
)}
</div>
<div className="flex items-center">
<button
className="p-2 text-gray-500 hover:text-purple-600 rounded-full hover:bg-gray-100 0 mr-1"
onClick={onOpenSettings}
aria-label="Open settings"
>
<Settings size={20} />
</button>
<button
className={`
<div className="relative flex-1 mx-2">
<textarea
className="w-full px-3 py-2 bg-transparent border-none focus:outline-none"
placeholder="Type a message..."
value={message}
onChange={handleChange}
onKeyDown={handleKeyPress}
/>
{message && (
<button
className="absolute right-0 top-1/2 transform -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 "
onClick={handleClear}
aria-label="Clear input"
>
<X size={16} />
</button>
)}
</div>
<div className="flex items-center">
<button
className="p-2 text-gray-500 hover:text-purple-600 rounded-full hover:bg-gray-100 0 mr-1"
onClick={onOpenSettings}
aria-label="Open settings"
>
<Settings size={20} />
</button>
<button
className={`
p-2 rounded-full transition-all
${
message.trim()
? "bg-purple-600 text-white hover:bg-purple-700"
: "bg-gray-200 text-gray-400 cursor-not-allowed"
}
${message.trim()
? "bg-purple-600 text-white hover:bg-purple-700"
: "bg-gray-200 text-gray-400 cursor-not-allowed"
}
`}
onClick={handleSend}
disabled={!message.trim()}
aria-label="Send message"
>
<Send size={20} />
</button>
</div>
onClick={handleSend}
disabled={!message.trim()}
aria-label="Send message"
>
<Send size={20} />
</button>
</div>
</div>
</div>
);
+24 -24
View File
@@ -1,30 +1,30 @@
"use client";
import { useRef, useEffect } from "react";
import { ChatHistory } from "@/app/exportType/types";
import {User, Bot} from "lucide-react"
import { User, Bot } from "lucide-react"
interface MessageWindowProps{
history :ChatHistory
interface MessageWindowProps {
history: ChatHistory
}
export default function MessageWindow({history}:MessageWindowProps){
export default function MessageWindow({ history }: MessageWindowProps) {
const messageEndRef = useRef<HTMLDivElement>(null);
useEffect(() =>{
messageEndRef.current?.scrollIntoView({behavior:"smooth"});
useEffect(() => {
messageEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [history]);
return(
return (
<div className="flex-1 p-3 overflow-y-auto">
<div className="max-w-3xl mx-auto">
{history.map((msg,index)=>{
{history.map((msg, index) => {
const isUser = msg.role === "user"
return (
<div
key={index}
className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
{!isUser &&(
<div
key={index}
className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
{!isUser && (
<div className="mr-2">
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray">
<Bot size={15} className="text-gray-700">
@@ -41,20 +41,20 @@ export default function MessageWindow({history}:MessageWindowProps){
<span key={idx}>{part.text}</span>))}
</div>
</div>
{isUser && (
<div className="ml-2">
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-purple-500">
<User size={16} className="text-white" />
{isUser && (
<div className="ml-2">
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-purple-500">
<User size={16} className="text-white" />
</div>
</div>
</div>
)}
)}
</div>
);
})}
{/* Invisible element to help scroll to bottom */}
<div ref={messageEndRef} />
);
})}
{/* Invisible element to help scroll to bottom */}
<div ref={messageEndRef} />
</div>
</div>
</div>
);
}
+30 -30
View File
@@ -1,42 +1,42 @@
import { GoogleGenerativeAI } from "@google/generative-ai";
import { ChatHistory, GenerateConfig,ChatSetting } from "../exportType/types";
import { ChatHistory, GenerateConfig, ChatSetting } from "../exportType/types";
const apiKey = process.env.GEMINI_API_KEY;
if(!apiKey){
if (!apiKey) {
throw new Error("api key not found");
}
const genAI = new GoogleGenerativeAI(apiKey);
export async function chatToGemini(
userMessage:string ,
history:ChatHistory,
settings:ChatSetting
):Promise<string>{
const model = genAI.getGenerativeModel({
model:settings.model || "gemini-2.5-flash",
systemInstruction: settings.sysTemInstructions || "you are going to create a project idea, explain it in summery first before going to detail",
});
const generationConfig:GenerateConfig = {
temperature : settings.temperature || 1,
topP : 0.9,
responseMimeType: "text/plain",
maxOutputTokens: 1900, // Increased to allow for longer responses
}
userMessage: string,
history: ChatHistory,
settings: ChatSetting
): Promise<string> {
const model = genAI.getGenerativeModel({
model: settings.model || "gemini-2.5-flash",
systemInstruction: settings.sysTemInstructions || "you are going to create a project idea, explain it in summery first before going to detail",
});
const chatSession = model.startChat({
generationConfig,
history
})
const generationConfig: GenerateConfig = {
temperature: settings.temperature || 1,
topP: 0.9,
responseMimeType: "text/plain",
maxOutputTokens: 1900, // Increased to allow for longer responses
}
try {
const result = await chatSession.sendMessage(userMessage);
return result.response.text();
}
catch(error){
console.error(error)
throw error
}
}
const chatSession = model.startChat({
generationConfig,
history
})
try {
const result = await chatSession.sendMessage(userMessage);
return result.response.text();
}
catch (error) {
console.error(error)
throw error
}
}