yemowith-chat-web-ui

React bileşenleri ve provider’ları ile sohbet arayüzü. Chat Service backend’i (REST + WebSocket) ile çalışır.

Kurulum

npm install yemowith-chat-web-ui

Gereksinimler: React 18+, Tailwind CSS (bileşen sınıfları Tailwind kullanır).

Yayınlama (Publishing)

Paket klasöründe node_modules yoksa (workspace’te bağımlılıklar kökte olduğu için) önce kök dizinden build alın, sonra publish edin:

# Kök dizinden (chat-service veya yemowith-chat-web-ui repo kökü)
npm install
npm run build --workspace=yemowith-chat-web-ui
# Ardından paket klasöründen
cd packages/chat-ui-web && npm publish

Kök dizinde workspace yoksa: packages/chat-ui-web içinde npm install çalıştırıp ardından npm run build ve npm publish yapabilirsiniz.

Tailwind

Bileşenler Tailwind sınıfları kullandığı için, projenizde bu sınıfların üretilmesi için paket kaynağını eklemeniz gerekir. Tailwind varsayılan olarak node_modules içini taramaz, bu yüzden aşağıdaki ayarlardan birini uygulayın.

Tailwind v4

CSS dosyanıza (örn. globals.css) @source ekleyin (yol, bu dosyaya göre proje köküne göre ayarlayın):

@import "tailwindcss";

/* Paket bileşenlerindeki Tailwind sınıflarının taranması */
@source "../../node_modules/yemowith-chat-web-ui/dist";

Örnek: CSS dosyanız src/app/globals.css ise ../../ proje köküne çıkar; farklı bir dizindeyse yolu buna göre değiştirin.

Tailwind v3

tailwind.config.js içinde content listesine paketi ekleyin:

content: [
  "./src/**/*.{js,ts,jsx,tsx}",
  "./node_modules/yemowith-chat-web-ui/dist/**/*.js",
],

API ve WebSocket URL’leri

• Next.js: NEXT_PUBLIC_CHAT_API_URL ve NEXT_PUBLIC_CHAT_WS_URL ortam değişkenleri kullanılır (varsayılan: http://localhost:3000).
• Diğer projeler: ChatProvider’a apiBaseUrl ve wsUrl prop’larını verin:

<ChatProvider
  token={token}
  userId={userId}
  profile={profile}
  onLogout={logout}
  apiBaseUrl="https://api.example.com"
  wsUrl="https://api.example.com"
>
  {children}
</ChatProvider>

Kullanım

Auth (token, kullanıcı bilgisi) kendi uygulamanızdan gelir; ChatProvider sadece token ve profile props alır.

import {
  ChatProvider,
  useChat,
  ChatSidebar,
  ChatMessageList,
  ChatInputForm,
  ChatAreaHeader,
  getConversations,
  getMessages,
  getBlockedUsers,
  blockUser,
  unblockUser,
} from "yemowith-chat-web-ui";

// Root’ta (kendi auth’ınızdan token/profile alın)
function App() {
  const { token, userId, profile, logout } = useYourAuth();
  return (
    <ChatProvider
      token={token}
      userId={userId}
      profile={profile}
      onLogout={logout}
    >
      <ChatPage />
    </ChatProvider>
  );
}

// Sohbet sayfası
function ChatPage() {
  const { token, userId } = useChat();
  const [conversations, setConversations] = useState([]);
  const [messages, setMessages] = useState([]);
  const [selectedId, setSelectedId] = useState(null);

  useEffect(() => {
    if (!token) return;
    getConversations(token).then(setConversations);
  }, [token]);

  useEffect(() => {
    if (!token || !selectedId) return;
    getMessages(token, selectedId).then(setMessages);
  }, [token, selectedId]);

  return (
    <div className="flex">
      <ChatSidebar
        conversations={conversations}
        selectedId={selectedId}
        onSelectConversation={setSelectedId}
        currentUserId={userId}
        blockedUserIds={new Set()}
        onlineUserIds={{}}
        loading={false}
        getOtherUserId={(c) => c.userAId === userId ? c.userBId : c.userAId}
        getDisplayName={(c) => c.otherParticipant?.firstName ?? "Kullanıcı"}
        getAvatarUrl={(c) => c.otherParticipant?.avatarUrl ?? null}
        newChatUserId=""
        onNewChatUserIdChange={() => {}}
      />
      <main>
        {selectedId && (
          <>
            <ChatAreaHeader otherUser={...} displayName="..." ... />
            <ChatMessageList messages={messages} currentUserId={userId} />
            <ChatInputForm value={input} onChange={...} onSubmit={...} />
          </>
        )}
      </main>
    </div>
  );
}

Next.js Link

ChatPageHeader içindeki “Panel” / “Sohbet” linkleri varsayılan olarak <a> kullanır. Next.js’te next/link kullanmak için LinkComponent verin:

import Link from "next/link";
import { ChatPageHeader } from "yemowith-chat-web-ui";

<ChatPageHeader
  profile={profile}
  currentUserId={currentUserId}
  connected={connected}
  onOpenBot={() => {}}
  onLogout={logout}
  LinkComponent={Link}
/>

Export’lar

• Provider: ChatProvider, useChat, ChatProviderProps, Profile, ChatMessage
• Bileşenler: ChatAreaHeader, ChatPageHeader, ChatSidebar, ChatMessageList, ChatTypingStatus, ChatInputForm, ChatEmptyState, BotChatModal, MessageBubble
• Tipler: Conversation, MessageRow, OtherParticipant, LastMessage, BOT_USER_ID
• API: getConversations, getMessages, getBlockedUsers, blockUser, unblockUser, ChatApiError
• Config: setChatConfig, getApiBaseUrl, getWsUrl, cn
• UI: Button, Input, Card, Avatar, ScrollArea, vb.

Lisans

MIT