| 
						
						
							
								
							
						
						
					 | 
				
			
			 | 
			 | 
			
				@ -2,20 +2,30 @@ import _ from 'lodash';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import { useState } from 'react';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import { useDispatch } from 'react-redux';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import styled from 'styled-components';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import { getConversationController } from '../../session/conversations';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import { changeNickNameModal } from '../../state/ducks/modalDialog';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import { SessionWrapperModal } from '../SessionWrapperModal';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import { SpacerLG } from '../basic/Text';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import { useConversationRealName } from '../../hooks/useParamSelector';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import { PubKey } from '../../session/types';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import { I18n } from '../basic/I18n';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				type Props = {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  conversationId: string;
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				};
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				const StyledMaxWidth = styled.span`
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  max-width: 30ch;
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				`;
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				export const SessionNicknameDialog = (props: Props) => {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  const { conversationId } = props;
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  const [nickname, setNickname] = useState('');
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  // this resolves to the real user name, and not the nickname (if set) like we do usually
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  const displayName = useConversationRealName(conversationId);
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  const dispatch = useDispatch();
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
	
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
				
			
			 | 
			 | 
			
				@ -55,16 +65,21 @@ export const SessionNicknameDialog = (props: Props) => {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      showExitIcon={false}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      showHeader={true}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    >
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <div className="session-modal__centered">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <span className="subtle">{window.i18n('nicknameEnter')}</span>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <StyledMaxWidth className="session-modal__centered">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <I18n
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          token="nicknameDescription"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          args={{
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            name: displayName || PubKey.shorten(conversationId),
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          }}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        ></I18n>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <SpacerLG />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </StyledMaxWidth>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <input
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        autoFocus={true}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        type="nickname"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        id="nickname-modal-input"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        placeholder={window.i18n('nicknameSet')}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        placeholder={window.i18n('nicknameEnter')}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        onKeyUp={e => {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          void onNicknameInput(_.cloneDeep(e));
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        }}
 | 
			
		
		
	
	
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
				
			
			 | 
			 | 
			
				@ -73,7 +88,7 @@ export const SessionNicknameDialog = (props: Props) => {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <div className="session-modal__button-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <SessionButton
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          text={window.i18n('okay')}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          text={window.i18n('save')}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          buttonType={SessionButtonType.Simple}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          onClick={saveNickname}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          dataTestId="confirm-nickname"
 | 
			
		
		
	
	
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
				
			
			 | 
			 | 
			
				
 
 |