@naviedu/room-platform-react 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naviedu/room-platform-react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "main": "./index.esm.js",
   "module": "./index.esm.js",
@@ -30,13 +30,10 @@
   "dependencies": {
     "@livekit/components-react": "^2.9.21",
     "@livekit/track-processors": "^0.7.2",
-    "@navi/chat-react": "0.0.0",
-    "@navi/feature-room-platform": "0.0.1",
-    "@navi/whiteboard-core": "0.0.1",
-    "@navi/whiteboard-react": "0.0.1",
-    "sonner": "^2.0.7",
+    "livekit-client": "^2.19.1",
     "lucide-react": "^1.7.0",
     "radix-ui": "^1.4.3",
-    "livekit-client": "^2.19.1"
+    "socket.io-client": "^4.8.1",
+    "sonner": "^2.0.7"
   }
 }

package/styles.css

@@ -596,3 +596,587 @@
         width: 100%;
     }
 }
+
+.navi-chat__panel {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    border: 1px solid var(--navi-chat-color-border, #d8e0ea);
+    border-radius: var(--navi-chat-radius, 10px);
+    background: var(--navi-chat-color-surface, #ffffff);
+    color: var(--navi-chat-color-text, #111827);
+    font-family: var(--navi-chat-font-family, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+.navi-chat__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex: 0 0 auto;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--navi-chat-color-border, #d8e0ea);
+    background: #f8fafc;
+}
+
+.navi-chat__header-main {
+    min-width: 0;
+}
+
+.navi-chat__title {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    overflow: hidden;
+    color: var(--navi-chat-color-text, #111827);
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1.25;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.navi-chat__online-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    border-radius: 999px;
+    background: #eff6ff;
+    color: var(--navi-chat-color-primary, #2563eb);
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    padding: 0 6px;
+}
+
+.navi-chat__header-meta {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 8px;
+}
+
+.navi-chat__role-badge {
+    border-radius: 999px;
+    background: #eff6ff;
+    color: var(--navi-chat-color-primary, #2563eb);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1;
+    padding: 5px 8px;
+}
+
+.navi-chat__rooms {
+    display: flex;
+    flex: 0 0 auto;
+    gap: 6px;
+    overflow-x: auto;
+    padding: 10px;
+    border-bottom: 1px solid var(--navi-chat-color-border, #d8e0ea);
+}
+
+.navi-chat__room-tab,
+.navi-chat__send-button,
+.navi-chat__message-action,
+.navi-chat__message-menu-trigger,
+.navi-chat__message-menu-item,
+.navi-chat__message-edit-button,
+.navi-chat__message-edit-input {
+    font: inherit;
+}
+
+.navi-chat__room-tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    max-width: 160px;
+    border: 0;
+    border-radius: 8px;
+    background: #f1f5f9;
+    color: #475569;
+    cursor: pointer;
+    padding: 7px 10px;
+}
+
+.navi-chat__room-tab--active {
+    background: var(--navi-chat-color-primary, #2563eb);
+    color: #ffffff;
+}
+
+.navi-chat__room-tab-label {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.navi-chat__unread-badge {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    border-radius: 999px;
+    background: #eff6ff;
+    color: var(--navi-chat-color-primary, #2563eb);
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 1;
+    padding: 0 5px;
+}
+
+.navi-chat__room-tab--active .navi-chat__unread-badge {
+    background: rgba(255, 255, 255, 0.18);
+    color: #ffffff;
+}
+
+.navi-chat__messages {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 14px;
+    background: #fbfdff;
+}
+
+.navi-chat__messages-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: auto;
+}
+
+.navi-chat__empty {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 0;
+    padding: 24px;
+    background: #fbfdff;
+    color: #64748b;
+    text-align: center;
+}
+
+.navi-chat__empty strong {
+    margin-top: 8px;
+    color: #334155;
+    font-size: 14px;
+}
+
+.navi-chat__empty span {
+    margin-top: 4px;
+    font-size: 13px;
+}
+
+.navi-chat__empty-icon {
+    color: var(--navi-chat-color-primary, #2563eb);
+    font-size: 22px;
+    line-height: 1;
+}
+
+.navi-chat__message {
+    display: flex;
+}
+
+.navi-chat__message-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.navi-chat__loading-older {
+    align-self: center;
+    color: #64748b;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 4px 0;
+}
+
+.navi-chat__message--own {
+    justify-content: flex-end;
+}
+
+.navi-chat__message-row {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    gap: 6px;
+    min-width: 0;
+    max-width: min(82%, 560px);
+}
+
+.navi-chat__message-row--own {
+    flex-direction: row-reverse;
+}
+
+.navi-chat__message-bubble {
+    min-width: 0;
+    max-width: 100%;
+    border: 1px solid var(--navi-chat-color-border, #d8e0ea);
+    border-radius: 10px;
+    background: #ffffff;
+    padding: 9px 11px;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.navi-chat__message--grouped .navi-chat__message-bubble {
+    padding-top: 8px;
+}
+
+.navi-chat__message--own .navi-chat__message-bubble {
+    border-color: var(--navi-chat-own-message-border, #bfdbfe);
+    background: var(--navi-chat-own-message-background, #eff6ff);
+}
+
+.navi-chat__message--deleted .navi-chat__message-bubble {
+    background: #f8fafc;
+    color: #64748b;
+    font-style: italic;
+}
+
+.navi-chat__message-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 4px;
+}
+
+.navi-chat__message-author {
+    overflow: hidden;
+    color: #334155;
+    font-size: 12px;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.navi-chat__message-time {
+    color: #94a3b8;
+    font-size: 11px;
+    white-space: nowrap;
+}
+
+.navi-chat__message-text {
+    margin: 0;
+    color: var(--navi-chat-color-text, #111827);
+    font-size: 13px;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+
+.navi-chat__message-action {
+    margin-top: 8px;
+    border: 0;
+    background: transparent;
+    color: var(--navi-chat-color-primary, #2563eb);
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 0;
+}
+
+.navi-chat__message-menu {
+    position: absolute;
+    right: -30px;
+    bottom: 2px;
+    z-index: 3;
+    display: inline-flex;
+    flex: 0 0 auto;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        opacity 120ms ease,
+        transform 120ms ease;
+    transform: translateY(2px);
+    vertical-align: middle;
+}
+
+.navi-chat__message-row--own .navi-chat__message-menu {
+    right: auto;
+    left: -30px;
+}
+
+.navi-chat__message:hover .navi-chat__message-menu,
+.navi-chat__message:focus-within .navi-chat__message-menu,
+.navi-chat__message-menu--open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+}
+
+.navi-chat__message-menu-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: 1px solid var(--navi-chat-color-border, #d8e0ea);
+    border-radius: 999px;
+    background: #ffffff;
+    color: #64748b;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    padding: 0;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+}
+
+.navi-chat__message-menu-trigger:hover,
+.navi-chat__message-menu-trigger:focus-visible {
+    border-color: #bfdbfe;
+    background: #eff6ff;
+    color: var(--navi-chat-color-primary, #2563eb);
+}
+
+.navi-chat__message-menu-popover {
+    position: absolute;
+    right: 0;
+    bottom: 32px;
+    z-index: 2;
+    display: flex;
+    min-width: 82px;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid var(--navi-chat-color-border, #d8e0ea);
+    border-radius: 8px;
+    background: #ffffff;
+    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
+}
+
+.navi-chat__message-row--own .navi-chat__message-menu-popover {
+    right: auto;
+    left: 0;
+}
+
+.navi-chat__message-menu-item {
+    border: 0;
+    background: transparent;
+    color: var(--navi-chat-color-text, #111827);
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1;
+    padding: 8px 10px;
+    text-align: left;
+}
+
+.navi-chat__message-menu-item:hover,
+.navi-chat__message-menu-item:focus-visible {
+    background: #f1f5f9;
+    color: var(--navi-chat-color-primary, #2563eb);
+}
+
+.navi-chat__message-edit {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.navi-chat__message-edit-input {
+    box-sizing: border-box;
+    width: min(280px, 100%);
+    min-height: 64px;
+    resize: vertical;
+    border: 1px solid #cbd5e1;
+    border-radius: 8px;
+    background: #ffffff;
+    color: var(--navi-chat-color-text, #111827);
+    font-size: 13px;
+    line-height: 1.4;
+    padding: 8px 9px;
+}
+
+.navi-chat__message-edit-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+}
+
+.navi-chat__message-edit-button {
+    border: 1px solid var(--navi-chat-color-border, #d8e0ea);
+    border-radius: 7px;
+    background: #ffffff;
+    color: #334155;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    padding: 7px 9px;
+}
+
+.navi-chat__message-edit-button--primary {
+    border-color: var(--navi-chat-color-primary, #2563eb);
+    background: var(--navi-chat-color-primary, #2563eb);
+    color: #ffffff;
+}
+
+.navi-chat__latest-overlay {
+    position: sticky;
+    bottom: 8px;
+    align-self: stretch;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+    pointer-events: none;
+}
+
+.navi-chat__new-message-notice {
+    grid-column: 2;
+    border: 1px solid var(--navi-chat-color-border, #d8e0ea);
+    border-radius: 999px;
+    background: #ffffff;
+    color: var(--navi-chat-color-primary, #2563eb);
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    padding: 8px 12px;
+    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
+}
+
+.navi-chat__scroll-latest {
+    grid-column: 3;
+    justify-self: end;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    margin-right: 4px;
+    border: 1px solid var(--navi-chat-color-border, #d8e0ea);
+    border-radius: 50%;
+    background: #ffffff;
+    color: var(--navi-chat-color-primary, #2563eb);
+    cursor: pointer;
+    padding: 0;
+    pointer-events: auto;
+    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
+}
+
+.navi-chat__scroll-latest-icon {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+}
+
+.navi-chat__composer {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: flex-end;
+    gap: 8px;
+    padding: 10px;
+    border-top: 1px solid var(--navi-chat-color-border, #d8e0ea);
+    background: #ffffff;
+}
+
+.navi-chat__composer-main {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.navi-chat__composer-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 38px;
+    max-height: 84px;
+    resize: vertical;
+    border: 1px solid #cbd5e1;
+    border-radius: 8px;
+    color: var(--navi-chat-color-text, #111827);
+    font: inherit;
+    font-size: 13px;
+    line-height: 1.4;
+    padding: 9px 10px;
+}
+
+.navi-chat__composer-tip {
+    margin: 0;
+    color: #64748b;
+    font-size: 11px;
+    line-height: 1.3;
+}
+
+.navi-chat__send-button {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    width: 44px;
+    height: 44px;
+    border: 0;
+    border-radius: 999px;
+    background: var(--navi-chat-color-primary, #2563eb);
+    color: #ffffff;
+    cursor: pointer;
+    padding: 0;
+}
+
+.navi-chat__send-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.navi-chat__send-icon {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+}
+
+.navi-chat__readonly {
+    flex: 0 0 auto;
+    border-top: 1px solid var(--navi-chat-color-border, #d8e0ea);
+    background: #f8fafc;
+    color: #64748b;
+    font-size: 13px;
+    padding: 12px 14px;
+}
+
+.navi-chat__status {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+}
+
+.navi-chat__status-dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 999px;
+    background: #94a3b8;
+}
+
+.navi-chat__status--connected .navi-chat__status-dot {
+    background: #16a34a;
+}
+
+.navi-chat__status--muted .navi-chat__status-dot {
+    background: #94a3b8;
+}
+
+.navi-chat__status--error .navi-chat__status-dot {
+    background: #dc2626;
+}

package/extensions/room-platform-extensions.d.ts

@@ -1,8 +0,0 @@
-import type { ComponentType } from 'react';
-import type { RoomPlatformExtensionProps, RoomPlatformExtensions } from '../room-platform-types';
-export type RoomPlatformExtensionZoneProps = {
-    component: ComponentType<RoomPlatformExtensionProps>;
-    extensionProps: RoomPlatformExtensionProps;
-};
-export declare function RoomPlatformExtensionZone({ component: Extension, extensionProps }: RoomPlatformExtensionZoneProps): import("react/jsx-runtime").JSX.Element;
-export declare const getParticipantTabTitle: (participantTab: RoomPlatformExtensions["participantTab"]) => string;

package/room-action-button.d.ts

@@ -1,11 +0,0 @@
-import { Button } from '@navi/ui';
-import type { ComponentProps, ReactNode } from 'react';
-export type RoomActionState = {
-    label: string;
-    pendingLabel: string;
-    status: 'disabled' | 'idle' | 'pending';
-};
-export declare function RoomActionButton({ icon, state, ...props }: ComponentProps<typeof Button> & {
-    icon: ReactNode;
-    state: RoomActionState;
-}): import("react/jsx-runtime").JSX.Element;

package/room-participant-actions.d.ts

@@ -1,9 +0,0 @@
-import type { RoomParticipantRosterEntry } from './room-platform-types';
-export type RoomParticipantActionsProps = {
-    isActiveSpeaker?: boolean;
-    isLocal?: boolean;
-    isOnline?: boolean;
-    participant: RoomParticipantRosterEntry;
-    participantIdentity?: string;
-};
-export declare function RoomParticipantActions({ isActiveSpeaker, isLocal, isOnline, participant, participantIdentity, }: RoomParticipantActionsProps): import("react/jsx-runtime").JSX.Element;

package/room-participant-list.d.ts

@@ -1,7 +0,0 @@
-import type { RoomParticipantPresence, RoomParticipantRosterEntry, RoomPlatformExtensionProps } from './room-platform-types';
-export type RoomParticipantListProps = {
-    extensionProps: RoomPlatformExtensionProps;
-    presenceByExternalActorId?: ReadonlyMap<string, RoomParticipantPresence>;
-    roster: readonly RoomParticipantRosterEntry[];
-};
-export declare function RoomParticipantList({ extensionProps, presenceByExternalActorId, roster }: RoomParticipantListProps): import("react/jsx-runtime").JSX.Element;

package/room-participant-tab.d.ts

@@ -1,6 +0,0 @@
-import type { RoomParticipantRosterEntry, RoomPlatformExtensionProps } from './room-platform-types';
-export type RoomParticipantTabProps = {
-    extensionProps: RoomPlatformExtensionProps;
-    roster?: readonly RoomParticipantRosterEntry[];
-};
-export declare function RoomParticipantTab({ extensionProps, roster }: RoomParticipantTabProps): import("react/jsx-runtime").JSX.Element;

package/room-platform-active-speaker.d.ts

@@ -1,4 +0,0 @@
-import type { TrackReference } from '@livekit/components-react';
-export declare function RoomPlatformActiveSpeaker({ trackRef }: {
-    trackRef?: TrackReference;
-}): import("react/jsx-runtime").JSX.Element;

package/room-platform-background-settings.d.ts

@@ -1,15 +0,0 @@
-import type { RoomPlatformCameraBackgroundPreset } from './room-platform-camera-background-presets';
-import type { RoomPlatformCameraBackgroundState, RoomPlatformCameraBackgroundUploadPreview } from './use-room-platform-camera-background';
-type RoomPlatformBackgroundSettingsProps = {
-    state: RoomPlatformCameraBackgroundState;
-    presets: RoomPlatformCameraBackgroundPreset[];
-    uploadItems: RoomPlatformCameraBackgroundUploadPreview[];
-    onSelectNoBackground: () => void;
-    onSelectBlurLevel: (level: 'light' | 'strong') => void;
-    onSelectPreset: (presetId: string) => void;
-    onSelectUploaded: (uploadAssetId: string) => void;
-    onDeleteUploaded: (uploadAssetId: string) => void;
-    onUpload: (file: File) => void;
-};
-export declare function RoomPlatformBackgroundSettings({ state, presets, uploadItems, onSelectNoBackground, onSelectBlurLevel, onSelectPreset, onSelectUploaded, onDeleteUploaded, onUpload, }: RoomPlatformBackgroundSettingsProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/room-platform-camera-background-presets.d.ts

@@ -1,8 +0,0 @@
-export type RoomPlatformCameraBackgroundPreset = {
-    id: 'naviedu' | 'alpine-lake' | 'forest-road' | 'tropical-beach' | 'ocean-cliffs' | 'desert-dunes' | 'canyon-view' | 'waterfall-mist' | 'flower-meadow';
-    label: string;
-    imageUrl: string;
-    processorImageUrl: string;
-};
-export declare const ROOM_PLATFORM_CAMERA_BACKGROUND_PRESETS: RoomPlatformCameraBackgroundPreset[];
-export declare const findRoomPlatformCameraBackgroundPreset: (presetId?: string) => RoomPlatformCameraBackgroundPreset;