WordPress.org
Get WordPress

Plugin Directory

Changeset 3078146


Ignore:
Timestamp:
04/28/2024 07:22:17 AM (22 months ago)
Author:
lorybot
Message:

update to version 1.3

Location:
lorybot-ai-chatbot
Files:
48 added
11 edited

Legend:

Unmodified
Added
Removed

  • lorybot-ai-chatbot/trunk/assets/css/style.css

    r3048493 r3078146  
    1 /* Import Google font - Poppins */
    21@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
    3 
    4 .chatbot * {
    5   margin: 0;
    6   padding: 0;
    7   box-sizing: border-box;
    8   font-family: "Poppins", sans-serif;
     2body {
     3    overflow: hidden;
     4    min-width: 100vw;
     5    min-height: 100vh;
     6}
     7* {
     8    box-sizing: border-box;
     9    font-family: "Poppins", sans-serif;
    910}
    1011
    1112.chatbot-toggler {
    12   position: fixed;
    13   bottom: 30px;
    14   right: 35px;
    15   outline: none;
    16   border: none;
    17   height: 50px;
    18   width: 50px;
    19   display: flex;
    20   cursor: pointer;
    21   align-items: center;
    22   justify-content: center;
    23   border-radius: 50%;
    24   background: var(--main-color);
    25   transition: all 0.2s ease;
    26   z-index: 9999;
    27 }
    28 body.show-chatbot .chatbot-toggler {
    29   transform: rotate(90deg);
    30 }
    31 .chatbot-toggler span {
    32   color: #fff;
    33   position: absolute;
    34 }
    35 .chatbot-toggler span:last-child,
    36 body.show-chatbot .chatbot-toggler span:first-child  {
    37   opacity: 0;
    38 }
    39 body.show-chatbot .chatbot-toggler span:last-child {
    40   opacity: 1;
    41 }
    42 
     13    width: 50px;
     14    height: 50px;
     15    background-color: var(--main-color);
     16    border-radius: 50%;
     17    display: flex;
     18    align-items: center;
     19    justify-content: center;
     20    position: fixed;
     21    right: 30px;
     22    bottom: 30px;
     23    border: 0;
     24    cursor: pointer;
     25    transition: background-color 0.4s;
     26    animation: scaleUp1 4s;
     27    animation-iteration-count: infinite;
     28    z-index: 9999;
     29}
     30@keyframes scaleUp1 {
     31  0% {
     32    transform: scale(1);
     33  }
     34  7% {
     35    transform: scale(1.1);
     36  }
     37  14% {
     38    transform: scale(1);
     39  }
     40}
     41.chatbot-toggler img {
     42    animation: scaleUp2 6s;
     43    animation-iteration-count: infinite;
     44}
     45.chatbot-toggler div {
     46    width: 100%;
     47    height: 100%;
     48    position: absolute;
     49    left: 50%;
     50    top: 50%;
     51    transform: translate(-50%, -50%);
     52    display: flex;
     53    align-items: center;
     54    justify-content: center;
     55    background-image: var(--lorybot-chat-white);
     56    background-size: 32px;         
     57    background-repeat: no-repeat;     
     58    background-position: center center;
     59}
     60.chatbot-toggler div img {
     61    opacity: 0;
     62    transition: opacity 0.4s;
     63}
     64@keyframes scaleUp2 {
     65    0% {
     66    transform: scale(1);
     67    }
     68    7% {
     69    transform: scale(1.2);
     70    }
     71    14% {
     72    transform: scale(1);
     73    }
     74}
     75
     76.chatbot-sseMessages, .chatbot-original_message{
     77    display: none;
     78}
     79
     80
     81#chatbot-container {
     82    position: fixed;
     83    right: 30px;
     84    bottom: 100px;
     85    transform: scale(0);
     86    opacity: 0;
     87    transition: transform 0.1s, opacity 0.1s;
     88    transform-origin: bottom right;
     89}
     90#chatbot-container.active {
     91    transform: scale(1) !important;
     92    opacity: 1;
     93}
    4394.chatbot {
    44   position: fixed;
    45   right: 35px;
    46   bottom: 90px;
    47   width: 420px;
    48   background: var(--background-color);
    49   border-radius: 15px;
    50   overflow: hidden;
    51   opacity: 0;
    52   pointer-events: none;
    53   transform: scale(0.5);
    54   transform-origin: bottom right;
    55   box-shadow: 0 0 128px 0 rgba(0,0,0,0.1), 0 32px 64px -48px rgba(0,0,0,0.5);
    56   transition: all 0.1s ease;
    57   z-index: 10000; /* Ensures it is above all other elements */
    58 }
    59 
    60 body.show-chatbot .chatbot {
    61   opacity: 1;
    62   pointer-events: auto;
    63   transform: scale(1);
    64 }
    65 .chatbot header {
    66   padding: 16px 0;
    67   position: relative;
    68   text-align: center;
    69   color: #fff;
    70   background: var(--main-color);
    71   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    72 }
    73 .chatbot header span {
    74   position: absolute;
    75   right: 15px;
    76   top: 50%;
    77   display: none;
    78   cursor: pointer;
    79   transform: translateY(-50%);
    80 }
    81 header h2 {
    82   font-size: 1.4rem;
    83   color: var(--title-color);
    84 }
    85 .chatbot .chatbox {
    86   overflow-y: auto;
    87   height: 510px;
    88   padding: 30px 20px 100px;
    89 }
    90 .chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
    91   width: 6px;
    92 }
    93 .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
    94   background: #fff;
    95   border-radius: 25px;
    96 }
    97 .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
    98   background: #ccc;
    99   border-radius: 25px;
    100 }
    101 .chatbox .chat {
    102   display: flex;
    103   list-style: none;
    104 }
    105 .chatbox .outgoing {
    106   margin: 20px 0;
    107   justify-content: flex-end;
    108 }
    109 .chatbox .incoming span {
    110   width: 32px;
    111   height: 32px;
    112   color: #fff;
    113   cursor: default;
    114   text-align: center;
    115   line-height: 32px;
    116   align-self: flex-end;
    117   background: var(--main-color);
    118   border-radius: 4px;
    119   margin: 0 10px 7px 0;
    120 }
    121 .chatbox .chat p {
    122   white-space: pre-wrap;
    123   padding: 12px 16px;
    124   border-radius: 10px 10px 0 10px;
    125   max-width: 75%;
    126   color: #fff;
    127   font-size: 0.95rem;
    128   background: var(--main-color);
    129 }
    130 .chatbox .incoming p {
    131   border-radius: 10px 10px 10px 0;
    132 }
    133 .chatbox .chat p.error {
    134   color: #721c24;
    135   background: #f8d7da;
    136 }
    137 .chatbox .incoming p {
    138   color: #000;
    139   background: #f2f2f2;
    140 }
    141 .chatbot .chat-input {
    142   display: flex;
    143   gap: 5px;
    144   position: absolute;
    145   bottom: 0;
    146   width: 100%;
    147   background: #fff;
    148   padding: 3px 20px;
    149   border-top: 1px solid #ddd;
    150 }
    151 .chat-input textarea {
    152   height: 55px;
    153   width: 100%;
    154   border: none;
    155   outline: none;
    156   resize: none;
    157   max-height: 180px;
    158   min-height: 0px;
    159   padding: 15px 15px 15px 0;
    160   font-size: 0.95rem;
    161 }
    162 .chat-input span {
    163   align-self: flex-end;
    164   color: var(--main-color);
    165   cursor: pointer;
    166   height: 55px;
    167   display: flex;
    168   align-items: center;
    169   visibility: hidden;
    170   font-size: 1.35rem;
    171 }
    172 .chat-input textarea:valid ~ span {
    173   visibility: visible;
    174 }
    175 
    176 @media (max-width: 490px) {
    177   .chatbot-toggler {
    178     right: 20px;
    179     bottom: 20px;
    180   }
    181   .chatbot {
    182     right: 0;
    183     bottom: 0;
     95    border-radius: 30px;
     96    border: 3px solid #fff;
     97    background-color: var(--main-color);
     98    height: 600px;
     99    max-height: calc(100vh - 110px);
     100    width: 380px;
     101    max-width: calc(100vw - 20px);
     102    display: flex;
     103    flex-direction: column;
     104    padding: 6px;
     105    z-index: 11111;
     106}
     107.chatbot .chatbot-header {
     108    padding: 12px 24px;
     109    display: flex;
     110    align-items: center;
     111    justify-content: space-between;
     112}
     113.chatbot .chatbot-header .profile {
     114    display: flex;
     115    flex-direction: row;
     116}
     117.chatbot .chatbot-header .img {
     118    background-image: var(--profile-image-url);
     119    background-size: contain;         
     120    background-repeat: no-repeat;     
     121    background-position: center center;
     122    width: 35px;
     123}
     124.chatbot .chatbot-header .profile h5 {
     125    font-weight: 500;
     126    font-size: 22px;
     127    letter-spacing: -0.01em;
     128    color: var(--title-color);
     129    margin: 0;
     130}
     131.chatbot .chatbot-header .profile p {
     132    font-weight: 400;
     133    font-size: 12px;
     134    letter-spacing: -0.01em;
     135    color: rgba(255, 255, 255, 0.73);
     136    margin: 0;
     137}
     138
     139.chatbot .chatbot-header .profile .text {
     140    display: flex;
     141    flex-direction: column;
     142    justify-content: center;
     143    padding-left: 12px;
     144}
     145.chatbot .chatbot-header .chatbot-close-btn {
     146    width: 30px;
     147    height: 30px;
     148    border: 0;
     149    border-radius: 50%;
     150    background-color: var(--main-color);
     151    display: flex;
     152    align-items: center;
     153    justify-content: center;
     154    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.1);
     155    cursor: pointer;
     156}
     157.chatbot .chatbot-header .chatbot-close-btn span {
     158    width: 15px;
     159    height: 2px;
     160    border-radius: 2px;
     161    display: block;
     162    background-color: #fff;
     163}
     164.chatbot .chatbot-content {
     165    flex: 1;
     166    background-color: var(--background-color);
     167    border-radius: 23px;
     168    padding: 0;
     169    overflow: hidden;
     170    display: flex;
     171    flex-direction: column;
     172    position: relative;
     173}
     174.chatbot .chatbot-start-screen {
     175    display: flex;
     176    flex-direction: column;
     177    align-items: center;
     178    justify-content: center;
     179    padding: 24px;
    184180    height: 100%;
    185     border-radius: 0;
     181    position: absolute;
     182    left: 0;
     183    top: 0;
     184    transform: translateX(110%);
     185    transition: transform 0.4s;
     186}
     187.chatbot .chatbot-start-screen.active {
     188    transform: translateX(0);
     189}
     190.chatbot .chatbot-chat-screen {
     191    position: absolute;
     192    left: 0;
     193    top: 0;
    186194    width: 100%;
    187     z-index: 10000; /* Ensure it remains on top */
    188   }
    189   .chatbot .chatbox {
    190     height: 90%;
    191     padding: 25px 15px 100px;
    192   }
    193   .chatbot .chat-input {
    194     padding: 5px 15px;
    195   }
    196   .chatbot header span {
     195    height: 100%;
     196    display: flex;
     197    flex-direction: column;
     198    transform: translateX(110%);
     199    transition: transform 0.4s;
     200}
     201.chatbot .chatbot-chat-screen.active {
     202    transform: translateX(0);
     203}
     204.chatbot .chatbot-profile {
     205    width: 120px;
     206    height: 120px;
     207    border-radius: 50%;
     208    background-color: var(--main-color);
     209    display: flex;
     210    align-items: center;
     211    justify-content: center;
     212}
     213.chatbot .chatbot-start-screen h4 {
     214    font-weight: 700;
     215    font-size: 24px;
     216    line-height: 120%;
     217    letter-spacing: -0.01em;
     218    text-align: center;
     219    color: #000;
     220    margin: 24px 0 10px 0;
     221}
     222.chatbot .chatbot-start-screen p {
     223    font-weight: 400;
     224    font-size: 12px;
     225    line-height: 137%;
     226    letter-spacing: -0.01em;
     227    text-align: center;
     228    color: #667085;
     229    margin: 0 0 12px 0;
     230}
     231.chatbot .chatbot-start-screen .start-chat-btn {
     232    border-radius: 50px;
     233    padding: 14px;
     234    width: 170px;
     235    height: 45px;
     236    background-color: var(--main-color);
     237    border: 0;
     238    display: flex;
     239    flex-direction: row;
     240    align-items: center;
     241    justify-content: center;
     242    font-weight: 500;
     243    font-size: 12px;
     244    line-height: 91%;
     245    letter-spacing: -0.01em;
     246    color: #fff;
     247    cursor: pointer;
     248}
     249.chatbot .chatbot-start-screen button img {
     250    margin-right: 12px;
     251}
     252
     253.chatbot .chatbot-content .messages {
     254    overflow: auto;
     255    padding: 20px 10px;
     256    flex: 1;
     257}
     258
     259.chatbot .chatbot-content .messages::-webkit-scrollbar {
     260    width: 5px;
     261    display: none;
     262}
     263
     264/* Track */
     265.chatbot .chatbot-content .messages::-webkit-scrollbar-track {
     266    box-shadow: inset 0 0 5px grey;
     267    border-radius: 10px;
     268}
     269
     270/* Handle */
     271.chatbot .chatbot-content .messages::-webkit-scrollbar-thumb {
     272    background: grey;
     273    border-radius: 10px;
     274}
     275
     276/* Handle on hover */
     277.chatbot .chatbot-content .messages::-webkit-scrollbar-thumb:hover {
     278    background: #b30000;
     279}
     280.chatbot .chatbot-message {
     281    display: flex;
     282    justify-content: flex-start;
     283    margin-bottom: 6px;
     284}
     285.chatbot .chatbot-message .profile {
     286    background-color: var(--main-color);
     287    background-image: var(--profile-image-url);
     288    background-size: 25px;         
     289    background-repeat: no-repeat;     
     290    background-position: center center;
     291    width: 36px;
     292    height: 36px;
     293    border-radius: 50%;
     294    display: flex;
     295    align-items: center;
     296    justify-content: center;
     297    overflow: hidden;
     298}
     299.chatbot .chatbot-message ul {
     300    flex: 1;
     301    padding: 0;
     302    margin: 0;
     303    list-style: none;
     304    padding-left: 5px;
     305    max-width: 70%;
     306    display: flex;
     307    flex-direction: column;
     308}
     309.chatbot .chatbot-message ul li {
     310    background-color: rgba(244, 243, 244, 0.61);
     311    margin-bottom: 5px;
     312    font-weight: 400;
     313    font-size: 14px;
     314    line-height: 1.4;
     315    letter-spacing: -0.01em;
     316    color: #000;
     317    width: fit-content;
     318    min-height: 35px;
     319    padding: 10px 18px 10px 10px;
     320    border-radius: 0 12px 12px 0;
     321    max-width: 100%;
     322    word-wrap: break-word;
     323}
     324.chatbot .chatbot-message ul li .bold {
     325    font-weight: bold;
     326}
     327.chatbot .chatbot-message ul li .italic {
     328    font-weight: normal;
     329    font-style: italic;
     330}
     331.chatbot .chatbot-message ul li:nth-of-type(1) {
     332    border-top-left-radius: 12px;
     333    border-bottom-left-radius: 0 !important;
     334}
     335.chatbot .chatbot-message ul li:nth-last-of-type(1) {
     336    border-bottom-left-radius: 12px;
     337}
     338.chatbot .chatbot-message .link {
     339    background: rgba(7, 184, 205, 0.08);
     340    font-weight: 400;
     341    font-size: 12px;
     342    letter-spacing: -0.01em;
     343    color: var(--main-color);
    197344    display: block;
    198   }
    199 }
     345    padding: 6px 14px;
     346    text-wrap: pretty;
     347    border-radius: 10px;
     348    word-wrap: break-word;
     349    text-align: left;
     350    margin: 10px 0;
     351    text-decoration: none;
     352}
     353.chatbot .chatbot-message ul li .link:nth-child(1) {
     354    margin-top: 0;
     355}
     356.chatbot .chatbot-message ul li .link:nth-last-child(1) {
     357    margin-bottom: 0;
     358}
     359.chatbot .chatbot-message .nav-links {
     360    display: flex;
     361    flex-wrap: wrap;
     362    gap: 10px;
     363}
     364.chatbot .chatbot-message .nav-link {
     365    background: transparent;
     366    border: 1px solid var(--main-color);
     367    font-weight: 400;
     368    font-size: 12px;
     369    color: var(--main-color);
     370    padding: 0px 15px;
     371    text-wrap: pretty;
     372    border-radius: 15px;
     373    word-wrap: break-word;
     374    text-align: left;
     375    margin: 0;
     376    height: 30px;
     377    display: inline-flex;
     378    align-items: center;
     379    justify-content: center;
     380    gap: 10px;
     381    text-decoration: none;
     382    transition: background-color 0.4s, color 0.4s;
     383    width: fit-content;
     384}
     385.chatbot .chatbot-message .nav-link:hover {
     386    background-color: var(--main-color);
     387    color: #fff;
     388}
     389.chatbot .chatbot-message ul li > .img {
     390    width: 100%;
     391    max-height: 125px;
     392    border-radius: 8px;
     393    overflow: hidden;
     394    /* object-fit: cover; */
     395}
     396.chatbot .chatbot-message ul li > .img > img {
     397    object-fit: cover;
     398    object-position: center;
     399    width: 100%;
     400    height: 100%;
     401}
     402.chatbot .user-message {
     403    display: flex;
     404    justify-content: end;
     405    margin-bottom: 6px;
     406}
     407.chatbot .user-message .profile {
     408    background-color: #f5f8ff;
     409    background-image: var(--lorybot-user-profile);
     410    background-size: 25px;         
     411    background-repeat: no-repeat;     
     412    background-position: center center;
     413    width: 35px;
     414    width: 36px;
     415    height: 36px;
     416    border-radius: 50%;
     417    display: flex;
     418    align-items: end;
     419    justify-content: center;
     420    overflow: hidden;
     421}
     422.chatbot .user-message ul {
     423    flex: 1;
     424    padding: 0;
     425    margin: 0;
     426    list-style: none;
     427    padding-right: 6px;
     428    max-width: 70%;
     429    display: flex;
     430    flex-direction: column;
     431    justify-content: flex-end;
     432    align-items: end;
     433}
     434.chatbot .user-message ul li {
     435    background-color: var(--main-color);
     436    margin-bottom: 5px;
     437    font-weight: 400;
     438    font-size: 13px;
     439    line-height: 1.4;
     440    letter-spacing: -0.01em;
     441    color: #fff;
     442    width: fit-content;
     443    min-height: 35px;
     444    padding: 10px 10px 10px 18px;
     445    border-radius: 12px 0 0 12px;
     446}
     447.chatbot .user-message ul li:nth-of-type(1) {
     448    border-top-right-radius: 12px;
     449    border-bottom-right-radius: 0 !important;
     450}
     451.chatbot .user-message ul li:nth-last-of-type(1) {
     452    border-bottom-right-radius: 12px;
     453}
     454.chatbot-radio-inputs {
     455    display: flex;
     456    gap: 8px;
     457    flex-wrap: wrap;
     458    margin-top: 8px;
     459}
     460.chatbot-radio-inputs .chatbot-radio {
     461    display: inline-block;
     462}
     463.chatbot-radio-inputs .chatbot-radio input {
     464    display: none;
     465}
     466.chatbot-radio-inputs .chatbot-radio label {
     467    background-color: #eee;
     468    display: inline-flex;
     469    align-items: center;
     470    height: 24px;
     471    padding: 0 14px 0 4px;
     472    border-radius: 31px;
     473    font-weight: 400;
     474    font-size: 10px;
     475    line-height: 1;
     476    color: #afafaf;
     477    cursor: pointer;
     478    border: 1px solid transparent;
     479    transition: background-color 0.4s, color 0.4s, border-color 0.4s;
     480}
     481.chatbot-radio-inputs .chatbot-radio input:checked + label {
     482    border-color: #000;
     483    color: #000;
     484    background-color: transparent;
     485}
     486
     487.chatbot-radio-inputs .chatbot-radio label::before {
     488    content: "";
     489    width: 16px;
     490    height: 16px;
     491    border-radius: 50%;
     492    display: inline-block;
     493    background-color: #afafaf;
     494    margin-right: 5px;
     495    transition: background-color 0.4s;
     496}
     497.chatbot-radio-inputs .chatbot-radio input:checked + label::before {
     498    background-color: #000;
     499}
     500.chatbot-write-message {
     501    display: flex;
     502    flex-direction: row;
     503    padding: 0px 10px 10px 10px;
     504    gap: 10px;
     505}
     506.chatbot-write-message .textbox {
     507    flex: 1;
     508    border: 1px solid rgba(151, 151, 151, 0.24);
     509    border-radius: 82px;
     510    height: 40px;
     511    display: flex;
     512    flex-direction: row;
     513}
     514.chatbot-write-message .textbox input {
     515    flex: 1;
     516    border: 0;
     517    background: transparent;
     518    padding: 15px;
     519    outline: none;
     520    width: 100%;
     521    height: auto;
     522    font-size: 14px;
     523    font-weight: 400;
     524    color: #000;
     525    font-family: "Poppins", sans-serif;
     526    font-style: normal;
     527    margin: 0;
     528    max-width: 100%;  /* Ensure the input does not overflow the screen width */
     529}
     530.chatbot-write-message .textbox input:focus{
     531    font-size: 14px;
     532    font-weight: 400;
     533    color: #000;
     534    font-family: "Poppins", sans-serif;
     535    font-style: normal;
     536    transform: scale(1);
     537    margin-top: 0;
     538    height: auto;
     539}
     540
     541
     542.chatbot-write-message .textbox .send-voice-btn {
     543    border: 0;
     544    background: transparent;
     545    display: flex;
     546    align-items: center;
     547    justify-content: center;
     548}
     549.chatbot-write-message .send-message-btn {
     550    width: 40px;
     551    max-width: 40px;
     552    min-width: 40px;
     553    height: 40px;
     554    border-radius: 50%;
     555    border: 1px solid var(--main-color);
     556    background-color: var(--main-color);
     557    background-image: var(--send-icon-url);
     558    background-size: 20px;         
     559    background-repeat: no-repeat;     
     560    background-position: center center;
     561    display: flex;
     562    align-items: center;
     563    justify-content: center;
     564    cursor: pointer;
     565}
     566
     567.chatbot-loader {
     568    width: 50px;
     569}
     570.chatbot-loader > div {
     571    position: relative;
     572    left: -9999px;
     573    width: 10px;
     574    height: 10px;
     575    border-radius: 5px;
     576    background-color: #d9d9d9;
     577    color: #d9d9d9;
     578    box-shadow: 9999px 0 0 -5px;
     579    animation: dot-pulse 1.5s infinite linear;
     580    animation-delay: 0.25s;
     581    transform: translate(20px, 4px);
     582}
     583.chatbot-loader > div::before,
     584.chatbot-loader > div::after {
     585    content: "";
     586    display: inline-block;
     587    position: absolute;
     588    top: 0;
     589    width: 10px;
     590    height: 10px;
     591    border-radius: 5px;
     592    background-color: #d9d9d9;
     593    color: #d9d9d9;
     594}
     595.chatbot-loader > div::before {
     596    box-shadow: 9984px 0 0 -5px;
     597    animation: dot-pulse-before 1.5s infinite linear;
     598    animation-delay: 0s;
     599}
     600.chatbot-loader > div::after {
     601    box-shadow: 10014px 0 0 -5px;
     602    animation: dot-pulse-after 1.5s infinite linear;
     603    animation-delay: 0.5s;
     604}
     605
     606@keyframes dot-pulse-before {
     607    0% {
     608        box-shadow: 9984px 0 0 -5px;
     609    }
     610    30% {
     611        box-shadow: 9984px 0 0 2px;
     612    }
     613    60%,
     614    100% {
     615        box-shadow: 9984px 0 0 -5px;
     616    }
     617}
     618@keyframes dot-pulse {
     619    0% {
     620        box-shadow: 9999px 0 0 -5px;
     621    }
     622    30% {
     623        box-shadow: 9999px 0 0 2px;
     624    }
     625    60%,
     626    100% {
     627        box-shadow: 9999px 0 0 -5px;
     628    }
     629}
     630@keyframes dot-pulse-after {
     631    0% {
     632        box-shadow: 10014px 0 0 -5px;
     633    }
     634    30% {
     635        box-shadow: 10014px 0 0 2px;
     636    }
     637    60%,
     638    100% {
     639        box-shadow: 10014px 0 0 -5px;
     640    }
     641}
     642
     643@media screen and (max-width: 767px) {
     644    .chatbot-toggler {
     645        width: 40px;
     646        height: 40px;
     647        bottom: 10px;
     648        right: 10px;
     649    }
     650    .chatbot-toggler img {
     651        width: 25px;
     652    }
     653    .chatbot {
     654        height: 500px;
     655        width: 300px;
     656        border-width: 0;
     657        max-height: calc(100vh - 60px);
     658    }
     659    #chatbot-container {
     660        bottom: 60px;
     661        right: 10px;
     662    }
     663    .chatbot .chatbot-header {
     664        padding: 7px 15px;
     665    }
     666}
     667
     668@media screen and (max-width: 576px) {
     669    .chatbot {
     670        width: calc(100% - 20px);
     671        border-width: 0;
     672        height: calc(100vh - 75px);
     673    }
     674    #chatbot-container {
     675        right: 0;
     676        bottom: 0;
     677        width: 100%;
     678        max-width: 100%;
     679        height: 100%;
     680        max-height: 100%;
     681        border-radius: 0;
     682    }
     683}

  • lorybot-ai-chatbot/trunk/assets/js/script.js

    r3048493 r3078146  
    11document.addEventListener("DOMContentLoaded", function() {
     2
     3
     4   
     5    const metaViewport = document.querySelector('meta[name="viewport"]');
     6    metaViewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');
     7   
     8
     9
     10    function initializeChatbot() {
     11        const rootStyle = document.documentElement.style;
     12        rootStyle.setProperty('--main-color', chatbot_vars.main_color);
     13        rootStyle.setProperty('--background-color', chatbot_vars.background_color);
     14        rootStyle.setProperty('--title-color', chatbot_vars.title_color);
     15   
     16        const profileImageUrl = chatbot_vars.plugin_url + 'assets/images/chatbot-profile.svg'; // Construct full URL
     17        const userprofileImageUrl = chatbot_vars.plugin_url + 'assets/images/user-profile.svg'; // Construct full URL
     18        const sendIconUrl = chatbot_vars.plugin_url + 'assets/images/send-message.svg'; // Construct full URL
     19
     20        const chatbotIconUrl1 = chatbot_vars.plugin_url + 'assets/images/lorybot-chat-white.svg'; // Construct full URL
     21        const chatbotIconUrl2 = chatbot_vars.plugin_url + 'assets/images/lorybot-chat-black.svg'; // Construct full URL
     22
     23        rootStyle.setProperty('--lorybot-user-profile', `url('${userprofileImageUrl}')`); // Set the full URL wrapped in url(
     24        rootStyle.setProperty('--lorybot-chat-white', `url('${chatbotIconUrl1}')`); // Set the full URL wrapped in url()
     25        rootStyle.setProperty('--lorybot-chat-black', `url('${chatbotIconUrl2}')`); // Set the full URL wrapped in url()
     26        rootStyle.setProperty('--send-icon-url', `url('${sendIconUrl}')`); // Set the full URL wrapped in url()
     27        rootStyle.setProperty('--profile-image-url', `url('${profileImageUrl}')`); // Set the full URL wrapped in url()
     28    }
    229
    330    // Function to set the user_id cookie for 1 day
    … …  
    1744        if (parts.length === 2) return parts.pop().split(';').shift();
    1845    }
     46
    1947    // Function to generate a unique user ID (UUID)
    2048    function generateUserId() {
    … …  
    2654    // Set the user_id cookie if not already set
    2755    setUserIdCookie();
    28 
     56    initializeChatbot();
     57   
     58
     59    // Function to send a warmup request to the server
    2960    function sendWarmupRequest() {
    3061        const userId = getCookie('user_id');
    3162        if (userId) {
    3263            const customId = chatbot_vars.custom_id; // Ensure chatbot_vars.custom_id is defined
    33             const serverURL = chatbot_vars.server_url; // Ensure serverURL is defined
    34             const url = serverURL + "warmup/";
    35             const data = { custom_id: customId };
     64            const serverURL = chatbot_vars.server_url; // Ensure serverURL is defined without a trailing slash if it causes redirect
     65            const url = serverURL + "warmup"; // Removed the trailing slash here
     66            const data = { custom_id: customId, user_id: userId }; // Added user_id if it's needed like in generateResponse
    3667   
    3768            fetch(url, {
    … …  
    3970                headers: {
    4071                    'Content-Type': 'application/json',
    41                     'LORYBOT-API-KEY': customId // Adding custom_id to the request headers
     72                    'LORYBOT-API-KEY': customId // Adjust according to your API's expected header for authentication
    4273                },
    4374                body: JSON.stringify(data),
    4475            })
    45             .then(response => response.json())
     76            .then(response => {
     77                if (!response.ok) {
     78                    throw new Error('Network response was not ok');
     79                }
     80                return response.json();
     81            })
    4682            .then(data => {
    4783                console.log('Warmup request successful:', data);
    4884                return data; // Make sure to return data or some response
     85            })
     86            .catch(error => {
     87                console.error('Error during fetch:', error);
    4988            });
    5089        }
    5190    }
    52 
    53 
    54     function initializeChatbot() {
     91   
     92
     93
     94    var chatLoadingStatus = false;
     95    var isBold = false;
     96    var isItalic = false;
     97    var messageDiv;
     98    var autoScroll = true;
     99
     100    const $testMessage = jQuery("#sseMessages");
     101    const originalMessage = jQuery("#original_message");
     102    var urls = {};
     103
     104    jQuery(".chatbot-toggler").on("touchstart click", () => {
     105        sendWarmupRequest();
     106        jQuery("#chatbot-container").toggleClass("active");
     107    });
     108
     109    jQuery(".chatbot-close-btn").on("touchstart click", () => {
     110        jQuery("#chatbot-container").removeClass("active");
     111    });
     112 
     113 
     114    document.getElementById("chatbot-message-form-button").addEventListener("click", function (e) {
     115        e.preventDefault();
     116        sendMessage();
     117    });
     118
     119    document.getElementById("message").addEventListener("keydown", function (e) {
     120        if (e.key === "Enter") {
     121            e.preventDefault();
     122            sendMessage();
     123        }
     124    });
     125
     126    function sendMessage() {
     127    // Get the message from the input element
     128    const userMessage = document.getElementById("message").value;
     129
     130    // Check if the chat is not currently loading and the message is not empty
     131    if (!chatLoadingStatus && userMessage) {
     132        // Retrieve user ID from the cookie
    55133        const userId = getCookie('user_id');
    56         if (userId) {
    57             const rootStyle = document.documentElement.style;
    58             rootStyle.setProperty('--main-color', chatbot_vars.main_color);
    59             rootStyle.setProperty('--background-color', chatbot_vars.background_color);
    60             rootStyle.setProperty('--title-color', chatbot_vars.title_color);
    61 
    62             const chatbotToggler = document.querySelector(".chatbot-toggler");
    63             const closeBtn = document.querySelector(".close-btn");
    64             const chatbox = document.querySelector(".chatbox");
    65             const chatInput = document.querySelector(".chat-input textarea");
    66             const sendChatBtn = document.querySelector(".chat-input span");
    67             const inputInitHeight = chatInput.scrollHeight;
    68 
    69             const createChatLi = (message, className, isBot = false) => {
    70                 const chatLi = document.createElement("li");
    71                 chatLi.className = `chat ${className}`;
    72                 chatLi.innerHTML = isBot ? `<span class="material-symbols-outlined">smart_toy</span><p>${message}</p>` : `<p>${message}</p>`;
    73                 return chatLi;
    74             };
    75 
    76             const appendMessageToChatbox = (message, className, isBot = false) => {
    77                 let chatLi;
    78                 let messageP;
    79            
    80                 // Check if the last message in the chatbox is from the server
    81                 if (isBot && chatbox.lastChild && chatbox.lastChild.classList.contains('incoming')) {
    82                     chatLi = chatbox.lastChild;
    83                     messageP = chatLi.querySelector("p");
    84                    
    85                     // Check if the current content is "Thinking..." and replace it, otherwise append
    86                     if (messageP.innerHTML === "Thinking...") {
    87                         messageP.innerHTML = message;
    88                     } else {
    89                         messageP.innerHTML += message;
    90                     }
    91                 } else {
    92                     chatLi = createChatLi(message, className, isBot);
    93                     chatbox.appendChild(chatLi);
     134
     135        // Construct the chat message HTML using template literals for better readability
     136        const newChat = `
     137            <div class="user-message">
     138                <ul>
     139                    <li>
     140                        <span>${userMessage}</span>
     141                    </li>
     142                </ul>
     143                <div class="profile"></div>
     144            </div>`;
     145
     146        // Append the new chat message to the messages container
     147        jQuery(".chatbot-chat-screen .messages").append(newChat);
     148
     149        // Trigger auto-scrolling
     150        autoScroll = true;
     151
     152        // Generate a response based on the user's message and user ID
     153        generateResponse(userMessage, userId);
     154
     155        // Clear the input element after sending the message
     156        document.getElementById("message").value = "";
     157
     158        // Scroll the chat box to the latest message
     159        scrollChatBox();
     160    }
     161}
     162
     163       
     164   
     165    custom_id = chatbot_vars.custom_id;
     166    server_url = chatbot_vars.server_url;
     167   
     168    function generateResponse(userMessage, userId) {
     169        const customId = chatbot_vars.custom_id;
     170        const encodedMessage = encodeURIComponent(userMessage);
     171        const serverURL = chatbot_vars.server_url;
     172        // Construct the URL with query parameters, including the API key as necessary
     173        const url = `${serverURL}chat?custom_id=${customId}&message=${encodedMessage}&user_id=${userId}`;
     174
     175        // Create and open a new EventSource connection
     176        const eventSource = new EventSource(url);
     177
     178        var newChat =
     179        '<div class="chatbot-message"> <div class="profile"></div><ul><li><span><div class="chatbot-loader"><div></div></div></span></li></ul> </div> ';
     180        jQuery(".chatbot-chat-screen .messages").append(newChat);
     181        chatLoadingStatus = true;
     182        urls = {};
     183        $testMessage.html("");
     184
     185        eventSource.onmessage = function (event) {
     186            try {
     187            // Attempt to parse the event data as JSON
     188            const data = JSON.parse(event.data);
     189
     190            // If parsing is successful, handle the JSON data (assuming 'message' field exists)
     191            processMessage(event, "incoming", true);
     192            } catch (error) {
     193            // If the data isn't valid JSON, assume it's plain text and handle directly
     194            processMessage(event, "incoming", true);
     195            }
     196        // Consideration for closing the eventSource should be here, based on the data or a specific condition
     197        };
     198
     199        eventSource.onerror = function (error) {
     200            // Handle any errors
     201            printOutputReal();
     202            printOutputReal();
     203            printOutputReal();
     204            chatLoadingStatus = false;
     205            // console.error("SSE error:", error);
     206            eventSource.close();
     207        };
     208    }
     209 
     210    function processMessage(event, type, shouldScroll) {
     211        var message = event.data;
     212        originalMessage.append(message);
     213
     214        message = message.replace(/</g, "&lt;"); // replace < sign with lt because it fades away in DOM
     215        message = message.replace(/&lt;br\s*\/?>/gi, " nEwBoX "); // check for <br> and replace with newbox
     216        messageDiv = jQuery(".chatbot-chat-screen .messages .chatbot-message")
     217        .last()
     218        .find("ul li")
     219        .last()
     220        .find("span")
     221        .last();
     222
     223        $testMessage.append(message); // first message comes here
     224        $testMessage.html(
     225            $testMessage
     226            .html()
     227            .replace(/(?<!nEwBoX\s*)\bnEwBoX\b(?!.*\bnEwBoX\b)/g, "NeWlInE")
     228        ); // check for single appearance of <br> and replace it with newline
     229        checkForURLs();
     230
     231        if (($testMessage.text().match(/ /g) || [].length).length > 3) {
     232            printOutputReal(); // message gets printed on actual place
     233        }
     234    }
     235 
     236    function checkForURLs() {
     237        // find urls in test message and mark there starting and ending locations
     238        const text = $testMessage.text();
     239        const regex =
     240        /(https?:\/\/(?!.*eNdOfUrLeNdOfUrL)\S+)|(www\.(?!.*eNdOfUrLeNdOfUrL)\S+)/gi;
     241
     242        let match;
     243        while ((match = regex.exec(text))) {
     244            const url = match[0];
     245            if (!(url in urls) && isValidURL(url)) {
     246                urls[url] = true;
     247                insertLineBreakAroundURL(url);
     248            }
     249        }
     250    }
     251 
     252    // print message in actual position
     253    function printOutputReal() {
     254        jQuery(".chatbot-chat-screen .messages .chatbot-message .chatbot-loader").remove(); // remove loader
     255
     256        var sourceText = $testMessage.text();
     257        var index = sourceText.indexOf(" ");
     258
     259        // these two if replaces word with sourcetext if there is only one word left in test message
     260        if (index == 0) {
     261            var index = sourceText.indexOf(" ", 1);
     262        }
     263        var word = sourceText.slice(0, index);
     264
     265        if (index <= 0) {
     266            var word = sourceText;
     267        }
     268
     269        // print url based on marekd positions
     270        if (word.includes("sTaRtOfUrL") && word.includes("eNdOfUrL")) {
     271            // restyle the url now
     272            var startIndex = word.indexOf("sTaRtOfUrL") + "sTaRtOfUrL".length;
     273            var endIndex = word.indexOf("eNdOfUrL");
     274            word = word.slice(startIndex, endIndex);
     275
     276            var punctuation = [".", ")", "]", "'", '"', "!"];
     277
     278            while (punctuation.includes(word.slice(-1))) {
     279                word = word.slice(0, -1);
     280            }
     281
     282            jQuery(".chatbot-chat-screen .messages .chatbot-message")
     283            .last()
     284            .find("ul")
     285            .last()
     286            .find("li")
     287            .last()
     288            .append("<a class='link'></a>");
     289
     290            messageDiv = jQuery(".chatbot-chat-screen .messages .chatbot-message")
     291            .last()
     292            .find("ul li")
     293            .last()
     294            .find("a")
     295            .last();
     296
     297            // if url has ](  in between then we split into two, frst half is the text and second half is actual link
     298            if (word.includes("](")) {
     299                var splitText = word.split("](");
     300                var aa = splitText[0];
     301                var bb = splitText[1];
     302                messageDiv.append(aa);
     303                messageDiv.attr("href", bb);
     304            } else {
     305                messageDiv.append(word);
     306                messageDiv.attr("href", word);
     307            }
     308            jQuery(".chatbot-chat-screen .messages .chatbot-message")
     309            .last()
     310            .find("ul")
     311            .last()
     312            .find("li")
     313            .last()
     314            .append("<span></span>");
     315
     316            messageDiv = jQuery(".chatbot-chat-screen .messages .chatbot-message")
     317            .last()
     318            .find("ul li")
     319            .last()
     320            .find("span")
     321            .last();
     322        }
     323        else {
     324            // check for bold
     325            if (word.includes("**") && !isBold) {
     326                word = word.replace(/\*\*/, "");
     327                isBold = true;
     328            } else if (word.includes("**") && isBold) {
     329                word = word.replace(/\*\*/g, "");
     330                word = "<b class='bold'>" + word + "</b>";
     331                isBold = false;
     332            }
     333            if (isBold) {
     334                if (word.includes("**")) {
     335                    word = word.replace(/\*\*/g, "");
     336                    isBold = false;
    94337                }
    95            
    96                 chatbox.scrollTo(0, chatbox.scrollHeight);
    97             };
    98 
    99            
    100             const handleErrorResponse = (chatElement) => {
    101                 if (chatElement) {
    102                     const messageElement = chatElement.querySelector(".error-message"); // Ensure this selector matches an element in your chatbox
    103                     if (messageElement) {
    104                         messageElement.classList.add("error");
    105                         messageElement.innerHTML = "Oooops! Something went wrong. Please try again.";
     338                word = "<b class='bold'>" + word + "</b>";
     339            }
     340
     341            // check for italic
     342            if (word.includes("*") && !isItalic) {
     343                word = word.replace(/\*/, "");
     344                isItalic = true;
     345            } else if (word.includes("*") && isItalic) {
     346                word = word.replace(/\*/g, "");
     347                word = "<b class='italic'>" + word + "</b>";
     348                isItalic = false;
     349            }
     350            if (isItalic) {
     351                if (word.includes("*")) {
     352                    word = word.replace(/\*/g, "");
     353                    isItalic = false;
     354                }
     355                word = "<b class='italic'>" + word + "</b>";
     356            }
     357
     358            // check for linebreaks for new box
     359            if (word.includes("nEwBoX")) {
     360                if (messageDiv.html()) {
     361                    if (messageDiv.html().trim() !== "") {
     362                        word = word + "<br />";
    106363                    }
    107364                }
    108             };
    109 
    110 
    111            
    112 
    113 
    114             const generateResponse = (userMessage, userId) => {
    115                 const customId = chatbot_vars.custom_id;
    116                 const encodedMessage = encodeURIComponent(userMessage);
    117                 const serverURL = chatbot_vars.server_url;
    118                 const url = `${serverURL}chat?custom_id=${customId}&message=${encodedMessage}&user_id=${userId}`;
     365
     366                word = word.replace(/nEwBoX/g, "");
     367            }
    119368           
    120                 const eventSource = new EventSource(url);
    121                
    122                 eventSource.onmessage = function(event) {
    123                     const htmlContent = processChunk(event.data);
    124                     appendMessageToChatbox(htmlContent, "incoming", true);
    125                     htmlBuffer = ''; // Clear the buffer after appending to the chatbox
    126                 };
    127                
    128            
    129                 eventSource.onerror = function(error) {
    130                     eventSource.close();
    131                     handleErrorResponse(chatbox);
    132                 };
    133             };
    134            
    135            
    136             let htmlBuffer = '';
    137             let markdownBuffer = '';
    138             let isBold = false;
    139             let isLinkText = false;
    140             let isLinkUrl = false;
    141             let linkText = '';
    142             let linkUrl = '';
    143 
    144             function processChunk(chunk) {
    145                 for (let i = 0; i < chunk.length; i++) {
    146                     const char = chunk[i];
    147                     markdownBuffer += char;
    148 
    149                     // Check for bold markdown syntax '**'
    150                     if (markdownBuffer.endsWith('**')) {
    151                         if (isBold) {
    152                             // Closing bold tag
    153                             htmlBuffer += '<strong>' + markdownBuffer.slice(0, -2) + '</strong>';
    154                             markdownBuffer = '';
    155                             isBold = false;
    156                         } else {
    157                             // Opening bold tag
    158                             htmlBuffer += markdownBuffer.slice(0, -2);
    159                             markdownBuffer = '';
    160                             isBold = true;
    161                         }
    162                     }
    163 
    164                     // Handle start of link text
    165                     if (char === '[') {
    166                         isLinkText = true;
    167                         markdownBuffer = '';
    168                     }
    169 
    170                     // Handle end of link text and start of URL
    171                     if (markdownBuffer.endsWith('](')) {
    172                         isLinkText = false;
    173                         isLinkUrl = true;
    174                         linkText = markdownBuffer.slice(0, -2);
    175                         markdownBuffer = '';
    176                     }
    177 
    178                     // Handle end of URL
    179                     if (char === ')' && isLinkUrl) {
    180                         isLinkUrl = false;
    181                         linkUrl = markdownBuffer.slice(0, -1);
    182                         // Add 'http://' if no protocol specified
    183                         if (!linkUrl.match(/^https?:\/\//)) {
    184                             linkUrl = 'http://' + linkUrl;
    185                         }
    186                         htmlBuffer += ` <a href="${linkUrl}">${linkText}</a>`;
    187                         markdownBuffer = '';
    188                         linkText = '';
    189                         linkUrl = '';
     369            // check for linbreaks for single line
     370            if (word.includes("NeWlInE")) {
     371                if (messageDiv.html()) {
     372                    if (messageDiv.html().trim() !== "") {
     373                        word = word.replace(/NeWlInE/g, "<br />");
     374                    } else {
     375                        word = word.replace(/NeWlInE/g, "");
    190376                    }
    191377                }
    192 
    193                 if (!isBold && !isLinkText && !isLinkUrl) {
    194                     htmlBuffer += markdownBuffer;
    195                     markdownBuffer = '';
    196                 }
    197 
    198                 return htmlBuffer;
    199             }
    200            
    201             const handleChat = () => {
    202                 const userMessage = chatInput.value.trim();
    203                 if (!userMessage) return;
    204                 const userId = getCookie('user_id');
    205                 chatInput.value = "";
    206                 chatInput.style.height = `${inputInitHeight}px`;
    207            
    208                 appendMessageToChatbox(userMessage, "outgoing");
    209            
    210                 setTimeout(() => appendMessageToChatbox("Thinking...", "incoming", true), 600);
    211                 setTimeout(() => generateResponse(userMessage, userId), 1200); // Corrected this line
    212             };
    213 
    214             const adjustTextareaHeight = () => {
    215                 chatInput.style.height = `${inputInitHeight}px`;
    216                 chatInput.style.height = `${chatInput.scrollHeight}px`;
    217             };
    218 
    219             chatInput.addEventListener("input", adjustTextareaHeight);
    220 
    221             chatInput.addEventListener("keydown", (e) => {
    222                 if (e.key === "Enter" && !e.shiftKey) {
    223                     e.preventDefault();
    224                     handleChat();
    225                 } else if (e.key === "Enter" && e.shiftKey) {
    226                     // Allow Shift+Enter to insert a newline in the textarea
    227                 }
    228             });
    229 
    230             sendChatBtn.addEventListener("click", handleChat);
    231             closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
    232            
    233             chatbotToggler.addEventListener("click", () => {
    234                 console.log("Toggler clicked"); // For debugging
    235                 document.body.classList.toggle("show-chatbot");
    236                 sendWarmupRequest();
    237             });        } else {
    238             setTimeout(initializeChatbot, 100); // Retry after 100 milliseconds
    239         }
    240     }
    241 
    242     initializeChatbot();
     378            }
     379            messageDiv.append(word);
     380        }
     381
     382        scrollChatBox();
     383
     384        if (index >= 0) {
     385            $testMessage.html(sourceText.slice(index));
     386        } else {
     387            $testMessage.html("");
     388        }
     389    }
     390 
     391    function insertLineBreakAroundURL(url) {
     392        var html = $testMessage.html();
     393
     394        var startIndex = html.indexOf(url);
     395        var endIndex = html.indexOf(url) + url.length;
     396        url = url.replace(/eNdOfUrL/g, "");
     397
     398        var newText =
     399        html.slice(0, startIndex) +
     400        "sTaRtOfUrL" +
     401        url +
     402        "eNdOfUrL" +
     403        html.slice(endIndex);
     404        newText = newText.replace(/(sTaRtOfUrL)+/g, "sTaRtOfUrL");
     405        $testMessage.html(newText);
     406    }
     407 
     408    function isValidURL(url) {
     409        // Define valid characters for URL
     410        const validCharacters = /^[a-zA-Z0-9\-._~:/?#\[\]@!$&'()*+,;=%]*$/;
     411        // Check if the URL ends with a valid character
     412        return validCharacters.test(url[url.length - 1]);
     413    }
     414 
     415    // scroll to the bottom
     416    function scrollChatBox() {
     417        if (autoScroll) {
     418            var content = jQuery(".chatbot-chat-screen .messages");
     419            content.scrollTop(content.prop("scrollHeight"));
     420        }
     421    }
     422 
     423    jQuery(".chatbot .chatbot-content .messages").on("wheel", function (event) {
     424        handleScroll(jQuery(this));
     425    });
     426
     427    jQuery(".chatbot .chatbot-content .messages").on("touchmove", function (event) {
     428        handleScroll(jQuery(this));
     429    });
     430 
     431    function handleScroll(element) {
     432        if (element.scrollTop() < element.prop("scrollHeight") - element.height()) {
     433            autoScroll = false;
     434        }
     435        if (element.scrollTop() > element.prop("scrollHeight") - element.height() - 50) {
     436            autoScroll = true;
     437        }
     438    }
    243439});

  • lorybot-ai-chatbot/trunk/includes/functions-chat-display.php

    r3048493 r3078146  
    88
    99function lorybot_display() {
    10   $options = get_option('lorybot_options');
     10    $options = get_option('lorybot_options');
    1111
    12   if (isset($options['chat_enabled']) && $options['chat_enabled'] === 'on') {
    13       if (isset($options['chat_display']) && !empty($options['chat_display'])) {
     12    // Debugging output
     13    error_log('chat_display: ' . $options['chat_display']);
     14
     15    if (isset($options['chat_enabled']) && $options['chat_enabled'] === 'on') {
     16        if (isset($options['chat_display']) && !empty($options['chat_display'])) {
    1417            echo wp_kses_post($options['chat_display']); // Render HTML safely
    15       } else {
    16           // Get the absolute path to the chat-html.php file
    17           $chat_html_path = plugin_dir_path(__FILE__) . 'settings/chat-html.php';
     18        } else {
     19            // Get the absolute path to the chat-html.php file
     20            $chat_html_path = plugin_dir_path(__FILE__) . 'settings/chat-html.php';
    1821
    19           // Include the file using the absolute path
    20           include($chat_html_path);
    21       }
    22   }
     22            // Include the file using the absolute path
     23            include($chat_html_path);
     24        }
     25    }
    2326}
    2427
    2528add_action('wp_footer', 'lorybot_display');
     29
     30function lorybot_custom_kses_allowed_html($tags) {
     31    $tags['input'] = array(
     32        'type' => true,
     33        'id' => true,
     34        'name' => true,
     35        'value' => true,
     36        'class' => true,
     37        'style' => true
     38    );
     39
     40    return $tags;
     41}
     42
     43add_filter('wp_kses_allowed_html', 'lorybot_custom_kses_allowed_html');

  • lorybot-ai-chatbot/trunk/includes/functions-enqueue-scripts.php

    r3048493 r3078146  
    1212 */
    1313function lorybot_enqueue_frontend_scripts() {
    14     // Enqueue the chatbot's main stylesheet
    15     wp_enqueue_style('lorybot-style', plugin_dir_url(__FILE__) . '../assets/css/style.css');
    16 
     14   
    1715    // Enqueue Google Material Symbols fonts
    1816    wp_enqueue_style('material-symbols-outlined', 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');
    … …  
    2018
    2119    // Enqueue the chatbot's main JavaScript, making sure jQuery is loaded as a dependency
    22     wp_enqueue_script('lorybot-script', plugin_dir_url(__FILE__) . '../assets/js/script.js', ['jquery'], '1.1', true);
     20    wp_enqueue_script('lorybot-script', plugin_dir_url(__FILE__) . '../assets/js/script.js', ['jquery'], '1.3', true);
     21
     22    // Enqueue the chatbot's main stylesheet
     23    wp_enqueue_style('lorybot-style', plugin_dir_url(__FILE__) . '../assets/css/style.css');
    2324
    2425    // Localize the script with data from PHP

  • lorybot-ai-chatbot/trunk/includes/settings/callbacks.php

    r3048493 r3078146  
    138138    <div class="lorybot-field-wrap">
    139139        <textarea id="lorybot_chat_display_field" name="lorybot_options[chat_display]" class="lorybot-textarea chat-display"><?php echo esc_textarea($chat_display); ?></textarea>
    140         <span class="help-tip-text">...</span>
     140        <span class="help-tip-text">The html of the chatbot. You can customize the messages to be displayed.</span>
    141141    </div>
    142142    <?php

  • lorybot-ai-chatbot/trunk/includes/settings/chat-html.php

    r3048493 r3078146  
    11<button class="chatbot-toggler">
    2     <span class="material-symbols-rounded">mode_comment</span>
    3     <span class="material-symbols-outlined">close</span>
     2    <div class="chatbot-icon-second"></div>
    43</button>
    5 <div class="chatbot">
    6     <header>
    7         <h2>Chatbot</h2>
    8         <span class="close-btn material-symbols-outlined">close</span>
    9     </header>
    10     <ul class="chatbox">
    11         <li class="chat incoming">
    12             <span class="material-symbols-outlined">smart_toy</span>
    13             <p>Hi there 👋<br>How can I help you today?</p>
    14         </li>
    15     </ul>
    16     <div class="chat-input">
    17         <textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
    18         <span id="send-btn" class="material-symbols-rounded">send</span>
     4
     5<div class="chatbot" id="chatbot-container" style="transform: scale(0);">
     6    <div id="sseMessages" class="chatbot-sseMessages"></div>
     7    <div id="original_message" class="chatbot-original_message"></div>
     8    <div class="chatbot-header">
     9        <div class="profile">
     10            <div class="img"></div>
     11            <div class="text">
     12                <h5>LoryBot</h5>
     13                <p>Online</p>
     14            </div>
     15        </div>
     16        <button class="chatbot-close-btn">
     17            <span></span>
     18        </button>
    1919    </div>
    20 </div>
     20
     21    <div class="chatbot-content">
     22        <div class="chatbot-chat-screen active">
     23            <div class="messages">
     24                <div class="chatbot-message">
     25                    <div class="profile"></div>
     26                    <ul>
     27                    <li>
     28                        <span> Hi, How can I help you today?? 👋 </span>
     29                    </li>
     30                    </ul>
     31                </div>
     32            </div>
     33            <div id="chatbot-message-form" class="chatbot-write-message">
     34                <div class="textbox">
     35                    <input id="message" type="text">
     36                    <button class="send-voice-btn"></button>
     37                </div>
     38                <button type="submit" class="send-message-btn" id="chatbot-message-form-button"></button>
     39            </div>
     40        </div>
     41    </div>
     42</div> 

  • lorybot-ai-chatbot/trunk/lorybot.php

    r3048666 r3078146  
    44 * Plugin URI: https://www.lorybot.com
    55 * Description: Build better customer relationships and boost sales with LoryBot's AI chatbot. Using your unique business data, LoryBot provides personalized, helpful responses, creating meaningful conversations that keep visitors engaged. Optimize the return from your website traffic with tailored, individualized interactions powered by leading-edge AI technology.
    6  * Version: 1.2
     6 * Version: 1.3
    77 * Author: Danilo Vaccalluzzo
    88 * Author URI: https://www.linkedin.com/in/danilovaccalluzzo/
    … …  
    2424// Include necessary files
    2525require_once $plugin_dir . 'includes/utils.php';
     26require_once $plugin_dir . 'includes/lorybot_update.php';
    2627require_once $plugin_dir . 'includes/functions-settings.php';
    2728require_once $plugin_dir . 'includes/functions-enqueue-scripts.php';
    … …  
    2930require_once $plugin_dir . 'routes/activate.php';
    3031require_once $plugin_dir . 'routes/deactivate.php';
     32
     33
    3134
    3235register_activation_hook(__FILE__, 'Lorybot\Activate\lorybot_activate');

  • lorybot-ai-chatbot/trunk/readme.txt

    r3063992 r3078146  
    33Tags: AI Chatbot, Chatbot plugin, Customer support chat, Artificial Intelligence Chat, WP ChatBot, Conversational AI, Virtual assistant, Automated customer service, Chatbot analytics, Multilingual chatbot, AI-driven customer engagement, Natural Language Processing (NLP), Chatbot customization, Chatbot integration, AI customer support, AI-powered chat, Ecommerce chatbot, Chatbot for sales, Lead generation chatbot, Personalized chat experience, Chatbot templates, Rule-based chatbots, Chatbot builder, Chatbot for WordPress, AI chatbot for business, Chatbot user interface design, Chatbot performance metrics, AI chat support, Chatbot development tools, Chatbot conversation design
    44Tested up to: 6.4.2
    5 Stable tag: 1.2
     5Stable tag: 1.3
    66Requires PHP: 5.3
    77Requires at least: 4.9
    … …  
    5656
    57571. Main interface of LoryBot showing the chat window.
    58 2. Settings page where users can feed LoryBot with the information knowledge.
    59 3. Settings page where users can customize the style of LoryBot.
     582. Main interface of LoryBot showing the chat window.
     593. Main interface of LoryBot showing the chat window.
     604. Settings page where users can feed LoryBot with the information knowledge.
     615. Settings page where users can customize the style of LoryBot.
    6062
    6163Icon: icon-256x256.png
    … …  
    9092
    9193== Changelog ==
    92 = 1.2 - 03.10.2024 -
    93 - Fixed: Vulnerability fix
    94 - Fixed: some bug with sending multiple messages
    95 - Fixed: some bug with rendering messages from the server
    96 - Other bug fixes and Improvements
     94
     95= 1.3 - 28.04.2024 -
     96- New: Complete redesign of the user interface for improved usability and aesthetics.
     97- Improved: Enhanced script elements for faster and more reliable performance.
     98- Improved: Optimized AI responses for increased accuracy and personalization in user interactions.
     99- Other enhancements: General improvements to code efficiency and stability.
     100
     101= 1.2 - 10.03.2024 -
     102- Fixed: Vulnerability fix.
     103- Fixed: Issue with sending multiple messages in quick succession.
     104- Fixed: Problem with rendering messages from the server correctly.
     105- Other bug fixes and improvements.
Note: See TracChangeset for help on using the changeset viewer.