@tellescope/chat 0.0.5 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "0.0.5",
+  "version": "0.0.9",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -34,11 +34,12 @@
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
     "@tellescope/authentication": "^0.0.5",
-    "@tellescope/constants": "^0.0.5",
-    "@tellescope/react-components": "^0.0.5",
-    "@tellescope/sdk": "^0.0.5",
-    "@tellescope/types-client": "^0.0.5",
-    "@tellescope/types-utilities": "^0.0.5",
+    "@tellescope/constants": "^0.0.9",
+    "@tellescope/react-components": "^0.0.9",
+    "@tellescope/sdk": "^0.0.9",
+    "@tellescope/types-client": "^0.0.9",
+    "@tellescope/types-utilities": "^0.0.9",
+    "@tellescope/utilities": "^0.0.9",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.32.0",
@@ -49,7 +50,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "42d964a504257ae89927b984ace7495f26ce72e7",
+  "gitHead": "267964c111ed9747bcb81c720b8d6c393e196089",
   "publishConfig": {
     "access": "public"
   }

package/src/chat.tsx

@@ -0,0 +1,301 @@
+import React, { useCallback, useState, CSSProperties } from "react"
+
+import {
+  List,
+  Flex,
+} from "@tellescope/react-components/lib/esm/layout"
+import {
+  AsyncIconButton,
+} from "@tellescope/react-components/lib/esm/controls"
+import {
+  SendIcon,
+  Styled,
+  Typography,
+  TextField,
+} from "@tellescope/react-components/lib/esm/mui"
+import {
+  LoadingLinear,
+  Resolver,
+} from "@tellescope/react-components/lib/esm/loading"
+import {
+  useSession,
+  useEnduserSession,
+} from "@tellescope/react-components/lib/esm/authentication"
+import {
+  useChatRooms,
+  useChats,
+} from "@tellescope/react-components/lib/esm/state"
+import {
+  useEndusers,
+} from "@tellescope/react-components/lib/esm/user_state"
+import {
+  useUserDisplayNames,
+} from "@tellescope/react-components/lib/esm/enduser_state"
+
+import {
+  ChatRoom,
+  ChatMessage,
+} from "@tellescope/types-client"
+
+import {
+  LoadedData, 
+  LoadingStatus,
+  SessionType,
+} from "@tellescope/types-utilities"
+
+import {
+  user_display_name,
+} from "@tellescope/utilities"
+
+import {
+  PRIMARY_HEX,
+} from "@tellescope/constants"
+
+import {
+  Session,
+  EnduserSession,
+} from "@tellescope/sdk"
+
+const defaultMessagesStyle: CSSProperties = {
+  borderRadius: 5,
+}
+const baseMessageStyle = {
+  borderRadius: 25,
+  paddingRight: 10,
+  paddingLeft: 10,
+  margin: 5,
+  maxWidth: '80%',
+}
+const defaultSentStyle: CSSProperties = {
+  ...baseMessageStyle,
+  justifyContent: 'flex-end',
+  marginLeft: 'auto',
+  backgroundColor: PRIMARY_HEX,
+}
+const defaultReceivedStyle: CSSProperties = {
+  ...baseMessageStyle,
+  justifyContent: 'flex-start',
+  marginRight: 'auto',
+  backgroundColor: "#444444",
+}
+const baseTextStyle = {
+  color: "#ffffff",
+  padding: 4,
+}
+const defaultTextSentStyle: CSSProperties = {
+  ...baseTextStyle,
+  textAlign: 'right',
+}
+const defaultTextReceivedStyle: CSSProperties = {
+  ...baseTextStyle,
+  textAlign: 'left',
+}
+
+interface Messages_T {
+  messages: LoadedData<ChatMessage[]>,
+  chatUserId: string,
+  receivedMessageStyle?: CSSProperties,
+  receivedMessageTextStyle?: CSSProperties,
+  sentMessageStyle?: CSSProperties,
+  sentMessageTextStyle?: CSSProperties,
+}
+export const Messages = ({ 
+  messages, 
+  chatUserId, 
+  style=defaultMessagesStyle,
+  receivedMessageStyle=defaultReceivedStyle, 
+  receivedMessageTextStyle=defaultTextReceivedStyle, 
+  sentMessageStyle=defaultSentStyle,
+  sentMessageTextStyle=defaultTextSentStyle,
+}: Messages_T & Styled) => (
+  <LoadingLinear data={messages} render={messages => (
+    <List reverse style={style} items={messages} render={(message) => (
+      <Flex key={message.id} style={message.senderId === chatUserId ? sentMessageStyle : receivedMessageStyle}>
+        <Typography style={message.senderId === chatUserId ? sentMessageTextStyle : receivedMessageTextStyle}>
+          {message.message}
+        </Typography>    
+      </Flex>
+    )}/>    
+  )}/>
+)
+
+
+const defaultSidebarStyle: CSSProperties  = {
+  backgroundColor: "#858585",
+  borderRadius: 5,
+  overflowY: 'auto',
+}
+const defaultSidebarItemStyle: CSSProperties  = {
+  backgroundColor: "#454545",
+  color: "#ffffff",
+  borderRadius: 5,
+  cursor: 'pointer',
+  maxHeight: 60,
+  justifyContent: 'center',
+}
+const defaultSidebarItemStyleSelected = { 
+  ...defaultSidebarItemStyle,
+  backgroundColor: PRIMARY_HEX,
+  cursor: "default",
+}
+const defaultMessageNameStyle: CSSProperties = {
+  textAlign: 'right',
+}
+const defaultMessagePreviewStyle: CSSProperties = {
+  textAlign: 'right',
+}
+
+interface SidebarInfo {
+  selectedRoom?: string;
+  onRoomSelect: (roomId: string) => void;
+  style?: CSSProperties;
+  selectedItemStyle?: CSSProperties;
+  itemStyle?: CSSProperties;
+  nameStyle?: CSSProperties;
+  previewStyle?: CSSProperties;
+}
+
+interface Sidebar_T extends SidebarInfo {
+  resolveChatName: (r: ChatRoom) => string;
+  rooms: LoadedData<ChatRoom[]>;
+}
+export const Conversations = ({ rooms, selectedRoom, onRoomSelect, resolveChatName, style, selectedItemStyle, itemStyle, nameStyle, previewStyle } : Sidebar_T) => ( 
+  <LoadingLinear data={rooms} render={rooms =>
+    <List style={style ?? defaultSidebarStyle} items={rooms} onClick={onRoomSelect} render={(room, { onClick, index }) => 
+      <Flex key={room.id} flex={1} column onClick={() => selectedRoom !== room.id && onClick?.(room.id ?? index)} 
+        style={selectedRoom === room.id ? (selectedItemStyle ?? defaultSidebarItemStyleSelected) : (itemStyle ?? defaultSidebarItemStyle) }
+      >
+        <Typography style={nameStyle ?? defaultMessageNameStyle}>
+          <Resolver item={room} resolver={resolveChatName}/>
+        </Typography>
+
+        <Typography style={previewStyle ?? defaultMessagePreviewStyle}>
+          {room.recentMessage}
+        </Typography>
+      </Flex>
+    }/>    
+  }/>
+)
+
+
+export const EndusersConversations = ({ enduserId, ...p } : SidebarInfo & { enduserId: string }) => {
+  const [rooms] = useChatRooms('enduser')
+  const [displayNames] = useUserDisplayNames()
+
+  const resolveChatName = useCallback((r: ChatRoom) => {
+    if (r.title) return r.title
+
+    if (displayNames.status === LoadingStatus.Loaded) {
+      const user = displayNames.value.find(u => u.id === r.userIds?.[0])
+      if (user) return user_display_name(user)
+    }
+    return ''
+  }, [displayNames])
+
+  return <Conversations {...p} rooms={rooms} resolveChatName={resolveChatName}/>
+
+}
+
+export const UsersConversations = ({ userId, ...p } : SidebarInfo & { userId: string }) => {
+  const [rooms] = useChatRooms('user')
+  const [endusers] = useEndusers()
+
+  const resolveChatName = useCallback((r: ChatRoom) => {
+    if (r.title) return r.title
+    
+    if (endusers.status === LoadingStatus.Loaded) {
+      const enduser = endusers.value.find(e => e.id ===  r.enduserIds?.[0])   
+      if (enduser) return user_display_name(enduser)
+    }
+
+    return ''
+  }, [endusers])
+
+  return <Conversations {...p} rooms={rooms} resolveChatName={resolveChatName}/>
+}
+
+interface SendMessage_T {
+  session: Session | EnduserSession,
+  roomId: string,
+  onNewMessage: (m: ChatMessage) => void;
+  Icon?: React.ElementType<any>;
+}
+export const SendMessage = ({ session, roomId, Icon=SendIcon, onNewMessage }: SendMessage_T) => {
+  const [message, setMessage] = useState('')
+  const [sending, setSending] = useState(false)
+
+  return (
+    <Flex row flex={1} alignContent="center">
+      <Flex column flex={1}>
+        <TextField variant="outlined" value={message} onChange={setMessage} disabled={sending}
+          aria-label="Enter a message" placeholder="Enter a message" size="small"
+        />
+      </Flex>
+      <Flex column alignSelf="center">
+        <AsyncIconButton label="send" Icon={Icon} disabled={message === ''}
+          action={() => session.api.chats.createOne({ message, roomId })}
+          onSuccess={m => {
+            setMessage('')
+            onNewMessage(m)
+          }}
+          onChange={setSending}
+        />
+      </Flex>
+    </Flex>
+  )
+}
+
+const defaultSplitChatStyle: CSSProperties = {}
+interface SplitChat_T {
+  session: EnduserSession | Session,
+  type: SessionType,
+}
+export const SplitChat = ({ session, type, style=defaultSplitChatStyle } : SplitChat_T & Styled) => {
+  const [, { updateElement: updateRoom }] = useChatRooms(type)
+  const [selectedRoom, setSelectedRoom] = useState('')
+  const [messages, { addElementForKey: addMessage }] = useChats(selectedRoom, type)
+
+  return (
+    <Flex row style={style} flex={1}>
+      <Flex column flex={1}>
+        {type === 'user'
+          ? <UsersConversations userId={session.userInfo.id} selectedRoom={selectedRoom} onRoomSelect={setSelectedRoom}/>
+          : <EndusersConversations selectedRoom={selectedRoom} enduserId={session.userInfo.id} onRoomSelect={setSelectedRoom}/>
+        }
+      </Flex>
+
+      <Flex column flex={2} style={{ backgroundColor: '#cccccc', borderRadius: 5 }}>
+        {selectedRoom && 
+          <>
+          <Flex row flex={8}>
+            <Messages messages={messages} chatUserId={session.userInfo.id}/>
+          </Flex>
+
+          <Flex row flex={1} style={{ marginLeft: 10, marginRight: 10 }}>
+            <SendMessage session={session} roomId={selectedRoom}
+              onNewMessage={m => { 
+                addMessage(selectedRoom, m)
+                updateRoom(selectedRoom, { recentMessage: m.message, recentSender: m.senderId ?? '' })
+              }}
+            /> 
+          </Flex>
+          </>
+        }
+      </Flex>
+    </Flex>
+  )
+}
+
+export const UserChatSplit = ({ style=defaultSplitChatStyle } : Styled) => {
+  const session = useSession()
+  return (
+    <SplitChat session={session} type="user" style={style}/>
+  )
+}
+
+export const EnduserChatSplit = ({ style=defaultSplitChatStyle } : Styled) => {
+  const session = useEnduserSession()
+  return (
+    <SplitChat session={session} type="enduser" style={style}/>
+  )
+}

package/src/index.native.ts

@@ -0,0 +1 @@
+export * from "./chat" 

package/src/index.ts

@@ -1,6 +1 @@
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-
-export * from "./chat.web";
+export * from "./chat";

package/tsconfig.json

@@ -5,5 +5,8 @@
     "rootDir": "src",
   },
   "exclude": ["node_modules", "lib", "tests"],
-  "include": ["src"]
+  "include": ["src"],
+  "references": [
+    { "path": "../components" },
+  ]
 }

package/lib/cjs/chat.web.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const ChatsFromEndusersSidebar: () => JSX.Element;
-export declare const ChatsFromUsersSidebar: () => JSX.Element;
-//# sourceMappingURL=chat.web.d.ts.map

package/lib/cjs/chat.web.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat.web.d.ts","sourceRoot":"","sources":["../../src/chat.web.tsx"],"names":[],"mappings":";AAiCA,eAAO,MAAM,wBAAwB,mBAKpC,CAAA;AAED,eAAO,MAAM,qBAAqB,mBAKjC,CAAA"}

package/lib/cjs/chat.web.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatsFromUsersSidebar = exports.ChatsFromEndusersSidebar = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_components_1 = require("@tellescope/react-components");
-var authentication_1 = require("@tellescope/authentication");
-var Sidebar = function (_a) {
-    var rooms = _a.rooms;
-    return ((0, jsx_runtime_1.jsx)(react_components_1.LoadingLinear, { data: rooms, render: function (rooms) {
-            return (0, jsx_runtime_1.jsx)(react_components_1.List, { items: rooms }, void 0);
-        } }, void 0));
-};
-var ChatsFromEndusersSidebar = function () {
-    var session = (0, authentication_1.useSession)();
-    var _a = (0, react_components_1.useLoadedState)(function () { return session.api.chat_rooms.getSome(); }), rooms = _a[0], setRooms = _a[1];
-    return (0, jsx_runtime_1.jsx)(Sidebar, { rooms: rooms }, void 0);
-};
-exports.ChatsFromEndusersSidebar = ChatsFromEndusersSidebar;
-var ChatsFromUsersSidebar = function () {
-    var session = (0, authentication_1.useEnduserSession)();
-    var _a = (0, react_components_1.useLoadedState)(), rooms = _a[0], setRooms = _a[1];
-    return (0, jsx_runtime_1.jsx)(Sidebar, { rooms: rooms }, void 0);
-};
-exports.ChatsFromUsersSidebar = ChatsFromUsersSidebar;
-//# sourceMappingURL=chat.web.js.map

package/lib/cjs/chat.web.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat.web.js","sourceRoot":"","sources":["../../src/chat.web.tsx"],"names":[],"mappings":";;;;AAIA,iEAIqC;AAErC,6DAGmC;AAcnC,IAAM,OAAO,GAAG,UAAC,EAAoB;QAAlB,KAAK,WAAA;IAAkB,OAAA,CACxC,uBAAC,gCAAa,IAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,UAAA,KAAK;YACvC,OAAO,uBAAC,uBAAI,IAAC,KAAK,EAAE,KAAK,WAAG,CAAA;QAC9B,CAAC,WAAG,CACL;AAJyC,CAIzC,CAAA;AAEM,IAAM,wBAAwB,GAAG;IACtC,IAAM,OAAO,GAAG,IAAA,2BAAU,GAAE,CAAA;IACtB,IAAA,KAAoB,IAAA,iCAAc,EAAC,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,EAAE,EAAhC,CAAgC,CAAC,EAAzE,KAAK,QAAA,EAAE,QAAQ,QAA0D,CAAA;IAEhF,OAAO,uBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,WAAG,CAAA;AACjC,CAAC,CAAA;AALY,QAAA,wBAAwB,4BAKpC;AAEM,IAAM,qBAAqB,GAAG;IACnC,IAAM,OAAO,GAAG,IAAA,kCAAiB,GAAE,CAAA;IAC7B,IAAA,KAAoB,IAAA,iCAAc,GAAc,EAA/C,KAAK,QAAA,EAAE,QAAQ,QAAgC,CAAA;IAEtD,OAAO,uBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,WAAG,CAAA;AACjC,CAAC,CAAA;AALY,QAAA,qBAAqB,yBAKjC"}

package/lib/esm/chat.web.d.ts

@@ -1,3 +0,0 @@
-export declare const ChatsFromEndusersSidebar: () => JSX.Element;
-export declare const ChatsFromUsersSidebar: () => JSX.Element;
-//# sourceMappingURL=chat.web.d.ts.map

package/lib/esm/chat.web.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat.web.d.ts","sourceRoot":"","sources":["../../src/chat.web.tsx"],"names":[],"mappings":"AAiCA,eAAO,MAAM,wBAAwB,mBAKpC,CAAA;AAED,eAAO,MAAM,qBAAqB,mBAKjC,CAAA"}

package/lib/esm/chat.web.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { List, LoadingLinear, useLoadedState, } from "@tellescope/react-components";
-import { useSession, useEnduserSession, } from "@tellescope/authentication";
-var Sidebar = function (_a) {
-    var rooms = _a.rooms;
-    return (_jsx(LoadingLinear, { data: rooms, render: function (rooms) {
-            return _jsx(List, { items: rooms }, void 0);
-        } }, void 0));
-};
-export var ChatsFromEndusersSidebar = function () {
-    var session = useSession();
-    var _a = useLoadedState(function () { return session.api.chat_rooms.getSome(); }), rooms = _a[0], setRooms = _a[1];
-    return _jsx(Sidebar, { rooms: rooms }, void 0);
-};
-export var ChatsFromUsersSidebar = function () {
-    var session = useEnduserSession();
-    var _a = useLoadedState(), rooms = _a[0], setRooms = _a[1];
-    return _jsx(Sidebar, { rooms: rooms }, void 0);
-};
-//# sourceMappingURL=chat.web.js.map

package/lib/esm/chat.web.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat.web.js","sourceRoot":"","sources":["../../src/chat.web.tsx"],"names":[],"mappings":";AAIA,OAAO,EACL,IAAI,EACJ,aAAa,EACb,cAAc,GACf,MAAM,8BAA8B,CAAA;AAErC,OAAO,EACL,UAAU,EACV,iBAAiB,GAClB,MAAM,4BAA4B,CAAA;AAcnC,IAAM,OAAO,GAAG,UAAC,EAAoB;QAAlB,KAAK,WAAA;IAAkB,OAAA,CACxC,KAAC,aAAa,IAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,UAAA,KAAK;YACvC,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,WAAG,CAAA;QAC9B,CAAC,WAAG,CACL;AAJyC,CAIzC,CAAA;AAED,MAAM,CAAC,IAAM,wBAAwB,GAAG;IACtC,IAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IACtB,IAAA,KAAoB,cAAc,CAAC,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,EAAE,EAAhC,CAAgC,CAAC,EAAzE,KAAK,QAAA,EAAE,QAAQ,QAA0D,CAAA;IAEhF,OAAO,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,WAAG,CAAA;AACjC,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,qBAAqB,GAAG;IACnC,IAAM,OAAO,GAAG,iBAAiB,EAAE,CAAA;IAC7B,IAAA,KAAoB,cAAc,EAAc,EAA/C,KAAK,QAAA,EAAE,QAAQ,QAAgC,CAAA;IAEtD,OAAO,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,WAAG,CAAA;AACjC,CAAC,CAAA"}

package/src/chat.web.tsx

@@ -1,46 +0,0 @@
-import React, { HTMLInputTypeAttribute, CSSProperties } from "react"
-
-import LinearProgress from '@mui/material/LinearProgress';
-
-import {
-  List,
-  LoadingLinear,
-  useLoadedState,
-} from "@tellescope/react-components"
-
-import {
-  useSession,
-  useEnduserSession,
-} from "@tellescope/authentication"
-
-import {
-  ChatRoom,
-  ChatMessage,
-} from "@tellescope/types-client"
-
-import {
-  LoadedData,
-} from "@tellescope/types-utilities"
-
-interface Sidebar_T {
-  rooms: LoadedData<ChatRoom[]>,
-}
-const Sidebar = ({ rooms }: Sidebar_T) => (
-  <LoadingLinear data={rooms} render={rooms => {
-    return <List items={rooms}/>    
-  }}/>
-)
-
-export const ChatsFromEndusersSidebar = () => {
-  const session = useSession()
-  const [rooms, setRooms] = useLoadedState(() => session.api.chat_rooms.getSome())
-
-  return <Sidebar rooms={rooms}/>
-}
-
-export const ChatsFromUsersSidebar = () => {
-  const session = useEnduserSession()
-  const [rooms, setRooms] = useLoadedState<ChatRoom[]>()
-
-  return <Sidebar rooms={rooms}/>
-}