diff --git a/community-chatbot/.gitignore b/community-chatbot/.gitignore index f398c97d..e7fbc9c1 100644 --- a/community-chatbot/.gitignore +++ b/community-chatbot/.gitignore @@ -31,3 +31,4 @@ next-env.d.ts __pycache__/ *.sql *.py +Jira/ \ No newline at end of file diff --git a/community-chatbot/app/globals.css b/community-chatbot/app/globals.css index ac684423..86d0524e 100644 --- a/community-chatbot/app/globals.css +++ b/community-chatbot/app/globals.css @@ -92,3 +92,44 @@ body { @apply bg-background text-foreground; } } + +@layer utilities { + + /* Minimal aesthetic scrollbar */ + .scrollbar-aesthetic { + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: rgba(0, 0, 0, 0.8) transparent; + } + + /* Chrome / Edge / Safari */ + .scrollbar-aesthetic::-webkit-scrollbar { + width: 6px; + } + + .scrollbar-aesthetic::-webkit-scrollbar-track { + background: transparent; + } + + .scrollbar-aesthetic::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.5); + border-radius: 9999px; + } + + .scrollbar-aesthetic::-webkit-scrollbar-thumb:hover { + background: rgba(0, 0, 0, 1); + } + + /* Dark mode */ + .dark .scrollbar-aesthetic { + scrollbar-color: rgba(255, 255, 255, 0.3) transparent; + } + + .dark .scrollbar-aesthetic::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + } + + .dark .scrollbar-aesthetic::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.5); + } +} \ No newline at end of file diff --git a/community-chatbot/components/agent/Mode/Chat/InputBox.tsx b/community-chatbot/components/agent/Mode/Chat/InputBox.tsx index 774c9add..9a34ad07 100644 --- a/community-chatbot/components/agent/Mode/Chat/InputBox.tsx +++ b/community-chatbot/components/agent/Mode/Chat/InputBox.tsx @@ -1,8 +1,11 @@ +import { + MessageInput, +} from '@/components/agent/Mode/Chat/InputBox/MessageInput'; +import { + SubmitButton, +} from '@/components/agent/Mode/Chat/InputBox/SubmitButton'; import { useSendMessage } from '@/hooks/agent/Mode/Chat/useSendMessage'; -import { MessageInput } from './InputBox/MessageInput'; -import { SubmitButton } from './InputBox/SubmitButton'; - export function InputBox() { const { handleSendMessage } = useSendMessage(); const handleSubmit = async (event?: React.FormEvent) => { @@ -13,11 +16,11 @@ export function InputBox() { return (
-
+
); -} \ No newline at end of file +} diff --git a/community-chatbot/components/agent/Mode/Chat/InputBox/MessageInput.tsx b/community-chatbot/components/agent/Mode/Chat/InputBox/MessageInput.tsx index e10a0de9..3f74d580 100644 --- a/community-chatbot/components/agent/Mode/Chat/InputBox/MessageInput.tsx +++ b/community-chatbot/components/agent/Mode/Chat/InputBox/MessageInput.tsx @@ -1,28 +1,42 @@ import { usePathname } from 'next/navigation'; +import Textarea from 'react-textarea-autosize'; -import { Input } from '@/components/ui/input'; +import { useSendMessage } from '@/hooks/agent/Mode/Chat/useSendMessage'; import { integrationModes } from '@/lib/constants/chat'; import { useAgentStore } from '@/lib/store/agent/agentStore'; export function MessageInput() { const { input, setInput, status } = useAgentStore(); + const { handleSendMessage } = useSendMessage(); const pathname = usePathname(); const currentMode = pathname.split('/')[1]; const name = integrationModes.find((m) => m.id === currentMode)?.name; - const handleInputChange = (e: React.ChangeEvent) => { + const handleInputChange = (e: React.ChangeEvent) => { setInput(e.target.value); }; + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + if (input.trim()) { + handleSendMessage(); + } + } + }; + return ( -
- +