update-

src/components/MiniTable/index.jsx

+import React from 'react'
+import TableBlock from "./style"
+
+
+// id, title, inputTag, type: 'row' || 'column'
+const MiniTable = ({
+                       data,
+                       gap = '5px'
+                   }) => {
+    return (<TableBlock gap={gap}>
+        {data?.map(({id, title, inputTag, type, child, gap}) => (
+            <TableBlock.Row  id={id} gap={gap}>
+                <TableBlock.RowInset blockType={type}>
+                    <p className={'title'}>{title}</p>
+                    <div className={'inputArea'}>{inputTag}</div>
+                </TableBlock.RowInset>
+                {
+                    child && <div className={'child'}>{child}</div>
+                }
+            </TableBlock.Row>
+        ))}
+    </TableBlock>)
+}
+
+export default MiniTable

src/components/MiniTable/style.js

+import styled from 'styled-components'
+
+const TableBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({gap}) => gap ? gap : '3px'};
+  width: 100%;
+  
+`
+TableBlock.Row = styled.div`
+  width: 100%;
+  border-bottom: 1px solid #333;
+  display: flex;
+  flex-direction: column;
+  gap: ${({gap})=> gap ? gap : '3px'};
+  .child{
+    width: 100%;
+  }
+`
+TableBlock.RowInset = styled.div`
+  ${({blockType}) => blockType === 'row' ? {
+    display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '5px'
+  } : {
+    display: 'flex', flexDirection: 'column'
+  }}
+  .title {
+    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 15px;
+    font-weight: initial;
+    margin: 0;
+    padding: 0;
+  }
+
+  .inputArea {
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+`
+
+
+
+export default TableBlock

src/components/Modal/index.jsx

@@ -24,6 +24,7 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
 	const [transferModel, setTransferModel] = useState(true);
 	const [numpadModal, setNumpadModal] = useState(false);
 
+	console.log('callType_modal: ', callType)
 
 	useEffect(() => {
 		setModalHidden(hidden);

src/components/ModalPhoneNumpad/style.js

@@ -5,12 +5,11 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
 import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
 
 const ModalPhoneNumpadStyle = styled.div`
-	box-shadow: 0px 0px 20px #00000047;
+	box-shadow: 0 0 20px #00000047;
 	background-color: #a6bdf438;
 	backdrop-filter: blur(10px);
 	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	margin: 0;
-	padding: 0;
 	box-sizing: border-box;
 	width: 230px;
 	position: fixed;
@@ -27,6 +26,14 @@ const ModalPhoneNumpadStyle = styled.div`
 	grid-template-rows: 40px 1fr;
 	grid-gap: 15px;
 	cursor: default;
+	.settingIcon{
+		position: absolute;
+		font-size: 11px;
+		cursor: pointer;
+		top: 4px;
+		right: 6px;
+		color: #00000030;
+	}
 `;
 ModalPhoneNumpadStyle.InputArea = styled.div`
 	position: relative;

src/components/setting/index.jsx

+import React, {useEffect, useState} from 'react'
+import SettingMainStyle from './style'
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import FormatPaintIcon from '@mui/icons-material/FormatPaint';
+import BuildIcon from '@mui/icons-material/Build';
+import FixComponent from "../settingComponents/fixComponent"
+const SettingComponent = ({
+                              settingHidden, variant, position
+                          }) => {
+
+    const [settingPage, setSettingPage] = useState(0)
+    var elem = document.getElementById('data');
+
+    const allData = [
+        {
+            id: 0,
+            title: 'Test-2',
+            icon: <BuildIcon className={'leftIcons'} />,
+            content: <SettingMainStyle.RightSelectInfoOneBlock><FixComponent /></SettingMainStyle.RightSelectInfoOneBlock>
+        },
+        {
+            id: 1,
+            title: 'Test-1',
+            icon: <FormatPaintIcon className={'leftIcons'} />,
+            content: <SettingMainStyle.RightSelectInfoOneBlock>2</SettingMainStyle.RightSelectInfoOneBlock>
+        },
+        {
+            id: 2,
+            title: 'Test-3',
+            icon: <CheckBoxOutlineBlankIcon className={'leftIcons'} />,
+            content: <SettingMainStyle.RightSelectInfoOneBlock>3</SettingMainStyle.RightSelectInfoOneBlock>
+        },
+        {
+            id: 3,
+            title: 'Test-4',
+            icon: <CheckBoxOutlineBlankIcon className={'leftIcons'} />,
+            content: <SettingMainStyle.RightSelectInfoOneBlock>4</SettingMainStyle.RightSelectInfoOneBlock>
+        },
+    ]
+
+    const changeSettingPageCountFunc = (count) => {
+        setSettingPage(count)
+    }
+
+    console.log('elem: ', elem)
+
+    useEffect(() => {
+        if(elem){
+            elem.scrollTo({top: elem.scrollHeight / allData.length * settingPage,behavior: 'smooth'})
+        }
+    }, [settingPage]);
+
+    return (<SettingMainStyle
+        hiddenValue={!settingHidden}
+        // hiddenValue={false}
+        variant={variant}
+        position={position}
+    >
+        <SettingMainStyle.LeftMenu>
+            {
+                allData.map(({id, title, icon})=> <div id={id} className={`menuItem ${settingPage === id && 'active'}`} onClick={()=> changeSettingPageCountFunc(id)}>
+                    {icon}
+                    <div className={'backgroundFilter'}></div>
+                </div>)
+            }
+        </SettingMainStyle.LeftMenu>
+        <SettingMainStyle.RightSelectInfo id={'data'}>
+            {
+                allData.map(({content, id})=> content)
+            }
+        </SettingMainStyle.RightSelectInfo>
+
+    </SettingMainStyle>)
+}
+
+export default SettingComponent

src/components/setting/style.js

+import styled from 'styled-components'
+import {boxDialerWidjetPosition} from "../../lib/boxDialerWidjetPosition"
+
+const SettingMainStyle = styled.div`
+  box-shadow: 0 0  20px #00000047;
+  background-color: #a6bdf438;
+  border-radius: 20px;
+  margin: 0;
+  box-sizing: border-box;
+  width: 230px;
+  height: 300px;
+  position: fixed;
+  padding: 3px;
+  transition: 0.2s !important;
+  z-index: 9999;
+  backdrop-filter: blur(10px);
+  ${({ hiddenValue, position, variant }) =>
+          hiddenValue
+                  ? boxDialerWidjetPosition[variant][position].numpad.hidden
+                  : boxDialerWidjetPosition[variant][position].numpad.seen}
+  bottom: 400px;
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  grid-gap: 2px;
+`
+SettingMainStyle.LeftMenu = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 10px 0;
+  box-sizing: border-box;
+  .menuItem {
+    height: 34px;
+    width: 34px;
+    border: 1px solid #9c9c9c80;
+    padding: 2px;
+    font-size: 14px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 3px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 3px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .leftIcons {
+    color: #00000080;
+  }
+
+  .backgroundFilter {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 0;
+    background: #0000004d;
+    z-index: 1;
+    border-top-left-radius: 9px;
+    border-top-right-radius: 2px;
+    border-bottom-left-radius: 9px;
+    border-bottom-right-radius: 2px;
+  }
+
+  .active {
+    //.leftIcons{
+    //  color: #fff;
+    //}
+    .backgroundFilter {
+      width: 100%;
+      animation: .2s ease-in both running backFilter;
+    }
+  }
+  @keyframes backFilter {
+    from{
+      height: 0;
+    }
+    to{
+      height: 100%;
+    }
+  }
+  height: 100%;
+`
+SettingMainStyle.RightSelectInfo = styled.div`
+  box-sizing: border-box;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+  justify-content: center; 
+  padding: 3px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 10px;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 10px;
+  ::-webkit-scrollbar {
+    height: 5px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #fff0;
+    width: 0;
+    
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #abaaaa;
+    border-radius: 10px;
+    width: 0;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+    width: 0;
+    
+  }
+  
+`
+SettingMainStyle.RightSelectInfoOneBlock = styled.div`
+  height: 285px;
+  background: #ccc;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 10px;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 10px;
+  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;
+  }
+  
+`
+
+export default SettingMainStyle

src/components/settingComponents/fixComponent/index.jsx

+import React from 'react'
+import Block from "./style"
+import Switch from '@mui/material/Switch';
+import MiniTable from "../../MiniTable"
+import {useColorConfig} from "../../../storage/globalColorConfig"
+import Slider from '@mui/material/Slider';
+
+const FixComponent = () => {
+
+
+    const useColorConfigStore = useColorConfig((store) => store)
+
+    console.log('useColorConfig client: ', useColorConfigStore.state.autoAnswer)
+
+    const marks = [
+        {
+            value: 1,
+            label: '1s',
+        },
+        {
+            value: 40,
+            label: '3s',
+        },
+        {
+            value: 100,
+            label: '6s',
+        }
+    ];
+
+
+    const tableData = [{
+        id: '1',
+        title: 'Auto answer',
+        type: 'row',
+        child: useColorConfigStore.state.autoAnswer && <div style={{padding: '0 20px 0 5px'}}>
+            <Slider
+                aria-label="Restricted values"
+                defaultValue={40}
+                step={null}
+                value={useColorConfigStore.state.autoAnswerSecond}
+                marks={marks}
+                onChange={(e)=> useColorConfigStore.setColor({name: 'autoAnswerSecond', value: e.target.value})}
+            />
+        </div>,
+        inputTag: <Switch
+            size={'small'}
+            checked={useColorConfigStore.state.autoAnswer}
+            onChange={(e) => {
+                return useColorConfigStore.setColor({name: 'autoAnswer', value: e.target.checked})
+            }}
+            />,
+    }]
+
+    return (<Block>
+            {/*<p>Text</p>*/}
+            {/*<Switch size={'small'} defaultChecked />*/}
+            <MiniTable data={tableData}/>
+        </Block>)
+}
+
+export default FixComponent

src/components/settingComponents/fixComponent/style.js

+import styled from 'styled-components'
+
+const Block = styled.div`
+  margin: 5px;
+`
+
+export default Block

src/lib/boxDIaler.js

@@ -59,6 +59,9 @@ export class BoxDialer {
 	player;
 	strmTrack;
 	isRestarting;
+	globalHistoryData
+
+
 	constructor() {
 		this.played = false;
 		document.body.addEventListener('click', () => {
@@ -423,6 +426,7 @@ export class BoxDialer {
 				});
 				this.ua.on('connecting', (e) => {
 					console.log('%c connecting: ', 'font-size: 22px; color: yellow;', e);
+
 				});
 				this.ua.on('registrationExpiring', (e) => {
 					console.log(
@@ -466,7 +470,7 @@ export class BoxDialer {
 						funcName: 'modalState',
 						funcParam: {
 							bool: true,
-							callType: 'connected',
+							callType: 'incoming',
 						},
 					});
 
@@ -530,7 +534,7 @@ export class BoxDialer {
 							);
 							// this handler will be called for incoming calls too
 							console.log(
-								'%c incoming confirme',
+								'%c incoming confirmed',
 								'font-size: 22px; color: yellow;',
 							);
 							this.onSipStateChange.innerCallerModal({
@@ -540,7 +544,11 @@ export class BoxDialer {
 							});
 							this.startInnerTimer();
 							this.setGuiPhoneState({
-								stateCode: 'connected',
+								funcName: 'modalState',
+								funcParam: {
+									bool: true,
+									callType: 'connected',
+								},
 							});
 						});
 						this.callSession.on('ended', () => {
@@ -866,7 +874,7 @@ export class BoxDialer {
 
 	answerButtonClick() {
 		this.onSoundType({ type: 'ring', bool: false });
-		this.callSession.answer(this.options);
+		this.callSession?.answer(this.options);
 		this.callSession.connection.addEventListener('addstream', (event) => {
 			this.remoteAudio.srcObject = event.stream;
 			this.remoteAudio.play();

src/lib/controlRenderBX.jsx

 /** @format */
 import React, { useEffect, useState } from 'react';
 import Root from '../root';
+import {useColorConfig} from "../storage/globalColorConfig"
 
 const ControlRenderBX = () => {
+	const useColorConfigStore = useColorConfig((store)=> store)
 	const [wsphonedata, setWsphonedata] = useState({});
 	useEffect(() => {
 		setWsphonedata(window.alovoice_wsphone);
+		useColorConfigStore.getColors()
 		if (!window.alovoice_wsphone) {
 			setWsphonedata({
 				iscloud: true,
@@ -30,6 +33,7 @@ const ControlRenderBX = () => {
 				],
 			});
 		}
+		// getHistoryColor
 	}, []);
 	console.log('window_alovoice_wsphone: ', window.alovoice_wsphone);
 	return (

src/lib/globalColors.js

+
+const getLocalColor = () => {
+    const res = window.localStorage.getItem('boxdialer-style')
+    return JSON.parse(res) || {}
+}
+
+
+const globalColors = {
+    test: '#ff0000',
+
+    ...getLocalColor(),
+}
+
+
+
+
+export {globalColors}

src/root/index.jsx

@@ -9,18 +9,21 @@ import BxMiniWidjetUi from '../components/BxMiniWidjetUi';
 import SecondNotifSip from '../components/SecondNotifSip';
 import InnerCaller from '../components/InnerCaller';
 import {useConfigHoldMute} from "../storage"
+import SettingComponent from "../components/setting"
+import {useColorConfig} from "../storage/globalColorConfig"
 // import { contextModalEventProperty } from '../context/modalEventProperty';
 
 const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
     const boxDialer = window.BoxDialer;
 
-    // // context
-    // const { callEvents, setCallEvents } = useContext(contextModalEventProperty);
+    const useColorConfigStore = useColorConfig((store) => store)
     const configHoldMute = useConfigHoldMute((state) => state)
     const [phoneModal, setPhoneModal] = useState(false);
     const [dynamicValue, setDynamicValue] = useState('pending');
     const [modalState, setModalState] = useState(false);
+    const [settingHidden, setSettingHidden] = useState(false);
     const [secondLine, setSecondLine] = useState(false);
+    // const [secondLine, setSecondLine] = useState(false);
     const [innerTimer, setInnerTimer] = useState(null);
     const [innerCallerModal, setInnerCallerModal] = useState({
         bool: false,
@@ -38,13 +41,13 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
 
 
     useEffect(() => {
+        boxDialer.globalHistoryData = useColorConfigStore.state
         if (wsphonedata && wsphonedata?.number) {
             boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
             boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
             boxDialer.setSipStateChangeCallback(setSecondLine, 'secondLine');
             boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal');
             boxDialer.setSipStateChangeCallback(setInnerTimer, 'innerTimer');
-            // // context
             boxDialer.setSipStateChangeCallback(configHoldMute.setState, 'setCallEvents');
             boxDialer.setSipStateChangeCallback(
                 setInnerCallerModal,
@@ -86,6 +89,35 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
         setWsphonedata(result);
     };
 
+
+    useEffect(()=> {
+        console.log('auto_answer running: ', modalState.callType === 'incoming' && modalState.bool)
+        if(modalState.callType === 'incoming' && modalState.bool){
+            let second
+            if(useColorConfigStore.state?.autoAnswer) {
+                switch (useColorConfigStore.state?.autoAnswerSecond) {
+                    case 1:
+                        second = 1000
+                        break
+                    case 40:
+                        second = 3000
+                        break
+                    case 100:
+                        second = 6000
+                        break
+                    default:
+                        second = 0
+                }
+                console.log('auto_answer second: ', second)
+                setTimeout(() => {
+                    console.log('auto_answer run boxDialer.answerButtonClick()')
+                    boxDialer.answerButtonClick()
+                }, second)
+            }
+        }
+    }, [modalState.callType, modalState.bool, useColorConfigStore.state?.autoAnswer, useColorConfigStore.state?.autoAnswerSecond])
+
+
     const selectWidjetType = (type) => {
         switch (type) {
             case 'bxmini':
@@ -141,13 +173,19 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
         }
     };
 
-    console.log('wsphonedata_variant: ', !wsphonedata?.number, !wsphonedata?.position, !wsphonedata?.number && !wsphonedata?.position)
     if (!wsphonedata?.number && !wsphonedata?.position) return;
     return (
         <>
             {selectWidjetType(wsphonedata.variant)}
+            <SettingComponent
+                settingHidden={settingHidden && phoneModal ? true : false}
+                variant={wsphonedata.variant || 'defaultWidjet'}
+                position={wsphonedata.position || 'bottomLeft'}
+            />
 
             <ModalPhoneNumpad
+                setSettingHidden={setSettingHidden}
+                settingHidden={settingHidden}
                 modalState={modalState}
                 phoneModal={phoneModal}
                 reasons={wsphonedata?.reasons}
@@ -160,12 +198,20 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
                 extnums={wsphonedata.extnums}
             />
 
+            {/*
+                incoming
+                outgoing
+                connectingIncoming
+                connectingOutgoing
+                connected
+            */}
+
             <Modal
                 className='tailwindGlobalCss'
                 hidden={modalState.bool}
-                // hidden={true}
                 callType={modalState.callType}
-                // callType={'connected'}
+                // hidden={true}
+                // callType={'incoming'}
                 hangupButton={hangupButton}
                 phoneNumber={
                     modalState.callType === 'outcoming'
@@ -176,9 +222,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
 
             <InnerCaller
                 hidden={innerCallerModal.bool}
-                // hidden={true}
                 type={innerCallerModal.type}
-                // type={'connectingIncoming'}
                 from={innerCallerModal.from}
                 innerTimer={innerTimer}
             />

src/storage/globalColorConfig.js

+/** @format */
+
+import {create} from 'zustand';
+
+
+
+export const useColorConfig = create((set, get) => ({
+    state: {},
+    getColors: () => {
+        const res = localStorage.getItem('boxdialer-style')
+        if (!!res) {
+            let jsonRes = JSON.parse(res)
+            set(() => ({state: jsonRes}))
+        }
+    },
+    setColor: ({name, value}) => {
+        const state = get()
+        if (!!name) {
+            set((state) => ({
+                state: {
+                    ...state.state,
+                    [name]: value
+                }
+            }))
+            state.saveToHistory()
+        }
+    },
+    saveToHistory: () => {
+        const state = get()
+        localStorage.setItem('boxdialer-style', JSON.stringify(state.state))
+    }
+}));