+ { timeline.map((mEvent) => {
+ const time = dateFormat(mEvent.getDate(), 'dd/mm/yyyy - hh:MM TT');
+ const id = mEvent.getId();
+ return (
+
+
+
+
+ );
+ })}
+
+ );
+
+ return (
+
+
+ {searchData === null && (
+
+ {status.type === cons.status.IN_FLIGHT && }
+ {status.type === cons.status.IN_FLIGHT && Searching room messages...}
+ {status.type === cons.status.PRE_FLIGHT && }
+ {status.type === cons.status.PRE_FLIGHT && Search room messages}
+ {status.type === cons.status.ERROR && Failed to search messages}
+
+ )}
+
+ {searchData?.results.length === 0 && (
+
+ No result found
+
+ )}
+ {searchData?.results.length > 0 && (
+ <>
+
+ {searchData.results.map((searchResult) => {
+ const { timeline } = searchResult.context;
+ return renderTimeline(timeline);
+ })}
+
+ {searchData?.next_batch && (
+
+ {status.type !== cons.status.IN_FLIGHT && (
+
+ )}
+ {status.type === cons.status.IN_FLIGHT && }
+
+ )}
+ >
+ )}
+
+ );
+}
+
+RoomSearch.propTypes = {
+ roomId: PropTypes.string.isRequired,
+};
+
+export default RoomSearch;
diff --git a/src/app/molecules/room-search/RoomSearch.scss b/src/app/molecules/room-search/RoomSearch.scss
new file mode 100644
index 00000000..a40945ef
--- /dev/null
+++ b/src/app/molecules/room-search/RoomSearch.scss
@@ -0,0 +1,62 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.room-search {
+ &__form {
+ & div:nth-child(2) {
+ display: flex;
+ align-items: flex-end;
+ padding: var(--sp-normal);;
+
+ & .input-container {
+ @extend .cp-fx__item-one;
+ @include dir.side(margin, 0, var(--sp-normal));
+ }
+ & button {
+ height: 46px;
+ }
+ }
+ & .context-menu__header {
+ margin-bottom: 0;
+ }
+ & > .text {
+ padding: 0 var(--sp-normal) var(--sp-tight);
+ }
+ }
+
+ &__help {
+ height: 248px;
+ @extend .cp-fx__column--c-c;
+
+ & .ic-raw {
+ opacity: .5;
+ }
+ .text {
+ margin-top: var(--sp-normal);
+ }
+ }
+ &__more {
+ margin-bottom: var(--sp-normal);
+ @extend .cp-fx__row--c-c;
+ button {
+ width: 100%;
+ }
+ }
+ &__result-item {
+ padding: var(--sp-tight) var(--sp-normal);
+ display: flex;
+ align-items: flex-start;
+
+ .message {
+ @include dir.side(margin, 0, var(--sp-normal));
+ @extend .cp-fx__item-one;
+ padding: 0;
+ &:hover {
+ background-color: transparent;
+ }
+ & .message__time {
+ flex: 0;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/organisms/room/RoomSettings.jsx b/src/app/organisms/room/RoomSettings.jsx
index 98f49bc0..057d45a2 100644
--- a/src/app/organisms/room/RoomSettings.jsx
+++ b/src/app/organisms/room/RoomSettings.jsx
@@ -14,6 +14,7 @@ import ScrollView from '../../atoms/scroll/ScrollView';
import Tabs from '../../atoms/tabs/Tabs';
import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
import RoomProfile from '../../molecules/room-profile/RoomProfile';
+import RoomSearch from '../../molecules/room-search/RoomSearch';
import RoomNotification from '../../molecules/room-notification/RoomNotification';
import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
import RoomAliases from '../../molecules/room-aliases/RoomAliases';
@@ -151,6 +152,7 @@ function RoomSettings({ roomId }) {
/>