Добавлены новые зависимости для работы с эмодзи и улучшена структура базы данных. Реализована модель сообщений и обновлены компоненты для поддержки новых функций мессенджера. Обновлены запросы и мутации для работы с сообщениями и чатом.

src/components/ui/emoji-picker.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import dynamic from 'next/dynamic'
+import { useState, useRef, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Smile } from 'lucide-react'
+
+// Динамически импортируем EmojiPicker чтобы избежать проблем с SSR
+const EmojiPicker = dynamic(
+  () => import('emoji-picker-react'),
+  { ssr: false }
+)
+
+interface EmojiPickerComponentProps {
+  onEmojiSelect: (emoji: string) => void
+}
+
+export function EmojiPickerComponent({ onEmojiSelect }: EmojiPickerComponentProps) {
+  const [showPicker, setShowPicker] = useState(false)
+  const pickerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (pickerRef.current && !pickerRef.current.contains(event.target as Node)) {
+        setShowPicker(false)
+      }
+    }
+
+    if (showPicker) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [showPicker])
+
+  const handleEmojiClick = (emojiData: { emoji: string }) => {
+    onEmojiSelect(emojiData.emoji)
+    setShowPicker(false)
+  }
+
+  return (
+    <div className="relative" ref={pickerRef}>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => setShowPicker(!showPicker)}
+        className="text-white/60 hover:text-white hover:bg-white/10 p-2"
+      >
+        <Smile className="h-4 w-4" />
+      </Button>
+
+      {showPicker && (
+        <div className="absolute bottom-full right-0 mb-2 z-50">
+          <div className="bg-gray-800 border border-white/20 rounded-lg overflow-hidden shadow-xl">
+            <EmojiPicker
+              onEmojiClick={handleEmojiClick}
+              width={350}
+              height={400}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}