Skip to content

Commit

Permalink
apply feeds
Browse files Browse the repository at this point in the history
  • Loading branch information
liamcho committed Sep 13, 2024
1 parent 86c9764 commit f8ea978
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 79 deletions.
56 changes: 8 additions & 48 deletions src/components/CurrentUserMessage.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,12 @@
import { styled } from '@linaria/react';
import { SendingStatus, UserMessage } from '@sendbird/chat/message';
import { UserMessage } from '@sendbird/chat/message';
import { useTheme } from 'styled-components';

import { DefaultSentTime, BodyContainer, BodyComponent } from './MessageComponent';
import { BodyContainer, BodyComponent } from './MessageComponent';
import MyMessageStatus from './MyMessageStatus';
import { useConstantState } from '../context/ConstantContext';
import { useWidgetSetting } from '../context/WidgetSettingContext';
import { Icon } from '../foundation/components/Icon';
import { formatCreatedAtToAMPM } from '../utils/messageTimestamp';

const SpinnerSize = '16px';

interface IconContainerProps {
isSpinning?: boolean;
}

const IconContainer = styled.div<IconContainerProps>`
display: grid;
justify-content: center;
align-items: center;
margin-bottom: 2px;
animation: ${({ isSpinning }) => (isSpinning ? 'spinner 1.5s linear infinite' : 'unset')};
@keyframes spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
`;
import '../css/index.css';

const Root = styled.div<{ enableEmojiFeedback: boolean }>`
display: flex;
Expand All @@ -43,31 +21,13 @@ type Props = {

export default function CurrentUserMessage(props: Props) {
const { enableEmojiFeedback, dateLocale } = useConstantState();
const { theme } = useWidgetSetting();
const { message } = props;
const theme = useTheme();

const MessageStatus = () => {
switch (message.sendingStatus) {
case SendingStatus.PENDING:
return (
<IconContainer isSpinning={true}>
<Icon type={"spinner"} color={theme.bgColor.outgoingMessage} size={16} />
</IconContainer>
);
case SendingStatus.FAILED:
return (
<IconContainer>
<Icon type={"error"} color={"error"} size={16} />
</IconContainer>
);
default:
return <DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>;
}
};
const { message } = props;

return (
<Root enableEmojiFeedback={enableEmojiFeedback}>
<MessageStatus />
<MyMessageStatus message={message} dateLocale={dateLocale} theme={theme} />
<BodyContainer>
<BodyComponent>
<div className="sendbird-word">{message.message}</div>
Expand Down
35 changes: 35 additions & 0 deletions src/components/MyMessageStatus.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { SendableMessage } from '@sendbird/chat/lib/__definition';
import { SendingStatus } from '@sendbird/chat/message';
import { Locale } from 'date-fns';

import { DefaultSentTime } from './MessageComponent';
import { Icon } from '../foundation/components/Icon';
import { Loader } from '../foundation/components/Loader';
import { CommonTheme } from '../theme';
import { formatCreatedAtToAMPM } from '../utils/messageTimestamp';

interface MyMessageStatusProps {
message: SendableMessage;
dateLocale: Locale;
theme: CommonTheme;
}

export default function MyMessageStatus(props: MyMessageStatusProps) {
const { message, dateLocale, theme } = props;
switch (message.sendingStatus) {
case SendingStatus.PENDING:
return (
<Loader size={16} className="sendbird-loader">
<Icon type={'spinner'} color={theme.bgColor.outgoingMessage} size={16} />
</Loader>
);
case SendingStatus.FAILED:
return (
<Loader size={16} className="sendbird-loader no-animation">
<Icon type={'error'} color={'error'} size={16} />
</Loader>
);
default:
return <DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>;
}
}
8 changes: 5 additions & 3 deletions src/components/messages/OutgoingFileMessage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@ import { css } from '@linaria/core';
import { styled } from '@linaria/react';
import { FileMessage } from '@sendbird/chat/message';
import { useState } from 'react';
import { useTheme } from 'styled-components';

import { useConstantState } from '../../context/ConstantContext';
import { Icon } from '../../foundation/components/Icon';
import { Label } from '../../foundation/components/Label';
import { Loader } from '../../foundation/components/Loader';
import { META_ARRAY_ASPECT_RATIO_KEY } from '../../utils/getImageAspectRatio';
import { formatCreatedAtToAMPM } from '../../utils/messageTimestamp';
import { BodyComponent, BodyContainer, DefaultSentTime } from '../MessageComponent';
import { BodyComponent, BodyContainer } from '../MessageComponent';
import MyMessageStatus from '../MyMessageStatus';
import { FileViewer } from '../ui/FileViewer';

type Props = {
Expand All @@ -18,6 +19,7 @@ type Props = {

export const OutgoingFileMessage = ({ message }: Props) => {
const { dateLocale } = useConstantState();
const theme = useTheme();

const hasMessageBubble = !!message.message;
const type = (() => {
Expand All @@ -36,7 +38,7 @@ export const OutgoingFileMessage = ({ message }: Props) => {
const renderTimestamp = () => {
return (
<div className={timestampContainer}>
<DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>
<MyMessageStatus message={message} dateLocale={dateLocale} theme={theme} />
</div>
);
};
Expand Down
26 changes: 23 additions & 3 deletions src/components/widget/ProviderContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@ import { StyleSheetManager, ThemeProvider } from 'styled-components';
import SendbirdProvider from '@uikit/lib/Sendbird';

import { ChatAiWidgetProps } from './ChatAiWidget';
import { generateCSSVariables } from '../../colors';
import { ConstantStateProvider, useConstantState } from '../../context/ConstantContext';
import { useWidgetSession, useWidgetSetting, WidgetSettingProvider } from '../../context/WidgetSettingContext';
import { useWidgetState, WidgetStateProvider } from '../../context/WidgetStateContext';
import { useStyledComponentsTarget } from '../../hooks/useStyledComponentsTarget';
import { getTheme } from '../../theme';
import { DragDropProvider } from '../../tools/hooks/useDragDropFiles';
import { isDashboardPreview } from '../../utils';

Expand All @@ -32,7 +34,7 @@ const SBComponent = ({ children }: { children: React.ReactElement }) => {
} = useConstantState();

const { setIsVisible } = useWidgetState();
const { botConfigs, botStyle, theme, colorSet } = useWidgetSetting();
const { botConfigs, botStyle } = useWidgetSetting();
const session = useWidgetSession();
const target = useStyledComponentsTarget();

Expand All @@ -49,9 +51,27 @@ const SBComponent = ({ children }: { children: React.ReactElement }) => {
return userAgent;
}, []);

const { theme, accentColor, botMessageBGColor } = botStyle;

const styledTheme = getTheme({
accentColor,
botMessageBGColor,
})[theme];

const customColorSet = useMemo(() => {
if (!accentColor) return undefined;

return ['light', 'dark'].reduce((acc, cur) => {
return {
...acc,
...generateCSSVariables(accentColor, cur),
};
}, {});
}, [accentColor]);

return (
<StyleSheetManager target={target}>
<ThemeProvider theme={theme}>
<ThemeProvider theme={styledTheme}>
{applicationId && session.userId && (
<SendbirdProvider
appId={applicationId}
Expand All @@ -64,7 +84,7 @@ const SBComponent = ({ children }: { children: React.ReactElement }) => {
customExtensionParams={userAgentCustomParams}
breakpoint={isMobileView} // A property that determines whether to show it with a layout that fits the mobile screen. Or you can put the width size with `px`.
theme={botStyle.theme}
colorSet={colorSet}
colorSet={customColorSet}
stringSet={stringSet}
dateLocale={dateLocale}
eventHandlers={{
Expand Down
26 changes: 1 addition & 25 deletions src/context/WidgetSettingContext.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { SendbirdChatWith } from '@sendbird/chat';
import { GroupChannelModule } from '@sendbird/chat/groupChannel';
import React, { createContext, useContext, useLayoutEffect, useMemo, useState } from 'react';
import React, { createContext, useContext, useLayoutEffect, useState } from 'react';

import { useConstantState } from './ConstantContext';
import { generateCSSVariables } from '../colors';
import { widgetSettingHandler } from '../libs/api/widgetSetting';
import { getWidgetSessionCache, saveWidgetSessionCache, WidgetSessionCache } from '../libs/storage/widgetSessionCache';
import { CommonTheme, getTheme } from '../theme';
import { getDateNDaysLater, isPastTime } from '../utils';

interface WidgetSession {
Expand All @@ -33,8 +31,6 @@ export interface BotConfigs {
type Context = {
initialized: boolean;
botStyle: BotStyle;
theme: CommonTheme;
colorSet?: Record<string, string>;
botConfigs: BotConfigs;
widgetSession: WidgetSession | null;
initManualSession: (sdk: SendbirdChatWith<[GroupChannelModule]>) => void;
Expand Down Expand Up @@ -196,24 +192,6 @@ export const WidgetSettingProvider = ({ children }: React.PropsWithChildren) =>
});
}, [sessionStrategy]);

const { theme, accentColor, botMessageBGColor } = botStyle;

const styledTheme = getTheme({
accentColor,
botMessageBGColor,
})[theme];

const customColorSet = useMemo(() => {
if (!accentColor) return undefined;

return ['light', 'dark'].reduce((acc, cur) => {
return {
...acc,
...generateCSSVariables(accentColor, cur),
};
}, {});
}, [accentColor]);

return (
<WidgetSettingContext.Provider
value={{
Expand All @@ -225,8 +203,6 @@ export const WidgetSettingProvider = ({ children }: React.PropsWithChildren) =>
botStudioEditProps?.styles?.accentColor ?? botStudioEditProps?.styles?.primaryColor ?? botStyle.accentColor,
autoOpen: autoOpen ?? botStyle.autoOpen,
},
theme: styledTheme,
colorSet: customColorSet,
botConfigs,
widgetSession,
initManualSession,
Expand Down
7 changes: 7 additions & 0 deletions src/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -111,3 +111,10 @@ input:focus {
.sendbird-form-chip {
padding: 0px 12px;
}

.sendbird-loader {
margin-bottom: 2px;
&.no-animation {
animation: unset;
}
}

0 comments on commit f8ea978

Please sign in to comment.