update-

package.json

 {
 	"name": "boxdialer",
-	"version": "4.0.6",
+	"version": "4.0.7",
 	"description": "",
 	"main": "src/boxDialer.js",
 	"scripts": {

src/components/ModalPhoneNumpad/index.jsx

@@ -8,7 +8,7 @@ import { toast } from 'react-hot-toast';
 import DropDown from '../DropDown';
 import { CommentsDisabledOutlined } from '@mui/icons-material';
 import CallHistoryInputDropdown from '../CallHistoryInputDropdown';
-
+import KeyboardControlKeyIcon from '@mui/icons-material/KeyboardControlKey';
 const ModalPhoneNumpad = ({
 	phoneModal,
 	modalState,
@@ -24,6 +24,7 @@ const ModalPhoneNumpad = ({
 	const [inputValue, setInputValue] = useState('');
 	const [call_history, setCall_history] = useState([]);
 	const [numberSelectHistory, setNumberSelectHistory] = useState(0);
+	const [exNum, setExNum] = useState();
 
 	useEffect(() => {
 		let currentCalls = localStorage.getItem('callhistory')
@@ -258,15 +259,19 @@ const ModalPhoneNumpad = ({
 						</NumberButton>
 						<NumberButton
 							style={{ gridColumn: '2/4' }}
-							onClick={() => callButton()}
 							status={dynamicValue}
 							type={'call_button'}>
-							<NumberButton.CallButton>
-								<div className='left'>
+							<NumberButton.CallButton exNum={exNum}>
+								<div className='left' onClick={() => callButton()}>
 									<CallIcon />
 								</div>
-								<div className='right'></div>
+								<div className='right' onClick={() => setExNum(!exNum)}>
+									<KeyboardControlKeyIcon className='icon' />
+								</div>
 							</NumberButton.CallButton>
+							<NumberButton.CallButtonModal visiblevalue={exNum}>
+								<NumberButton.CallButtonModalInset></NumberButton.CallButtonModalInset>
+							</NumberButton.CallButtonModal>
 						</NumberButton>
 					</>
 				) : (

src/components/ModalPhoneNumpad/style.js

@@ -98,6 +98,7 @@ const NumberButton = styled.div`
 	font-size: 22px;
 	cursor: pointer;
 	height: 33px;
+	position: relative;
 	background-color: ${({ status = '', type = '' }) =>
 		type === 'call_button'
 			? status === 'pending'
@@ -110,6 +111,8 @@ NumberButton.CallButton = styled.div`
 	height: 100%;
 	display: grid;
 	grid-template-columns: repeat(1fr, 4);
+	position: relative;
+
 	.left {
 		grid-column: 1/4;
 		display: flex;
@@ -121,6 +124,62 @@ NumberButton.CallButton = styled.div`
 		border-top-right-radius: 20px;
 		border-bottom-right-radius: 20px;
 		background-color: #d9d9d9;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.icon {
+			margin: 0;
+			padding: 0;
+			color: #000;
+			transition: 0.2s;
+			transform: ${({ exNum }) => (exNum ? 'rotate(177deg)' : 'rotate(0deg)')};
+		}
+	}
+`;
+NumberButton.CallButtonModal = styled.div`
+	position: absolute;
+	width: 130px;
+	height: 160px;
+	bottom: 40px;
+	transform: translate(-50%, 0);
+	left: 50%;
+	background-color: #c9d5d9;
+	border-radius: 20px;
+	padding: 15px;
+	transition: 0.1s;
+	${({ visiblevalue }) =>
+		visiblevalue
+			? {
+					opacity: '1',
+					transform: 'translate(-50%, 0)',
+			  }
+			: {
+					opacity: '0',
+					transform: 'translate(-50%, 0)',
+			  }}
+`;
+NumberButton.CallButtonModalInset = styled.div`
+	width: 100%;
+	height: 100%;
+	overflow-y: scroll;
+	::-webkit-scrollbar {
+		width: 5px;
+	}
+
+	/* Track */
+	::-webkit-scrollbar-track {
+		background: #fff0;
+	}
+
+	/* Handle */
+	::-webkit-scrollbar-thumb {
+		background: #abaaaa;
+		border-radius: 10px;
+	}
+
+	/* Handle on hover */
+	::-webkit-scrollbar-thumb:hover {
+		background: #555;
 	}
 `;
 NumberButton.Icon = styled.div`

src/lib/controlRenderBX.jsx

@@ -21,7 +21,7 @@ const ControlRenderBX = () => {
 			});
 		}
 	}, []);
-	console.log('window_alovoice_onsetdnd: ', window.alovoice_onsetdnd);
+	console.log('window_alovoice_wsphone: ', window.alovoice_wsphone);
 	return (
 		<div>
 			{wsphonedata?.number && (