@terrafirmagreg-team/chat 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,42 @@
 {
   "name": "@terrafirmagreg-team/chat",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/ui/index.ts",
+    "./lib": "./src/lib/index.ts",
+    "./styles.css": "./src/styles.css",
+    "./*": [
+      "./src/*.ts",
+      "./src/*.tsx",
+      "./src/*/index.ts",
+      "./src/*/index.tsx"
+    ]
+  },
+  "files": [
+    "src",
+    "styles",
+    "styles.css"
+  ],
+  "dependencies": {
+    "@terrafirmagreg-team/ui": "0.1.0",
+    "lucide-react": "^1.63.0",
+    "@terrafirmagreg-team/translate": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TerraFirmaGreg-Team/Web-Foundation.git",
+    "directory": "packages/chat"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/lib/identity.ts

@@ -0,0 +1,28 @@
+import type {ChatMessage} from '@terrafirmagreg-team/chat/types';
+
+export function getStoredName(key: string): string {
+  try {
+    return window.localStorage?.getItem(key) ?? '';
+  } catch {
+    return '';
+  }
+}
+
+export function setStoredName(key: string, name: string): void {
+  try {
+    window.localStorage?.setItem(key, name);
+  } catch {
+
+  }
+}
+
+
+export function isOwnChatMessage(
+  message: ChatMessage,
+  names: {chatName?: string; loginName?: string},
+): boolean {
+  if (message.type !== 'chat' || message.source !== 'web') return false;
+  const chat = names.chatName?.trim();
+  const login = names.loginName?.trim();
+  return (!!chat && message.playerName === chat) || (!!login && message.playerName === login);
+}

package/src/lib/index.ts

@@ -0,0 +1,12 @@
+export type {
+  ChatBoxSettings,
+  ChatMessage,
+  ChatMessageType,
+  ChatSendingSettings,
+} from '@terrafirmagreg-team/chat/types';
+export {
+  getStoredName,
+  isOwnChatMessage,
+  setStoredName,
+} from './identity';
+export { type ChatTranslate } from '@terrafirmagreg-team/chat/types';

package/src/locales/en_us.json

@@ -0,0 +1,16 @@
+{
+  "chat": {
+    "title": "Chat",
+    "noMessages": "No messages yet",
+    "placeholder": "Message",
+    "namePlaceholder": "Name",
+    "nameLabel": "Name",
+    "send": "Send",
+    "login": "Log in",
+    "playerJoin": "{playername} joined the game",
+    "playerQuit": "{playername} left the game",
+    "anonymousJoin": "A player joined the game",
+    "anonymousQuit": "A player left the game",
+    "errorUnknown": "Unknown error"
+  }
+}

package/src/locales/pl_pl.json

@@ -0,0 +1,16 @@
+{
+  "chat": {
+    "title": "Czat",
+    "noMessages": "Brak wiadomości",
+    "placeholder": "Wiadomość",
+    "namePlaceholder": "Nazwa",
+    "nameLabel": "Nazwa",
+    "send": "Wyślij",
+    "login": "Zaloguj się",
+    "playerJoin": "{playername} dołączył do gry",
+    "playerQuit": "{playername} opuścił grę",
+    "anonymousJoin": "Gracz dołączył do gry",
+    "anonymousQuit": "Gracz opuścił grę",
+    "errorUnknown": "Nieznany błąd"
+  }
+}

package/src/locales/ru_ru.json

@@ -0,0 +1,16 @@
+{
+  "chat": {
+    "title": "Чат",
+    "noMessages": "Пока нет сообщений",
+    "placeholder": "Сообщение",
+    "namePlaceholder": "Имя",
+    "nameLabel": "Имя",
+    "send": "Отправить",
+    "login": "Войти",
+    "playerJoin": "{playername} зашёл в игру",
+    "playerQuit": "{playername} вышел из игры",
+    "anonymousJoin": "Игрок зашёл в игру",
+    "anonymousQuit": "Игрок вышел из игры",
+    "errorUnknown": "Неизвестная ошибка"
+  }
+}

package/src/locales/uk_ua.json

@@ -0,0 +1,16 @@
+{
+  "chat": {
+    "title": "Чат",
+    "noMessages": "Поки немає повідомлень",
+    "placeholder": "Повідомлення",
+    "namePlaceholder": "Ім'я",
+    "nameLabel": "Ім'я",
+    "send": "Надіслати",
+    "login": "Увійти",
+    "playerJoin": "{playername} зайшов у гру",
+    "playerQuit": "{playername} вийшов з гри",
+    "anonymousJoin": "Гравець зайшов у гру",
+    "anonymousQuit": "Гравець вийшов з гри",
+    "errorUnknown": "Невідома помилка"
+  }
+}

package/src/locales/zh_cn.json

@@ -0,0 +1,16 @@
+{
+  "chat": {
+    "title": "",
+    "noMessages": "",
+    "placeholder": "",
+    "namePlaceholder": "",
+    "nameLabel": "",
+    "send": "",
+    "login": "",
+    "playerJoin": "{playername} ",
+    "playerQuit": "{playername} ",
+    "anonymousJoin": "",
+    "anonymousQuit": "",
+    "errorUnknown": ""
+  }
+}

package/src/locales/zh_tw.json

@@ -0,0 +1,16 @@
+{
+  "chat": {
+    "title": "",
+    "noMessages": "",
+    "placeholder": "",
+    "namePlaceholder": "",
+    "nameLabel": "",
+    "send": "",
+    "login": "",
+    "playerJoin": "{playername} ",
+    "playerQuit": "{playername} ",
+    "anonymousJoin": "",
+    "anonymousQuit": "",
+    "errorUnknown": ""
+  }
+}

package/src/locales.ts

@@ -0,0 +1,5 @@
+import { createLocaleCatalog } from '@terrafirmagreg-team/translate/lib/locales';
+
+export const locales = createLocaleCatalog(
+  import.meta.glob('./locales/*.json', { eager: true, import: 'default' }),
+);

package/src/styles.css

@@ -0,0 +1,179 @@
+.chat {
+	flex: 1 1 auto;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.chat__header {
+	display: flex;
+	align-items: center;
+	gap: 0.8rem;
+	flex-shrink: 0;
+	min-height: 5.6rem;
+	padding: 0 1.2rem 0 1.6rem;
+	border-bottom: 1px solid var(--border);
+}
+
+.chat__title {
+	flex: 1 1 auto;
+	min-width: 0;
+	font-size: 1.5rem;
+	font-weight: 600;
+	color: var(--text-emphasis);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.chat__close {
+	display: none;
+	flex: 0 0 auto;
+	width: 3.2rem;
+	height: 3.2rem;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	border-radius: 0.8rem;
+	background: transparent;
+	color: var(--muted-foreground);
+	cursor: pointer;
+	transition: background 0.15s, color 0.15s;
+}
+
+.chat__close:hover {
+	background: var(--accent);
+	color: var(--accent-foreground);
+}
+
+.chat__close .svg-icon {
+	width: 1.6rem;
+	height: 1.6rem;
+}
+
+@media (width < 1024px) {
+	.chat__close {
+		display: inline-flex;
+	}
+}
+
+.chat__offline {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.chat__offline-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.6rem;
+	height: 2.8rem;
+	padding: 0 1.2rem;
+	border-radius: 999px;
+	background: color-mix(in srgb, var(--color-secondary) 50%, transparent);
+	border: 1px solid var(--border);
+	color: var(--muted-foreground);
+	font-size: 1.2rem;
+}
+
+.chat__scroll {
+	flex: 1 1 auto;
+	min-height: 0;
+}
+
+.chat__content {
+	padding: 0.8rem 1.2rem 1.2rem;
+	gap: 0.8rem;
+}
+
+.chat__face {
+	border-radius: 999px;
+	display: block;
+}
+
+.chat__meta {
+	gap: 0.6rem;
+}
+
+.chat__meta > *:not(:first-child)::before {
+	content: '·\00a0';
+	opacity: 0.6;
+}
+
+.chat__event {
+	text-align: center;
+	font-size: 1.2rem;
+	font-style: italic;
+	color: var(--muted-foreground);
+}
+
+.chat__name {
+	flex: 1;
+	min-width: 0;
+	border: none;
+	background: transparent;
+	padding: 0;
+	color: var(--foreground);
+	font-size: 1.3rem;
+	outline: none;
+}
+
+.chat__name::placeholder {
+	color: var(--muted-foreground);
+}
+
+.chat__form {
+	flex: 0 0 auto;
+	display: flex;
+	flex-direction: column;
+	gap: 0.4rem;
+	margin: 0 1.2rem 1.2rem;
+}
+
+.chat__error {
+	display: flex;
+	align-items: center;
+	gap: 1.2rem;
+	border-radius: 0.8rem;
+	background: color-mix(in srgb, var(--destructive) 5%, transparent);
+	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destructive) 15%, transparent);
+	padding: 0.8rem 1.2rem;
+	font-size: 1.3rem;
+}
+
+.chat__error-dot {
+	width: 0.6rem;
+	height: 0.6rem;
+	border-radius: 999px;
+	background: var(--destructive);
+	flex: 0 0 auto;
+}
+
+.chat__login {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.8rem;
+	flex-shrink: 0;
+	margin: 0 1.2rem 1.2rem;
+	height: 4rem;
+	border: 1px solid var(--border);
+	border-radius: 0.8rem;
+	background: var(--popover);
+	color: var(--muted-foreground);
+	font-size: 1.4rem;
+	cursor: pointer;
+	transition: background 0.15s, color 0.15s;
+}
+
+.chat__login:hover {
+	color: var(--accent-foreground);
+	background: var(--accent);
+}
+
+@media (max-width: 400px), (max-height: 480px) {
+	.chat {
+		max-width: calc(100% - 7rem);
+	}
+}

package/src/types.ts

@@ -0,0 +1,31 @@
+export type ChatMessageType = 'chat' | 'playerjoin' | 'playerleave';
+
+export interface ChatMessage {
+  type: ChatMessageType;
+
+  message?: string;
+
+  playerName?: string;
+
+  playerAccount?: string;
+
+  channel?: string;
+
+  source?: string;
+  timestamp?: number;
+}
+
+export interface ChatBoxSettings {
+
+  messageHistory?: number;
+
+  showPlayerFaces?: boolean;
+}
+
+export interface ChatSendingSettings {
+  maxLength?: number;
+
+  loginRequired?: boolean;
+}
+
+export type ChatTranslate = (key: string, params?: Record<string, unknown>) => string;

package/src/ui/box.tsx

@@ -0,0 +1,228 @@
+'use client';
+import {useRef, useState, type FormEvent, type ReactNode} from 'react';
+import {ArrowUp, LogIn, User, WifiOff, X} from 'lucide-react';
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from '@terrafirmagreg-team/ui/components/ui/empty';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from '@terrafirmagreg-team/ui/components/ui/input-group';
+import {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport,
+} from '@terrafirmagreg-team/ui/components/ui/message-scroller';
+import {
+  getStoredName,
+  isOwnChatMessage,
+  setStoredName,
+} from '@terrafirmagreg-team/chat/lib';
+import type { ChatMessage, ChatTranslate } from '@terrafirmagreg-team/chat/types';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import {ChatMessageRow} from './message';
+
+export function ChatBox({
+  messages,
+  t,
+  offline = false,
+  loggedIn = false,
+  loginRequired = false,
+  maxLength,
+  messageHistory,
+  showPlayerFaces = false,
+  anonymousNameKey = 'plugin.chatname',
+  loginNameKey = 'plugin.loginname',
+  send,
+  onClose,
+  onLogin,
+  renderAvatar,
+  unknownError = 'chat.errorUnknown',
+}: {
+  messages: readonly ChatMessage[];
+  t: ChatTranslate;
+
+  offline?: boolean;
+  loggedIn?: boolean;
+  loginRequired?: boolean;
+  maxLength?: number;
+
+  messageHistory?: number;
+  showPlayerFaces?: boolean;
+
+  anonymousNameKey?: string;
+  loginNameKey?: string;
+
+  send?: (message: string, name?: string) => Promise<void>;
+  onClose?: () => void;
+  onLogin?: () => void;
+
+  renderAvatar?: (playerAccount: string) => ReactNode;
+
+  unknownError?: string;
+}) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [enteredMessage, setEnteredMessage] = useState('');
+  const [sendingMessage, setSendingMessage] = useState(false);
+  const [sendingError, setSendingError] = useState<string | null>(null);
+
+  const [chatName, setChatName] = useState(() => getStoredName(anonymousNameKey));
+  const rememberChatName = (name: string) => {
+    setChatName(name);
+    setStoredName(anonymousNameKey, name);
+  };
+  const loginName = getStoredName(loginNameKey);
+
+  const shown = messageHistory
+    ? messages.slice(0, messageHistory).reverse()
+    : [...messages].reverse();
+
+  const sendingEnabled = !loginRequired || loggedIn;
+  const nameMissing = !loggedIn && !chatName.trim();
+
+  const sendMessage = async (e?: FormEvent) => {
+    e?.preventDefault();
+    const message = enteredMessage.trim().substring(0, maxLength);
+    if (!message || nameMissing) return;
+
+    if (!send) return;
+
+    setSendingMessage(true);
+    setSendingError(null);
+    try {
+      await send(message, loggedIn ? undefined : chatName.trim() || undefined);
+      setEnteredMessage('');
+    } catch (err) {
+      setSendingError(err instanceof Error ? err.message : t(unknownError));
+    } finally {
+      setSendingMessage(false);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  };
+
+  return (
+    <section className="chat">
+      <header className="chat__header">
+        <p className="chat__title">{t('chat.title')}</p>
+        {onClose && (
+          <Hint label={t('common.close')}>
+            <button
+              type="button"
+              className="chat__close"
+              aria-label={t('common.close')}
+              onClick={onClose}>
+              <X className="size-4" aria-hidden="true" />
+            </button>
+          </Hint>
+        )}
+      </header>
+      {offline ? (
+        <div className="chat__offline" role="status">
+          <span className="chat__offline-chip">
+            <WifiOff className="size-3.5" aria-hidden="true" />
+            {t('servers.offline')}
+          </span>
+        </div>
+      ) : (
+        <MessageScrollerProvider autoScroll defaultScrollPosition="end">
+          <MessageScroller className="chat__scroll">
+            <MessageScrollerViewport role="log" aria-live="polite" aria-relevant="additions">
+              <MessageScrollerContent className="chat__content">
+                {shown.map(message => (
+                  <MessageScrollerItem key={message.timestamp + (message.playerName ?? '')}>
+                    <ChatMessageRow
+                      message={message}
+                      own={isOwnChatMessage(message, {chatName, loginName})}
+                      avatar={
+                        showPlayerFaces && message.playerAccount
+                          ? renderAvatar?.(message.playerAccount)
+                          : undefined
+                      }
+                      t={t}
+                    />
+                  </MessageScrollerItem>
+                ))}
+                {!shown.length && (
+                  <Empty>
+                    <EmptyHeader>
+                      <EmptyTitle>{t('chat.title')}</EmptyTitle>
+                      <EmptyDescription>{t('chat.noMessages')}</EmptyDescription>
+                    </EmptyHeader>
+                  </Empty>
+                )}
+              </MessageScrollerContent>
+            </MessageScrollerViewport>
+            <MessageScrollerButton />
+          </MessageScroller>
+        </MessageScrollerProvider>
+      )}
+      {!offline && send && sendingEnabled && (
+        <form className="chat__form" onSubmit={sendMessage}>
+          {sendingError && (
+            <div className="chat__error" role="alert">
+              <span className="chat__error-dot" aria-hidden="true" />
+              <span className="flex-1 min-w-0">{sendingError}</span>
+            </div>
+          )}
+          <InputGroup>
+            {!loggedIn && (
+              <InputGroupAddon align="block-start" className="border-b">
+                <User aria-hidden="true" />
+                <input
+                  className="chat__name"
+                  type="text"
+                  value={chatName}
+                  maxLength={24}
+                  placeholder={t('chat.namePlaceholder')}
+                  aria-label={t('chat.nameLabel')}
+                  onChange={e => rememberChatName(e.target.value)}
+                />
+              </InputGroupAddon>
+            )}
+            <InputGroupTextarea
+              ref={inputRef}
+              rows={2}
+              value={enteredMessage}
+              maxLength={maxLength}
+              placeholder={nameMissing ? t('chat.namePlaceholder') : t('chat.placeholder')}
+              disabled={sendingMessage || nameMissing}
+              aria-label={t('chat.placeholder')}
+              onChange={e => setEnteredMessage(e.target.value)}
+              onKeyDown={e => {
+                if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  void sendMessage();
+                }
+              }}
+            />
+            <InputGroupAddon align="block-end" className="justify-end">
+              <InputGroupButton
+                type="submit"
+                variant="default"
+                size="icon-sm"
+                disabled={!enteredMessage.trim() || sendingMessage || nameMissing}
+                aria-label={t('chat.send')}>
+                <ArrowUp strokeWidth={2.25} aria-hidden="true" />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </form>
+      )}
+      {send && loginRequired && !loggedIn && onLogin && (
+        <button type="button" className="chat__login" onClick={onLogin}>
+          <LogIn className="size-4" aria-hidden="true" />
+          {t('chat.login')}
+        </button>
+      )}
+    </section>
+  );
+}

package/src/ui/index.ts

@@ -0,0 +1,10 @@
+export {ChatBox} from './box';
+export {ChatMessageRow} from './message';
+export type {
+  ChatBoxSettings,
+  ChatMessage,
+  ChatMessageType,
+  ChatSendingSettings,
+  ChatTranslate,
+} from '@terrafirmagreg-team/chat/types';
+export {getStoredName, isOwnChatMessage, setStoredName} from '@terrafirmagreg-team/chat/lib';

package/src/ui/message.tsx

@@ -0,0 +1,58 @@
+'use client';
+import type {ReactNode} from 'react';
+import {Bubble, BubbleContent} from '@terrafirmagreg-team/ui/components/ui/bubble';
+import {Message, MessageAvatar, MessageContent, MessageHeader} from '@terrafirmagreg-team/ui/components/ui/message';
+import type {ChatMessage, ChatTranslate} from '@terrafirmagreg-team/chat/types';
+
+export function ChatMessageRow({
+  message,
+  own = false,
+  avatar,
+  t,
+}: {
+  message: ChatMessage;
+  own?: boolean;
+  avatar?: ReactNode;
+  t: ChatTranslate;
+}) {
+  const channel = message.type === 'chat' ? message.channel : undefined;
+
+  const content = (() => {
+    switch (message.type) {
+      case 'chat':
+        return message.message;
+      case 'playerjoin':
+        return message.playerName
+          ? t('chat.playerJoin', {playername: message.playerName})
+          : t('chat.anonymousJoin');
+      case 'playerleave':
+        return message.playerName
+          ? t('chat.playerQuit', {playername: message.playerName})
+          : t('chat.anonymousQuit');
+    }
+  })();
+
+  if (!content) return null;
+
+  if (message.type !== 'chat') {
+    return <p className="chat__event">{content}</p>;
+  }
+
+  return (
+    <Message align={own ? 'end' : 'start'}>
+      {!own && avatar && <MessageAvatar>{avatar}</MessageAvatar>}
+      <MessageContent>
+        {!own && (
+          <MessageHeader className="chat__meta">
+            {}
+            <span>{message.playerName || channel || '…'}</span>
+            {!!message.playerName && channel && <span>{channel}</span>}
+          </MessageHeader>
+        )}
+        <Bubble variant={own ? 'default' : 'muted'} align={own ? 'end' : 'start'}>
+          <BubbleContent>{content}</BubbleContent>
+        </Bubble>
+      </MessageContent>
+    </Message>
+  );
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.