diff --git a/src/domains/send/contact.go b/src/domains/send/contact.go
index fdd275f..86292ba 100644
--- a/src/domains/send/contact.go
+++ b/src/domains/send/contact.go
@@ -4,7 +4,6 @@ type ContactRequest struct {
 	Phone        string `json:"phone" form:"phone"`
 	ContactName  string `json:"contact_name" form:"contact_name"`
 	ContactPhone string `json:"contact_phone" form:"contact_phone"`
-	Type         Type   `json:"type" form:"type"`
 }
 
 type ContactResponse struct {
diff --git a/src/domains/send/file.go b/src/domains/send/file.go
index 9288522..5e55347 100644
--- a/src/domains/send/file.go
+++ b/src/domains/send/file.go
@@ -5,7 +5,6 @@ import "mime/multipart"
 type FileRequest struct {
 	Phone string                `json:"phone" form:"phone"`
 	File  *multipart.FileHeader `json:"file" form:"file"`
-	Type  Type                  `json:"type" form:"type"`
 }
 
 type FileResponse struct {
diff --git a/src/domains/send/image.go b/src/domains/send/image.go
index 3bffd7d..2beea53 100644
--- a/src/domains/send/image.go
+++ b/src/domains/send/image.go
@@ -7,7 +7,6 @@ type ImageRequest struct {
 	Caption  string                `json:"caption" form:"caption"`
 	Image    *multipart.FileHeader `json:"image" form:"image"`
 	ViewOnce bool                  `json:"view_once" form:"view_once"`
-	Type     Type                  `json:"type" form:"type"`
 	Compress bool                  `json:"compress"`
 }
 
diff --git a/src/domains/send/link.go b/src/domains/send/link.go
index 83bb68e..75a10c4 100644
--- a/src/domains/send/link.go
+++ b/src/domains/send/link.go
@@ -4,7 +4,6 @@ type LinkRequest struct {
 	Phone   string `json:"phone" form:"phone"`
 	Caption string `json:"caption"`
 	Link    string `json:"link"`
-	Type    Type   `json:"type" form:"type"`
 }
 
 type LinkResponse struct {
diff --git a/src/domains/send/message.go b/src/domains/send/message.go
index deadd40..441ce95 100644
--- a/src/domains/send/message.go
+++ b/src/domains/send/message.go
@@ -3,7 +3,6 @@ package send
 type RevokeRequest struct {
 	MessageID string `json:"message_id" uri:"message_id"`
 	Phone     string `json:"phone" form:"phone"`
-	Type      Type   `json:"type" form:"type"`
 }
 
 type RevokeResponse struct {
@@ -15,7 +14,6 @@ type UpdateMessageRequest struct {
 	MessageID string `json:"message_id" uri:"message_id"`
 	Message   string `json:"message" form:"message"`
 	Phone     string `json:"phone" form:"phone"`
-	Type      Type   `json:"type" form:"type"`
 }
 
 type UpdateMessageResponse struct {
diff --git a/src/domains/send/send.go b/src/domains/send/send.go
index 0a282a5..c6fe122 100644
--- a/src/domains/send/send.go
+++ b/src/domains/send/send.go
@@ -4,11 +4,6 @@ import (
 	"context"
 )
 
-type Type string
-
-const TypeUser Type = "user"
-const TypeGroup Type = "group"
-
 type ISendService interface {
 	SendText(ctx context.Context, request MessageRequest) (response MessageResponse, err error)
 	SendImage(ctx context.Context, request ImageRequest) (response ImageResponse, err error)
diff --git a/src/domains/send/text.go b/src/domains/send/text.go
index f115fa4..90484b0 100644
--- a/src/domains/send/text.go
+++ b/src/domains/send/text.go
@@ -3,7 +3,6 @@ package send
 type MessageRequest struct {
 	Phone   string `json:"phone" form:"phone"`
 	Message string `json:"message" form:"message"`
-	Type    Type   `json:"type" form:"type"`
 }
 
 type MessageResponse struct {
diff --git a/src/domains/send/video.go b/src/domains/send/video.go
index 66281db..2e9c644 100644
--- a/src/domains/send/video.go
+++ b/src/domains/send/video.go
@@ -6,7 +6,6 @@ type VideoRequest struct {
 	Phone    string                `json:"phone" form:"phone"`
 	Caption  string                `json:"caption" form:"caption"`
 	Video    *multipart.FileHeader `json:"video" form:"video"`
-	Type     Type                  `json:"type" form:"type"`
 	ViewOnce bool                  `json:"view_once" form:"view_once"`
 	Compress bool                  `json:"compress"`
 }
diff --git a/src/internal/rest/app_rest.go b/src/internal/rest/app_rest.go
index f8e0ebc..8164960 100644
--- a/src/internal/rest/app_rest.go
+++ b/src/internal/rest/app_rest.go
@@ -28,7 +28,7 @@ func (controller *App) Login(c *fiber.Ctx) error {
 	return c.JSON(utils.ResponseData{
 		Code:    200,
 		Message: "Success",
-		Results: map[string]interface{}{
+		Results: map[string]any{
 			"qr_link":     fmt.Sprintf("%s://%s/%s", c.Protocol(), c.Hostname(), response.ImagePath),
 			"qr_duration": response.Duration,
 		},
diff --git a/src/internal/rest/send_rest.go b/src/internal/rest/send_rest.go
index bec37d1..29a7c1e 100644
--- a/src/internal/rest/send_rest.go
+++ b/src/internal/rest/send_rest.go
@@ -1,7 +1,6 @@
 package rest
 
 import (
-	"fmt"
 	domainSend "github.com/aldinokemal/go-whatsapp-web-multidevice/domains/send"
 	"github.com/aldinokemal/go-whatsapp-web-multidevice/utils"
 	"github.com/aldinokemal/go-whatsapp-web-multidevice/validations"
@@ -33,12 +32,6 @@ func (controller *Send) SendText(c *fiber.Ctx) error {
 	// add validation send message
 	validations.ValidateSendMessage(request)
 
-	if request.Type == domainSend.TypeGroup {
-		request.Phone = request.Phone + "@g.us"
-	} else {
-		request.Phone = request.Phone + "@s.whatsapp.net"
-	}
-
 	response, err := controller.Service.SendText(c.UserContext(), request)
 	utils.PanicIfNeeded(err)
 
@@ -64,12 +57,6 @@ func (controller *Send) SendImage(c *fiber.Ctx) error {
 	//add validation send image
 	validations.ValidateSendImage(request)
 
-	if request.Type == domainSend.TypeGroup {
-		request.Phone = request.Phone + "@g.us"
-	} else {
-		request.Phone = request.Phone + "@s.whatsapp.net"
-	}
-
 	response, err := controller.Service.SendImage(c.UserContext(), request)
 	utils.PanicIfNeeded(err)
 
@@ -93,12 +80,6 @@ func (controller *Send) SendFile(c *fiber.Ctx) error {
 	//add validation send image
 	validations.ValidateSendFile(request)
 
-	if request.Type == domainSend.TypeGroup {
-		request.Phone = request.Phone + "@g.us"
-	} else {
-		request.Phone = request.Phone + "@s.whatsapp.net"
-	}
-
 	response, err := controller.Service.SendFile(c.UserContext(), request)
 	utils.PanicIfNeeded(err)
 
@@ -122,12 +103,6 @@ func (controller *Send) SendVideo(c *fiber.Ctx) error {
 	//add validation send image
 	validations.ValidateSendVideo(request)
 
-	if request.Type == domainSend.TypeGroup {
-		request.Phone = request.Phone + "@g.us"
-	} else {
-		request.Phone = request.Phone + "@s.whatsapp.net"
-	}
-
 	response, err := controller.Service.SendVideo(c.UserContext(), request)
 	utils.PanicIfNeeded(err)
 
@@ -146,12 +121,6 @@ func (controller *Send) SendContact(c *fiber.Ctx) error {
 	// add validation send contect
 	validations.ValidateSendContact(request)
 
-	if request.Type == domainSend.TypeGroup {
-		request.Phone = request.Phone + "@g.us"
-	} else {
-		request.Phone = request.Phone + "@s.whatsapp.net"
-	}
-
 	response, err := controller.Service.SendContact(c.UserContext(), request)
 	utils.PanicIfNeeded(err)
 
@@ -170,12 +139,6 @@ func (controller *Send) SendLink(c *fiber.Ctx) error {
 	err = validations.ValidateSendLink(request)
 	utils.PanicIfNeeded(err)
 
-	if request.Type == domainSend.TypeGroup {
-		request.Phone = request.Phone + "@g.us"
-	} else {
-		request.Phone = request.Phone + "@s.whatsapp.net"
-	}
-
 	response, err := controller.Service.SendLink(c.UserContext(), request)
 	utils.PanicIfNeeded(err)
 
@@ -194,7 +157,6 @@ func (controller *Send) RevokeMessage(c *fiber.Ctx) error {
 
 	err = validations.ValidateRevokeMessage(request)
 	utils.PanicIfNeeded(err)
-	fmt.Println(request)
 
 	response, err := controller.Service.Revoke(c.UserContext(), request)
 	utils.PanicIfNeeded(err)
@@ -214,7 +176,6 @@ func (controller *Send) UpdateMessage(c *fiber.Ctx) error {
 
 	err = validations.ValidateUpdateMessage(request)
 	utils.PanicIfNeeded(err)
-	fmt.Println(request)
 
 	response, err := controller.Service.UpdateMessage(c.UserContext(), request)
 	utils.PanicIfNeeded(err)
diff --git a/src/internal/rest/user_rest.go b/src/internal/rest/user_rest.go
index 94a0472..dfa7700 100644
--- a/src/internal/rest/user_rest.go
+++ b/src/internal/rest/user_rest.go
@@ -35,8 +35,7 @@ func (controller *User) UserInfo(c *fiber.Ctx) error {
 
 	// add validation send message
 	validations.ValidateUserInfo(request)
-
-	request.Phone = request.Phone + "@s.whatsapp.net"
+	
 	response, err := controller.Service.Info(c.Context(), request)
 	utils.PanicIfNeeded(err)
 
@@ -55,7 +54,6 @@ func (controller *User) UserAvatar(c *fiber.Ctx) error {
 	// add validation send message
 	validations.ValidateUserAvatar(request)
 
-	request.Phone = request.Phone + "@s.whatsapp.net"
 	response, err := controller.Service.Avatar(c.Context(), request)
 	utils.PanicIfNeeded(err)
 
diff --git a/src/utils/errors.go b/src/utils/errors.go
index cec7f77..78c2840 100644
--- a/src/utils/errors.go
+++ b/src/utils/errors.go
@@ -2,7 +2,7 @@ package utils
 
 import "fmt"
 
-func PanicIfNeeded(err interface{}, message ...string) {
+func PanicIfNeeded(err any, message ...string) {
 	if err != nil {
 		if fmt.Sprintf("%s", err) == "record not found" && len(message) > 0 {
 			panic(message[0])
diff --git a/src/utils/response.go b/src/utils/response.go
index 02c155a..29a674f 100644
--- a/src/utils/response.go
+++ b/src/utils/response.go
@@ -1,7 +1,7 @@
 package utils
 
 type ResponseData struct {
-	Code    int         `json:"code"`
-	Message string      `json:"message"`
-	Results interface{} `json:"results"`
+	Code    int    `json:"code"`
+	Message string `json:"message"`
+	Results any    `json:"results"`
 }
diff --git a/src/utils/whatsapp.go b/src/utils/whatsapp.go
index 4bba2ac..8bbeb04 100644
--- a/src/utils/whatsapp.go
+++ b/src/utils/whatsapp.go
@@ -238,7 +238,7 @@ func handler(rawEvt interface{}) {
 
 func sendAutoReplyWebhook(evt *events.Message) error {
 	client := &http.Client{Timeout: 10 * time.Second}
-	body := map[string]interface{}{
+	body := map[string]any{
 		"from":          evt.Info.SourceString(),
 		"message":       evt.Message.GetConversation(),
 		"image":         evt.Message.GetImageMessage(),
diff --git a/src/validations/send_validation.go b/src/validations/send_validation.go
index 02c4042..eb6cb6f 100644
--- a/src/validations/send_validation.go
+++ b/src/validations/send_validation.go
@@ -11,8 +11,7 @@ import (
 
 func ValidateSendMessage(request domainSend.MessageRequest) {
 	err := validation.ValidateStruct(&request,
-		validation.Field(&request.Phone, validation.Required, validation.Length(10, 25)),
-		validation.Field(&request.Message, validation.Required, validation.Length(1, 1000)),
+		validation.Field(&request.Message, validation.Required),
 	)
 
 	if err != nil {
@@ -24,8 +23,6 @@ func ValidateSendMessage(request domainSend.MessageRequest) {
 
 func ValidateSendImage(request domainSend.ImageRequest) {
 	err := validation.ValidateStruct(&request,
-		validation.Field(&request.Phone, validation.Required, validation.Length(10, 25)),
-		validation.Field(&request.Caption, validation.When(true, validation.Length(1, 1000))),
 		validation.Field(&request.Image, validation.Required),
 	)
 
@@ -50,7 +47,6 @@ func ValidateSendImage(request domainSend.ImageRequest) {
 
 func ValidateSendFile(request domainSend.FileRequest) {
 	err := validation.ValidateStruct(&request,
-		validation.Field(&request.Phone, validation.Required, validation.Length(10, 25)),
 		validation.Field(&request.File, validation.Required),
 	)
 
@@ -70,7 +66,6 @@ func ValidateSendFile(request domainSend.FileRequest) {
 
 func ValidateSendVideo(request domainSend.VideoRequest) {
 	err := validation.ValidateStruct(&request,
-		validation.Field(&request.Phone, validation.Required, validation.Length(10, 25)),
 		validation.Field(&request.Video, validation.Required),
 	)
 
@@ -102,7 +97,6 @@ func ValidateSendVideo(request domainSend.VideoRequest) {
 
 func ValidateSendContact(request domainSend.ContactRequest) {
 	err := validation.ValidateStruct(&request,
-		validation.Field(&request.Phone, validation.Required, validation.Length(10, 25)),
 		validation.Field(&request.ContactName, validation.Required),
 		validation.Field(&request.ContactPhone, validation.Required),
 	)
@@ -116,7 +110,6 @@ func ValidateSendContact(request domainSend.ContactRequest) {
 
 func ValidateSendLink(request domainSend.LinkRequest) error {
 	err := validation.ValidateStruct(&request,
-		validation.Field(&request.Phone, validation.Required, validation.Length(10, 25)),
 		validation.Field(&request.Link, validation.Required),
 		validation.Field(&request.Caption, validation.Required),
 	)
@@ -132,8 +125,7 @@ func ValidateSendLink(request domainSend.LinkRequest) error {
 
 func ValidateRevokeMessage(request domainSend.RevokeRequest) error {
 	err := validation.ValidateStruct(&request,
-		validation.Field(&request.Phone, validation.Required, validation.Length(10, 25)),
-		validation.Field(&request.MessageID, validation.Required, validation.Length(20, 25)),
+		validation.Field(&request.MessageID, validation.Required),
 	)
 
 	if err != nil {
@@ -147,9 +139,8 @@ func ValidateRevokeMessage(request domainSend.RevokeRequest) error {
 
 func ValidateUpdateMessage(request domainSend.UpdateMessageRequest) error {
 	err := validation.ValidateStruct(&request,
-		validation.Field(&request.Phone, validation.Required, validation.Length(10, 25)),
-		validation.Field(&request.MessageID, validation.Required, validation.Length(20, 25)),
-		validation.Field(&request.Message, validation.Required, validation.Length(1, 1000)),
+		validation.Field(&request.MessageID, validation.Required),
+		validation.Field(&request.Message, validation.Required),
 	)
 
 	if err != nil {
diff --git a/src/validations/send_validation_test.go b/src/validations/send_validation_test.go
index ef6da97..32bab2f 100644
--- a/src/validations/send_validation_test.go
+++ b/src/validations/send_validation_test.go
@@ -13,12 +13,12 @@ func TestValidateSendMessage(t *testing.T) {
 	tests := []struct {
 		name string
 		args args
-		err  interface{}
+		err  any
 	}{
 		{
 			name: "success phone & message normal",
 			args: args{request: domainSend.MessageRequest{
-				Phone:   "6289685024091",
+				Phone:   "1728937129312@s.whatsapp.net",
 				Message: "Hello this is testing",
 			}},
 			err: nil,
diff --git a/src/validations/user_validation.go b/src/validations/user_validation.go
index 31d46b8..4060f56 100644
--- a/src/validations/user_validation.go
+++ b/src/validations/user_validation.go
@@ -4,12 +4,11 @@ import (
 	domainUser "github.com/aldinokemal/go-whatsapp-web-multidevice/domains/user"
 	"github.com/aldinokemal/go-whatsapp-web-multidevice/utils"
 	validation "github.com/go-ozzo/ozzo-validation/v4"
-	"github.com/go-ozzo/ozzo-validation/v4/is"
 )
 
 func ValidateUserInfo(request domainUser.InfoRequest) {
 	err := validation.ValidateStruct(&request,
-		validation.Field(&request.Phone, validation.Required, is.E164, validation.Length(10, 15)),
+		validation.Field(&request.Phone, validation.Required),
 	)
 
 	if err != nil {
@@ -20,7 +19,7 @@ func ValidateUserInfo(request domainUser.InfoRequest) {
 }
 func ValidateUserAvatar(request domainUser.AvatarRequest) {
 	err := validation.ValidateStruct(&request,
-		validation.Field(&request.Phone, validation.Required, is.E164, validation.Length(10, 15)),
+		validation.Field(&request.Phone, validation.Required),
 	)
 
 	if err != nil {
diff --git a/src/views/index.html b/src/views/index.html
index 428e5fc..54b3858 100644
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -60,22 +60,22 @@
     </div>
 
     <div class="ui horizontal divider">
-        Send Private Message
+        Message
     </div>
 
     <div class="ui three column doubling grid cards">
-        <div class="green card" @click="sendMessageModal('user')" style="cursor: pointer">
+        <div class="blue card" @click="sendMessageModal()" style="cursor: pointer">
             <div class="content">
-                <a class="ui blue right ribbon label">Private</a>
+                <a class="ui blue right ribbon label">Send</a>
                 <div class="header">Send Message</div>
                 <div class="description">
                     Send any message to any whatsapp number
                 </div>
             </div>
         </div>
-        <div class="green card" @click="sendImageModal('user')" style="cursor:pointer;">
+        <div class="blue card" @click="sendImageModal()" style="cursor:pointer;">
             <div class="content">
-                <a class="ui blue right ribbon label">Private</a>
+                <a class="ui blue right ribbon label">Send</a>
                 <div class="header">Send Image</div>
                 <div class="description">
                     Send image with
@@ -84,9 +84,9 @@
                 </div>
             </div>
         </div>
-        <div class="green card" @click="sendFileModal('user')" style="cursor: pointer">
+        <div class="blue card" @click="sendFileModal()" style="cursor: pointer">
             <div class="content">
-                <a class="ui blue right ribbon label">Private</a>
+                <a class="ui blue right ribbon label">Send</a>
                 <div class="header">Send File</div>
                 <div class="description">
                     Send any file up to
@@ -94,9 +94,9 @@
                 </div>
             </div>
         </div>
-        <div class="green card" @click="sendVideoModal('user')" style="cursor: pointer">
+        <div class="blue card" @click="sendVideoModal()" style="cursor: pointer">
             <div class="content">
-                <a class="ui blue right ribbon label">Private</a>
+                <a class="ui blue right ribbon label">Send</a>
                 <div class="header">Send Video</div>
                 <div class="description">
                     Send video
@@ -106,99 +106,50 @@
                 </div>
             </div>
         </div>
-        <div class="green card" @click="sendContactModal('user')" style="cursor: pointer">
+        <div class="blue card" @click="sendContactModal()" style="cursor: pointer">
             <div class="content">
-                <a class="ui blue right ribbon label">Private</a>
+                <a class="ui blue right ribbon label">Send</a>
                 <div class="header">Send Contact</div>
                 <div class="description">
                     Send contact to any whatsapp number
                 </div>
             </div>
         </div>
-    </div>
-
-    <div class="ui horizontal divider">
-        Send Group Message
-    </div>
-
-    <div class="ui three column doubling grid cards">
-        <div class="green card" @click="sendMessageModal('group')" style="cursor: pointer">
-            <div class="content">
-                <a class="ui teal right ribbon label">Group</a>
-                <div class="header">Send Message</div>
-                <div class="description">
-                    Send any message to any whatsapp number
-                </div>
-            </div>
-        </div>
-        <div class="green card" @click="sendImageModal('group')" style="cursor:pointer;">
-            <div class="content">
-                <a class="ui teal right ribbon label">Group</a>
-                <div class="header">Send Image</div>
-                <div class="description">
-                    Send image with
-                    <div class="ui teal horizontal label">jpg/jpeg/png</div>
-                    type
-                </div>
-            </div>
-        </div>
-        <div class="green card" @click="sendFileModal('group')" style="cursor: pointer">
-            <div class="content">
-                <a class="ui teal right ribbon label">Group</a>
-                <div class="header">Send File</div>
-                <div class="description">
-                    Send any file up to
-                    <div class="ui teal horizontal label">{{ .MaxFileSize }}</div>
-                </div>
-            </div>
-        </div>
-        <div class="green card" @click="sendVideoModal('group')" style="cursor: pointer">
-            <div class="content">
-                <a class="ui teal right ribbon label">Group</a>
-                <div class="header">Send Video</div>
-                <div class="description">
-                    Send video
-                    <div class="ui teal horizontal label">mp4</div>
-                    up to
-                    <div class="ui teal horizontal label">{{ .MaxVideoSize }}</div>
-                </div>
-            </div>
-        </div>
-        <div class="green card" @click="sendContactModal('group')" style="cursor: pointer">
+        <div class="red card" @click="sendRevokeModal()" style="cursor: pointer">
             <div class="content">
-                <a class="ui teal right ribbon label">Group</a>
-                <div class="header">Send Contact</div>
+                <a class="ui red right ribbon label">Revoke</a>
+                <div class="header">Revoke Message</div>
                 <div class="description">
-                    Send contact to any whatsapp number
+                    Revoke any message in private or group chat
                 </div>
             </div>
         </div>
     </div>
 
     <div class="ui horizontal divider">
-        User
+        Account
     </div>
 
     <div class="ui four column doubling grid cards">
-        <div class="green card" @click="infoModal" style="cursor: pointer;">
+        <div class="green card" @click="avatarModal" style="cursor: pointer;">
             <div class="content">
-                <div class="header">User Info</div>
+                <div class="header">Avatar</div>
                 <div class="description">
-                    You can search someone user info by phone
+                    You can search someone avatar by phone
                 </div>
             </div>
         </div>
-        <div class="green card" @click="avatarModal" style="cursor: pointer;">
+        <div class="green card" @click="infoModal" style="cursor: pointer;">
             <div class="content">
-                <div class="header">User Avatar</div>
+                <div class="header">User Info</div>
                 <div class="description">
-                    You can search someone avatar by phone
+                    You can search someone user info by phone
                 </div>
             </div>
         </div>
         <div class="green card" @click="groupModal" style="cursor: pointer">
             <div class="content">
-                <div class="header">User List Groups</div>
+                <div class="header">My List Groups</div>
                 <div class="description">
                     Display all groups you joined
                 </div>
@@ -206,7 +157,7 @@
         </div>
         <div class="green card" @click="privacyModal" style="cursor: pointer">
             <div class="content">
-                <div class="header">User Privacy Setting</div>
+                <div class="header">My Privacy Setting</div>
                 <div class="description">
                     Get your privacy settings
                 </div>
@@ -249,10 +200,18 @@
         </div>
         <div class="content">
             <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="message_type" v-model="message_type" aria-label="type">
+                        <option value="group">Group Message</option>
+                        <option value="user">Private Message</option>
+                    </select>
+                </div>
                 <div class="field">
                     <label>Phone / Group ID</label>
                     <input v-model="message_phone" type="text" placeholder="6289..."
                            aria-label="phone">
+                    <input :value="message_phone_id" disabled aria-label="whatsapp_id">
                 </div>
                 <div class="field">
                     <label>Message</label>
@@ -277,10 +236,18 @@
         </div>
         <div class="content">
             <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="image_type" v-model="image_type" aria-label="type">
+                        <option value="group">Group Message</option>
+                        <option value="user">Private Message</option>
+                    </select>
+                </div>
                 <div class="field">
                     <label>Phone / Group ID</label>
                     <input v-model="image_phone" type="text" placeholder="6289..."
                            aria-label="phone">
+                    <input :value="image_phone_id" disabled aria-label="whatsapp_id">
                 </div>
                 <div class="field">
                     <label>Caption</label>
@@ -328,10 +295,18 @@
         </div>
         <div class="content">
             <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="file_type" v-model="file_type" aria-label="type">
+                        <option value="group">Group Message</option>
+                        <option value="user">Private Message</option>
+                    </select>
+                </div>
                 <div class="field">
                     <label>Phone / Group ID</label>
                     <input v-model="file_phone" type="text" placeholder="6289..."
                            aria-label="phone">
+                    <input :value="file_phone_id" disabled aria-label="whatsapp_id">
                 </div>
                 <div class="field">
                     <label>Caption</label>
@@ -364,6 +339,13 @@
         </div>
         <div class="content">
             <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="video_type" v-model="video_type" aria-label="type">
+                        <option value="group">Group Message</option>
+                        <option value="user">Private Message</option>
+                    </select>
+                </div>
                 <div class="field">
                     <label>Phone / Group ID</label>
                     <input v-model="video_phone" type="text" placeholder="6289..."
@@ -373,6 +355,7 @@
                     <label>Caption</label>
                     <input v-model="video_caption" type="text" placeholder="Type some caption (optional)..."
                            aria-label="caption">
+                    <input :value="video_phone_id" disabled aria-label="whatsapp_id">
                 </div>
                 <div class="field">
                     <label>View Once</label>
@@ -414,10 +397,18 @@
         </div>
         <div class="content">
             <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="contact_type" v-model="contact_type" aria-label="type">
+                        <option value="group">Group Message</option>
+                        <option value="user">Private Message</option>
+                    </select>
+                </div>
                 <div class="field">
                     <label>Phone / Group ID</label>
                     <input v-model="contact_phone" type="text" placeholder="6289..."
                            aria-label="phone">
+                    <input :value="contact_phone_id" disabled aria-label="whatsapp_id">
                 </div>
                 <div class="field">
                     <label>Contact Name</label>
@@ -439,6 +430,42 @@
         </div>
     </div>
 
+    <!--  Modal SendRevoke  -->
+    <div class="ui small modal" id="modalSendRevoke">
+        <i class="close icon"></i>
+        <div class="header">
+            Send Revoke
+        </div>
+        <div class="content">
+            <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="revoke_type" v-model="revoke_type" aria-label="type">
+                        <option value="group">Group Message</option>
+                        <option value="user">Private Message</option>
+                    </select>
+                </div>
+                <div class="field">
+                    <label>Phone / Group ID</label>
+                    <input v-model="revoke_phone" type="text" placeholder="6289..."
+                           aria-label="phone">
+                    <input :value="revoke_phone_id" disabled aria-label="whatsapp_id">
+                </div>
+                <div class="field">
+                    <label>Revoke Message ID</label>
+                    <input v-model="revoke_message_id" type="text" placeholder="Please enter your message id"
+                           aria-label="card_phone">
+                </div>
+            </form>
+        </div>
+        <div class="actions">
+            <div class="ui positive right labeled icon button" @click="sendRevokeProcess">
+                Send
+                <i class="send icon"></i>
+            </div>
+        </div>
+    </div>
+
     <!--  Modal UserGroup  -->
     <div class="ui small modal" id="modalUserGroup">
         <i class="close icon"></i>
@@ -492,10 +519,18 @@
         </div>
         <div class="content">
             <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="avatar_type" v-model="avatar_type" aria-label="type">
+                        <option value="group">Group Message</option>
+                        <option value="user">Private Message</option>
+                    </select>
+                </div>
                 <div class="field">
                     <label>Phone</label>
                     <input v-model="avatar_phone" type="text" placeholder="6289..."
                            aria-label="phone">
+                    <input :value="avatar_phone_id" disabled aria-label="whatsapp_id">
                 </div>
 
                 <button type="button" class="ui primary button" :class="{'loading': avatar_loading}"
@@ -518,10 +553,17 @@
         </div>
         <div class="content">
             <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="info_type" v-model="info_type" aria-label="type">
+                        <option value="user">Private Message</option>
+                    </select>
+                </div>
                 <div class="field">
                     <label>Phone</label>
                     <input v-model="info_phone" type="text" placeholder="6289..."
                            aria-label="phone">
+                    <input :value="info_phone_id" disabled aria-label="whatsapp_id">
                 </div>
 
                 <button type="button" class="ui primary button" :class="{'loading': info_loading}"
@@ -678,9 +720,13 @@
                 message_text: '',
             }
         },
+        computed: {
+            message_phone_id() {
+                return this.message_type === 'user' ? `${this.message_phone}@${this.type_user}` : `${this.message_phone}@${this.type_group}`
+            }
+        },
         methods: {
-            sendMessageModal(type) {
-                this.message_type = type
+            sendMessageModal() {
                 $('#modalSendMessage').modal('show');
             },
             async sendMessageProcess() {
@@ -695,9 +741,8 @@
                 return new Promise(async (resolve, reject) => {
                     try {
                         let payload = new FormData();
-                        payload.append("phone", this.message_phone)
+                        payload.append("phone", this.message_phone_id)
                         payload.append("message", this.message_text)
-                        payload.append("type", this.message_type)
                         let response = await http.post(`/send/message`, payload)
                         this.sendMessageReset();
                         resolve(response.data.message)
@@ -728,9 +773,13 @@
                 image_type: 'user',
             }
         },
+        computed: {
+            image_phone_id() {
+                return this.image_type === 'user' ? `${this.image_phone}@${this.type_user}` : `${this.image_phone}@${this.type_group}`
+            }
+        },
         methods: {
-            sendImageModal(type) {
-                this.image_type = type
+            sendImageModal() {
                 $('#modalSendImage').modal('show');
             },
             async sendImageProcess() {
@@ -745,12 +794,11 @@
                 return new Promise(async (resolve, reject) => {
                     try {
                         let payload = new FormData();
-                        payload.append("phone", this.image_phone)
+                        payload.append("phone", this.image_phone_id)
                         payload.append("view_once", this.image_view_once)
                         payload.append("compress", this.image_compress)
                         payload.append("caption", this.image_caption)
                         payload.append("image", $("#image_file")[0].files[0])
-                        payload.append("type", this.image_type)
                         let response = await http.post(`/send/image`, payload)
                         this.sendImageReset();
                         resolve(response.data.message)
@@ -782,9 +830,13 @@
                 file_phone: '',
             }
         },
+        computed: {
+            file_phone_id() {
+                return this.file_type === 'user' ? `${this.file_phone}@${this.type_user}` : `${this.file_phone}@${this.type_group}`
+            }
+        },
         methods: {
-            sendFileModal(type) {
-                this.file_type = type
+            sendFileModal() {
                 $('#modalSendFile').modal('show');
             },
             async sendFileProcess() {
@@ -800,9 +852,8 @@
                     try {
                         let payload = new FormData();
                         payload.append("caption", this.file_caption)
-                        payload.append("phone", this.file_phone)
+                        payload.append("phone", this.file_phone_id)
                         payload.append("file", $("#file_file")[0].files[0])
-                        payload.append("type", this.file_type)
                         let response = await http.post(`/send/file`, payload)
                         this.sendFileReset();
                         resolve(response.data.message)
@@ -834,9 +885,13 @@
                 video_phone: '',
             }
         },
+        computed: {
+            video_phone_id() {
+                return this.video_type === 'user' ? `${this.video_phone}@${this.type_user}` : `${this.video_phone}@${this.type_group}`
+            }
+        },
         methods: {
-            sendVideoModal(type) {
-                this.video_type = type
+            sendVideoModal() {
                 $('#modalSendVideo').modal('show');
             },
             async sendVideoProcess() {
@@ -851,12 +906,11 @@
                 return new Promise(async (resolve, reject) => {
                     try {
                         let payload = new FormData();
-                        payload.append("phone", this.video_phone)
+                        payload.append("phone", this.video_phone_id)
                         payload.append("caption", this.video_caption)
                         payload.append("view_once", this.video_view_once)
                         payload.append("compress", this.video_compress)
                         payload.append("video", $("#video_file")[0].files[0])
-                        payload.append("type", this.video_type)
                         let response = await http.post(`/send/video`, payload)
                         this.sendVideoReset();
                         resolve(response.data.message)
@@ -889,10 +943,15 @@
                 contact_card_phone: '',
             }
         },
+        computed: {
+            contact_phone_id() {
+                return this.contact_type === 'user' ? `${this.contact_phone}@${this.type_user}` : `${this.contact_phone}@${this.type_group}`
+            }
+        },
         methods: {
-            sendContactModal(type) {
-                this.contact_type = type
-                $('#modalSendContact').modal('show');
+            sendContactModal() {
+                this.contact_type =
+                    $('#modalSendContact').modal('show');
             },
             async sendContactProcess() {
                 try {
@@ -906,10 +965,9 @@
                 return new Promise(async (resolve, reject) => {
                     try {
                         let payload = new FormData();
-                        payload.append("phone", this.contact_phone)
+                        payload.append("phone", this.contact_phone_id)
                         payload.append("contact_name", this.contact_card_name)
                         payload.append("contact_phone", this.contact_card_phone)
-                        payload.append("type", this.contact_type)
                         let response = await http.post(`/send/contact`, payload)
                         this.sendContactReset();
                         resolve(response.data.message)
@@ -931,6 +989,56 @@
         }
     }
 
+    const sendRevoke = {
+        data() {
+            return {
+                revoke_type: 'user',
+                revoke_phone: '',
+                revoke_message_id: '',
+            }
+        },
+        computed: {
+            revoke_phone_id() {
+                return this.revoke_type === 'user' ? `${this.revoke_phone}@${this.type_user}` : `${this.revoke_phone}@${this.type_group}`
+            }
+        },
+        methods: {
+            sendRevokeModal() {
+                $('#modalSendRevoke').modal('show');
+            },
+            async sendRevokeProcess() {
+                try {
+                    let response = await this.sendRevokeApi()
+                    showSuccessInfo(response)
+                } catch (err) {
+                    showErrorInfo(err)
+                }
+            },
+            sendRevokeApi() {
+                return new Promise(async (resolve, reject) => {
+                    try {
+                        let payload = new FormData();
+                        payload.append("phone", this.revoke_phone_id)
+                        let response = await http.post(`/message/${this.revoke_message_id}/revoke`, payload)
+                        this.sendRevokeReset();
+                        resolve(response.data.message)
+                    } catch (error) {
+                        if (error.response) {
+                            reject(error.response.data.message)
+                        } else {
+                            reject(error.message)
+                        }
+                    }
+                })
+            },
+            sendRevokeReset() {
+                this.revoke_phone = '';
+                this.revoke_message_id = '';
+                this.revoke_type = 'user';
+            },
+        }
+    }
+
     const userGroups = {
         data() {
             return {
@@ -1006,11 +1114,17 @@
     const userAvatar = {
         data() {
             return {
+                avatar_type: 'user',
                 avatar_phone: '',
                 avatar_image: null,
                 avatar_loading: false,
             }
         },
+        computed: {
+            avatar_phone_id() {
+                return this.avatar_type === 'user' ? `${this.avatar_phone}@${this.type_user}` : `${this.avatar_phone}@${this.type_group}`
+            }
+        },
         methods: {
             async avatarModal() {
                 this.avatarReset();
@@ -1030,7 +1144,7 @@
             avatarApi() {
                 return new Promise(async (resolve, reject) => {
                     try {
-                        let response = await http.get(`/user/avatar?phone=${this.avatar_phone}`)
+                        let response = await http.get(`/user/avatar?phone=${this.avatar_phone_id}`)
                         this.avatar_image = response.data.results.url;
                         resolve()
                     } catch (error) {
@@ -1052,6 +1166,7 @@
     const userInfo = {
         data() {
             return {
+                info_type: 'user',
                 info_phone: '',
                 //
                 info_name: null,
@@ -1061,6 +1176,12 @@
                 info_loading: false,
             }
         },
+
+        computed: {
+            info_phone_id() {
+                return this.info_type === 'user' ? `${this.info_phone}@${this.type_user}` : `${this.info_phone}@${this.type_group}`
+            }
+        },
         methods: {
             async infoModal() {
                 this.infoReset();
@@ -1080,7 +1201,7 @@
             infoApi() {
                 return new Promise(async (resolve, reject) => {
                     try {
-                        let response = await http.get(`/user/info?phone=${this.info_phone}`)
+                        let response = await http.get(`/user/info?phone=${this.info_phone_id}`)
                         this.info_name = response.data.results.verified_name;
                         this.info_status = response.data.results.status;
                         this.info_devices = response.data.results.devices;
@@ -1110,6 +1231,8 @@
                 app_host: {{ .AppHost }},
                 app_name: 'Whatsapp API Multi Device ({{ .AppVersion }})',
                 is_logged_in: false,
+                type_group: "g.us",
+                type_user: "s.whatsapp.net"
             }
         },
         mounted() {
@@ -1144,7 +1267,7 @@
                 return tanggal.format('LLL');
             }
         },
-        mixins: [login, logout, reconnect, sendMessage, sendImage, sendFile, sendVideo, sendContact, userGroups, userPrivacy, userAvatar, userInfo]
+        mixins: [login, logout, reconnect, sendMessage, sendImage, sendFile, sendVideo, sendContact, sendRevoke, userGroups, userPrivacy, userAvatar, userInfo]
     }).mount('#app')
 </script>
 </body>