@rpg-engine/long-bow 0.6.94 → 0.6.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/long-bow.cjs.development.js +27 -21
  2. package/dist/long-bow.cjs.development.js.map +1 -1
  3. package/dist/long-bow.cjs.production.min.js +1 -1
  4. package/dist/long-bow.cjs.production.min.js.map +1 -1
  5. package/dist/long-bow.esm.js +27 -21
  6. package/dist/long-bow.esm.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/ChatRevamp/ChatRevamp.tsx +62 -50
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rpg-engine/long-bow",
3
- "version": "0.6.94",
3
+ "version": "0.6.96",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/ChatRevamp/ChatRevamp.tsx CHANGED
@@ -103,51 +103,55 @@ export const ChatRevamp = ({
103
103
  isPrivate={isPrivate}
104
104
  isOpen={showRecentChats}
105
105
  >
106
- <RecentChatTopBar isOpen={showRecentChats}>
107
- <BurgerIconContainer
108
- onClick={() => setShowRecentChats(t => !t)}
109
- hasUnseenMessages={
110
- unseenMessageCharacterIds?.length > 0 || false
111
- }
112
- >
113
- <BurgerLineIcon></BurgerLineIcon>
114
- <BurgerLineIcon></BurgerLineIcon>
115
- <BurgerLineIcon></BurgerLineIcon>
116
- </BurgerIconContainer>
117
- {showRecentChats && (
118
- <SearchButton onClick={() => showSearchCharacterUI()}>
119
- <RxMagnifyingGlass size={16} color={uiColors.white} />
120
- </SearchButton>
121
- )}
122
- </RecentChatTopBar>
106
+ <RecentChatContent isOpen={showRecentChats}>
107
+ <RecentChatTopBar>
108
+ <BurgerIconContainer
109
+ onClick={() => setShowRecentChats(t => !t)}
110
+ hasUnseenMessages={
111
+ unseenMessageCharacterIds?.length > 0 || false
112
+ }
113
+ >
114
+ <BurgerLineIcon></BurgerLineIcon>
115
+ <BurgerLineIcon></BurgerLineIcon>
116
+ <BurgerLineIcon></BurgerLineIcon>
117
+ </BurgerIconContainer>
118
+ {showRecentChats && (
119
+ <SearchButton onClick={() => showSearchCharacterUI()}>
120
+ <RxMagnifyingGlass size={16} color={uiColors.white} />
121
+ </SearchButton>
122
+ )}
123
+ </RecentChatTopBar>
123
124
 
124
- <RecentChatLogContainer isOpen={showRecentChats}>
125
- {recentChatCharacters?.map(character => (
126
- <ListElementContainer key={character._id}>
127
- <ListElement
128
- active={character._id === recentSelectedChatCharacterId}
129
- onClick={() => handlePreviousChatCharacterClick(character)}
130
- >
131
- <StatusDot
132
- isUnseen={
133
- unseenMessageCharacterIds?.includes(character._id) ||
134
- false
125
+ <RecentChatLogContainer>
126
+ {recentChatCharacters?.map(character => (
127
+ <ListElementContainer key={character._id}>
128
+ <ListElement
129
+ active={character._id === recentSelectedChatCharacterId}
130
+ onClick={() =>
131
+ handlePreviousChatCharacterClick(character)
135
132
  }
136
- />
137
- <EllipsisWrapper>
138
- <Ellipsis maxLines={1} maxWidth="120px">
139
- {character.name}
140
- </Ellipsis>
141
- </EllipsisWrapper>
142
- </ListElement>
143
- <CloseButton
144
- onClick={() => onRemoveRecentChatCharacter?.(character)}
145
- >
146
- <RxCross2 size={16} />
147
- </CloseButton>
148
- </ListElementContainer>
149
- ))}
150
- </RecentChatLogContainer>
133
+ >
134
+ <StatusDot
135
+ isUnseen={
136
+ unseenMessageCharacterIds?.includes(character._id) ||
137
+ false
138
+ }
139
+ />
140
+ <EllipsisWrapper>
141
+ <Ellipsis maxLines={1} maxWidth="140px">
142
+ {character.name}
143
+ </Ellipsis>
144
+ </EllipsisWrapper>
145
+ </ListElement>
146
+ <CloseButton
147
+ onClick={() => onRemoveRecentChatCharacter?.(character)}
148
+ >
149
+ <RxCross2 size={16} />
150
+ </CloseButton>
151
+ </ListElementContainer>
152
+ ))}
153
+ </RecentChatLogContainer>
154
+ </RecentChatContent>
151
155
  </RecentChatTabContainer>
152
156
  )}
153
157
  {isPrivate && searchCharacterUI ? (
@@ -238,16 +242,26 @@ const RecentChatTabContainer = styled.div<{
238
242
  flex-direction: column;
239
243
  border-right: 1px solid ${uiColors.gray};
240
244
  outline: none;
241
- width: ${props => (props.isOpen ? '20%' : '30px')} !important;
242
- transition: width 0.3s ease-in-out;
245
+ width: ${props => (props.isOpen ? '20%' : '30px')};
246
+ min-width: ${props => (props.isOpen ? '140px' : '30px')};
247
+ max-width: 300px;
248
+ transition: all 0.3s ease-in-out;
243
249
  overflow: hidden;
244
250
 
245
251
  @media (max-width: 768px) {
246
- width: ${props => (props.isOpen ? '40%' : '30px')} !important;
252
+ width: ${props => (props.isOpen ? '40%' : '30px')};
253
+ min-width: ${props => (props.isOpen ? '140px' : '30px')};
247
254
  }
248
255
  `;
249
256
 
250
- const RecentChatTopBar = styled.div<{ isOpen: boolean }>`
257
+ const RecentChatContent = styled.div<{ isOpen: boolean }>`
258
+ width: 100%;
259
+ min-width: 140px;
260
+ opacity: ${props => (props.isOpen ? 1 : 0)};
261
+ transition: opacity 0.3s ease-in-out;
262
+ `;
263
+
264
+ const RecentChatTopBar = styled.div`
251
265
  display: flex;
252
266
  align-items: center;
253
267
  justify-content: space-between;
@@ -294,14 +308,12 @@ const BurgerLineIcon = styled.span`
294
308
  background-color: #ffffff;
295
309
  `;
296
310
 
297
- const RecentChatLogContainer = styled.div<{ isOpen: boolean }>`
311
+ const RecentChatLogContainer = styled.div`
298
312
  border: none;
299
313
  list-style: none;
300
314
  display: flex;
301
- opacity: ${props => (props.isOpen ? 1 : 0)};
302
315
  flex-direction: column;
303
316
  gap: 0.5rem;
304
- transition: opacity 0.3s ease-in-out;
305
317
  padding: 0;
306
318
  margin: 0;
307
319
  flex: 1;