blob: 38f89815c2aaacca1ff99c7f74b393adc756567b (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
"use client"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { generateId } from "@lib/generate-id"
import { usePersistentChat } from "@/stores/chat"
import { ArrowUp } from "lucide-react"
import { Button } from "@ui/components/button"
import { ProjectSelector } from "./project-selector"
import { ModelSelector } from "./model-selector"
import { useAuth } from "@lib/auth-context"
export function ChatInput() {
const [message, setMessage] = useState("")
const [selectedModel, setSelectedModel] = useState<
"gpt-5" | "claude-sonnet-4.5" | "gemini-2.5-pro"
>("gemini-2.5-pro")
const router = useRouter()
const { setCurrentChatId } = usePersistentChat()
const { user } = useAuth()
useEffect(() => {
const savedModel = localStorage.getItem("selectedModel") as
| "gpt-5"
| "claude-sonnet-4.5"
| "gemini-2.5-pro"
if (
savedModel &&
["gpt-5", "claude-sonnet-4.5", "gemini-2.5-pro"].includes(savedModel)
) {
setSelectedModel(savedModel)
}
}, [])
const handleModelChange = (
modelId: "gpt-5" | "claude-sonnet-4.5" | "gemini-2.5-pro",
) => {
setSelectedModel(modelId)
localStorage.setItem("selectedModel", modelId)
}
const handleSend = () => {
if (!message.trim()) return
const newChatId = generateId()
setCurrentChatId(newChatId)
sessionStorage.setItem(`chat-initial-${newChatId}`, message.trim())
sessionStorage.setItem(`chat-model-${newChatId}`, selectedModel)
router.push(`/chat/${newChatId}`)
setMessage("")
}
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault()
handleSend()
}
}
return (
<div className="flex-1 flex items-center justify-center px-4">
<div className="w-full max-w-4xl">
<div className="text-start mb-4">
<h2 className="text-3xl font-bold text-foreground">
Welcome, <span className="text-primary">{user?.name}</span>
</h2>
</div>
<div className="relative">
<form
className="flex flex-col items-end bg-card border border-border rounded-[14px] shadow-lg"
onSubmit={(e) => {
e.preventDefault()
if (!message.trim()) return
handleSend()
}}
>
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Ask your supermemory..."
className="w-full text-foreground placeholder-muted-foreground rounded-md outline-none resize-none text-base leading-relaxed px-6 py-4 bg-transparent"
rows={2}
/>
<div className="flex items-center gap-2 w-full justify-between py-2 px-3 rounded-b-[14px]">
<ProjectSelector />
<div className="flex items-center gap-2">
<ModelSelector
selectedModel={selectedModel}
onModelChange={handleModelChange}
/>
<Button
onClick={handleSend}
disabled={!message.trim()}
className="text-primary-foreground border-0 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed !bg-primary h-8 w-8"
variant="outline"
size="icon"
>
<ArrowUp className="size-3.5" />
</Button>
</div>
</div>
</form>
</div>
</div>
</div>
)
}
|