wip: intercom like live chat with chat widget

- new vue app for serving live chat widget, created subdirectories inside frontend dir `main` and `widget`
- vite changes for both main app and widget app.
- new backend live chat channel
- apis for live chat widget

Makefile

@@ -28,11 +28,24 @@ install-deps: $(STUFFBIN)
 	@echo "→ Installing frontend dependencies..."
 	@cd ${FRONTEND_DIR} && pnpm install
 
-# Build the frontend for production.
+# Build the frontend for production (both apps).
 .PHONY: frontend-build
 frontend-build: install-deps
-	@echo "→ Building frontend for production..."
-	@export VITE_APP_VERSION="${VERSION}" && cd ${FRONTEND_DIR} && pnpm build
+	@echo "→ Building frontend for production - main app & widget..."
+	@export VITE_APP_VERSION="${VERSION}" && cd ${FRONTEND_DIR} && pnpm build:main
+	@export VITE_APP_VERSION="${VERSION}" && cd ${FRONTEND_DIR} && pnpm build:widget
+
+# Build only the main frontend app.
+.PHONY: frontend-build-main
+frontend-build-main: install-deps
+	@echo "→ Building main frontend app for production..."
+	@export VITE_APP_VERSION="${VERSION}" && cd ${FRONTEND_DIR} && pnpm build:main
+
+# Build only the widget frontend app.
+.PHONY: frontend-build-widget
+frontend-build-widget: install-deps
+	@echo "→ Building widget frontend app for production..."
+	@export VITE_APP_VERSION="${VERSION}" && cd ${FRONTEND_DIR} && pnpm build:widget
 
 # Run the Go backend server in development mode.
 .PHONY: run-backend
@@ -40,13 +53,29 @@ run-backend:
 	@echo "→ Running backend..."
 	CGO_ENABLED=0 go run -ldflags="-s -w -X 'main.buildString=${BUILDSTR}' -X 'main.versionString=${VERSION}' -X 'github.com/abhinavxd/libredesk/internal/version.Version=${VERSION}' -X 'main.frontendDir=frontend/dist'" cmd/*.go
 
-# Run the JS frontend server in development mode.
+# Run the JS frontend server in development mode (main app only).
 .PHONY: run-frontend
 run-frontend:
 	@echo "→ Installing frontend dependencies (if not already installed)..."
 	@cd ${FRONTEND_DIR} && pnpm install
-	@echo "→ Running frontend..."
-	@export VITE_APP_VERSION="${VERSION}" && cd ${FRONTEND_DIR} && pnpm dev
+	@echo "→ Running main frontend app..."
+	@export VITE_APP_VERSION="${VERSION}" && cd ${FRONTEND_DIR} && pnpm dev:main
+
+# Run the main frontend app in development mode.
+.PHONY: run-frontend-main
+run-frontend-main:
+	@echo "→ Installing frontend dependencies (if not already installed)..."
+	@cd ${FRONTEND_DIR} && pnpm install
+	@echo "→ Running main frontend app..."
+	@export VITE_APP_VERSION="${VERSION}" && cd ${FRONTEND_DIR} && pnpm dev:main
+
+# Run the widget frontend app in development mode.
+.PHONY: run-frontend-widget
+run-frontend-widget:
+	@echo "→ Installing frontend dependencies (if not already installed)..."
+	@cd ${FRONTEND_DIR} && pnpm install
+	@echo "→ Running widget frontend app..."
+	@export VITE_APP_VERSION="${VERSION}" && cd ${FRONTEND_DIR} && pnpm dev:widget
 
 # Build the backend binary.
 .PHONY: build-backend

cmd/chat.go

@@ -0,0 +1,564 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"time"
+
+	"github.com/abhinavxd/libredesk/internal/conversation/models"
+	cmodels "github.com/abhinavxd/libredesk/internal/conversation/models"
+	"github.com/abhinavxd/libredesk/internal/envelope"
+	"github.com/abhinavxd/libredesk/internal/inbox/channel/livechat"
+	umodels "github.com/abhinavxd/libredesk/internal/user/models"
+	"github.com/golang-jwt/jwt/v5"
+	"github.com/valyala/fasthttp"
+	"github.com/volatiletech/null/v9"
+	"github.com/zerodha/fastglue"
+)
+
+type onlyJWT struct {
+	JWT string `json:"jwt"`
+}
+
+// Define JWT claims structure
+type Claims struct {
+	UserID   int    `json:"user_id,omitempty"`
+	IsGuest  bool   `json:"is_guest,omitempty"`
+	Username string `json:"username,omitempty"`
+	Email    string `json:"email,omitempty"`
+	jwt.RegisteredClaims
+}
+
+// Chat widget initialization request
+type chatInitReq struct {
+	onlyJWT
+
+	// For guest users
+	GuestName  string `json:"guest_name,omitempty"`
+	GuestEmail string `json:"guest_email,omitempty"`
+	Message    string `json:"message,omitempty"`
+
+	InboxID int `json:"inbox_id"`
+}
+
+type conversationResp struct {
+	Conversation Conversation  `json:"conversation"`
+	Messages     []chatMessage `json:"messages"`
+}
+
+type Conversation struct {
+	UUID string `json:"uuid"`
+}
+
+type chatMessage struct {
+	CreatedAt      time.Time `json:"created_at"`
+	UUID           string    `json:"uuid"`
+	Content        string    `json:"content"`
+	SenderType     string    `json:"sender_type"`
+	SenderName     string    `json:"sender_name"`
+	ConversationID string    `json:"conversation_id"`
+}
+
+type chatMessageReq struct {
+	Message string `json:"message"`
+	onlyJWT
+}
+
+// handleGetChatSettings returns the live chat settings for the widget
+func handleGetChatSettings(r *fastglue.Request) error {
+	var (
+		app     = r.Context.(*App)
+		inboxID = r.RequestCtx.QueryArgs().GetUintOrZero("inbox_id")
+	)
+
+	if inboxID <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Inbox ID is required", nil, envelope.InputError)
+	}
+
+	// Get inbox configuration
+	inbox, err := app.inbox.GetDBRecord(inboxID)
+	if err != nil {
+		app.lo.Error("error fetching inbox", "inbox_id", inboxID, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusNotFound, app.i18n.Ts("globals.messages.notFound", "name", "{globals.terms.inbox}"), nil, envelope.NotFoundError)
+	}
+
+	if inbox.Channel != livechat.ChannelLiveChat {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Invalid inbox type for chat", nil, envelope.InputError)
+	}
+
+	if !inbox.Enabled {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Inbox is disabled", nil, envelope.InputError)
+	}
+
+	var config livechat.Config
+	if err := json.Unmarshal(inbox.Config, &config); err != nil {
+		app.lo.Error("error parsing live chat config", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, "Invalid inbox configuration", nil, envelope.GeneralError)
+	}
+
+	return r.SendEnvelope(config)
+}
+
+// handleChatInit initializes a new chat session.
+func handleChatInit(r *fastglue.Request) error {
+	var (
+		app = r.Context.(*App)
+		req = chatInitReq{}
+	)
+
+	if err := r.Decode(&req, "json"); err != nil {
+		app.lo.Error("error unmarshalling chat init request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
+	}
+
+	if req.Message == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Message is required", nil, envelope.InputError)
+	}
+
+	// Get inbox configuration
+	inbox, err := app.inbox.GetDBRecord(req.InboxID)
+	if err != nil {
+		app.lo.Error("error fetching inbox", "inbox_id", req.InboxID, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusNotFound, app.i18n.Ts("globals.messages.notFound", "name", "{globals.terms.inbox}"), nil, envelope.NotFoundError)
+	}
+
+	// Make sure the inbox is enabled and of the correct type
+	if !inbox.Enabled {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Inbox is disabled", nil, envelope.InputError)
+	}
+
+	if inbox.Channel != livechat.ChannelLiveChat {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Invalid inbox type for chat", nil, envelope.InputError)
+	}
+
+	// Parse inbox config
+	var config livechat.Config
+	if err := json.Unmarshal(inbox.Config, &config); err != nil {
+		app.lo.Error("error parsing live chat config", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, "Invalid inbox configuration", nil, envelope.GeneralError)
+	}
+
+	var contactID int
+	var conversationUUID string
+	var isGuest bool
+
+	// Handle authenticated user
+	if req.JWT != "" {
+		claims, err := verifyStandardJWT(req.JWT)
+		if err != nil {
+			app.lo.Error("invalid JWT", "jwt", req.JWT, "error", err)
+			return r.SendErrorEnvelope(fasthttp.StatusUnauthorized, "Invalid JWT", nil, envelope.InputError)
+		}
+		userID := claims.UserID
+		isGuest = claims.IsGuest
+
+		user := umodels.User{
+			Email:     null.StringFrom(claims.Email),
+			FirstName: claims.Username,
+			LastName:  "",
+		}
+
+		// Get or Create contact / visitor user.
+		if !isGuest {
+			if err = app.user.CreateContact(&user); err != nil {
+				app.lo.Error("error fetching authenticated user contact", "user_id", userID, "error", err)
+				return r.SendErrorEnvelope(fasthttp.StatusNotFound, "User not found", nil, envelope.NotFoundError)
+			}
+		} else {
+			if err = app.user.CreateVisitor(&user); err != nil {
+				app.lo.Error("error creating guest contact", "error", err)
+				return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, "Error creating user, Please try again.", nil, envelope.GeneralError)
+			}
+		}
+		contactID = user.ID
+	} else {
+		isGuest = true
+		visitor := umodels.User{
+			Email:     null.NewString(req.GuestEmail, req.GuestEmail != ""),
+			FirstName: req.GuestName,
+		}
+
+		if err := app.user.CreateVisitor(&visitor); err != nil {
+			app.lo.Error("error creating guest contact", "error", err)
+			return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, "Error creating user, Please try again.", nil, envelope.GeneralError)
+		}
+		contactID = visitor.ID
+
+		// Generate guest JWT
+		req.JWT, err = generateUserJWT(contactID, isGuest, time.Now().Add(24*time.Hour))
+		if err != nil {
+			app.lo.Error("error generating guest JWT", "error", err)
+			return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, "Failed to generate JWT, Please try again.", nil, envelope.GeneralError)
+		}
+	}
+
+	app.lo.Info("creating new conversation for user", "user_id", contactID, "inbox_id", req.InboxID)
+
+	// Create conversation.
+	_, conversationUUID, err = app.conversation.CreateConversation(
+		contactID,
+		req.InboxID,
+		"",
+		time.Now(),
+		"",
+		false,
+	)
+	if err != nil {
+		app.lo.Error("error creating conversation", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, "Error creating conversation, Please try again.", nil, envelope.GeneralError)
+	}
+
+	// Send message to the just created conversation as user.
+	message := models.Message{
+		ConversationUUID: conversationUUID,
+		SenderID:         contactID,
+		Type:             models.MessageIncoming,
+		SenderType:       models.SenderTypeContact,
+		Status:           models.MessageStatusReceived,
+		Content:          req.Message,
+		ContentType:      models.ContentTypeText,
+		Private:          false,
+	}
+	if err := app.conversation.InsertMessage(&message); err != nil {
+		app.lo.Error("error inserting initial message", "conversation_uuid", conversationUUID, "error", err)
+	}
+
+	// Build response with conversation and messages.
+	resp, err := buildConversationResponse(app, conversationUUID, contactID)
+	if err != nil {
+		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, "Error creating conversation, Please try again.", nil, envelope.GeneralError)
+	}
+
+	return r.SendEnvelope(map[string]interface{}{
+		"conversation": resp.Conversation,
+		"messages":     resp.Messages,
+		"jwt":          req.JWT,
+	})
+}
+
+// buildConversationResponse builds the response for a conversation including its messages
+func buildConversationResponse(app *App, conversationUUID string, contactID int) (*conversationResp, error) {
+	// Fetch last 2000 messages, this should suffice as chats shouldn't have too many messages.
+	private := false
+	messages, _, err := app.conversation.GetConversationMessages(conversationUUID, []string{cmodels.MessageIncoming, cmodels.MessageOutgoing}, &private, 1, 2000)
+	if err != nil {
+		app.lo.Error("error fetching conversation messages", "conversation_uuid", conversationUUID, "error", err)
+		return nil, fmt.Errorf("failed to fetch conversation messages: %v", err)
+	}
+
+	// Convert to chat message format
+	chatMessages := make([]chatMessage, len(messages))
+	nameMap := make(map[int]string)
+	for i, msg := range messages {
+		// Get sender name
+		senderName := nameMap[msg.SenderID]
+		if msg.SenderType == models.SenderTypeContact {
+			if senderName == "" {
+				if contact, err := app.user.GetContact(contactID, ""); err == nil {
+					senderName = contact.FullName()
+					nameMap[msg.SenderID] = senderName
+				}
+			}
+		}
+		chatMessages[i] = chatMessage{
+			UUID:           msg.UUID,
+			Content:        msg.TextContent,
+			CreatedAt:      msg.CreatedAt,
+			SenderType:     msg.SenderType,
+			SenderName:     senderName,
+			ConversationID: msg.ConversationUUID,
+		}
+	}
+
+	resp := &conversationResp{
+		Conversation: Conversation{
+			UUID: conversationUUID,
+		},
+		Messages: chatMessages,
+	}
+
+	return resp, nil
+}
+
+// handleChatGetConversation fetches a chat conversation by ID
+func handleChatGetConversation(r *fastglue.Request) error {
+	var (
+		app              = r.Context.(*App)
+		conversationUUID = r.RequestCtx.UserValue("uuid").(string)
+		chatReq          = chatInitReq{}
+	)
+
+	if conversationUUID == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "conversation_id is required", nil, envelope.InputError)
+	}
+
+	// Decode chat request if present
+	if err := r.Decode(&chatReq, "json"); err != nil {
+		app.lo.Error("error unmarshalling chat request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
+	}
+
+	// Verify JWT.
+	if chatReq.JWT == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "JWT is required", nil, envelope.InputError)
+	}
+
+	claims, err := verifyStandardJWT(chatReq.JWT)
+	if err != nil {
+		app.lo.Error("invalid JWT", "jwt", chatReq.JWT, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusUnauthorized, "Invalid JWT", nil,
+			envelope.InputError)
+	}
+
+	contactID := claims.UserID
+	if contactID <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Invalid user ID in JWT", nil, envelope.InputError)
+	}
+
+	// Fetch conversation details
+	conversation, err := app.conversation.GetConversation(0, conversationUUID)
+	if err != nil {
+		app.lo.Error("error fetching conversation", "conversation_uuid", conversationUUID, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusNotFound, "Conversation not found", nil, envelope.NotFoundError)
+	}
+
+	// Make sure the conversation belongs to the contact
+	if conversation.ContactID != contactID {
+		app.lo.Error("unauthorized access to conversation", "conversation_uuid", conversationUUID, "contact_id", contactID)
+		return r.SendErrorEnvelope(fasthttp.StatusForbidden, "You do not have access to this conversation", nil, envelope.PermissionError)
+	}
+
+	// Build conversation response with messages
+	resp, err := buildConversationResponse(app, conversation.UUID, conversation.ContactID)
+	if err != nil {
+		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, "Failed to fetch conversation messages", nil, envelope.GeneralError)
+	}
+
+	return r.SendEnvelope(*resp)
+}
+
+// handleGetConversations fetches all chat conversations for a widget user
+func handleGetConversations(r *fastglue.Request) error {
+	var (
+		app = r.Context.(*App)
+		req = onlyJWT{}
+	)
+
+	if err := r.Decode(&req, "json"); err != nil {
+		app.lo.Error("error unmarshalling chat conversations request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
+	}
+
+	if req.JWT == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "JWT is required", nil, envelope.InputError)
+	}
+
+	claims, err := verifyStandardJWT(req.JWT)
+	if err != nil {
+		app.lo.Error("invalid JWT", "jwt", req.JWT, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusUnauthorized, "Invalid JWT", nil, envelope.InputError)
+	}
+
+	contactID := claims.UserID
+	if contactID <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Invalid user ID in JWT", nil, envelope.InputError)
+	}
+
+	conversations, err := app.conversation.GetContactConversations(contactID)
+	if err != nil {
+		app.lo.Error("error fetching conversations for contact", "contact_id", contactID, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, "Failed to fetch conversations", nil, envelope.GeneralError)
+	}
+
+	return r.SendEnvelope(conversations)
+}
+
+// handleChatSendMessage sends a message in a chat conversation
+func handleChatSendMessage(r *fastglue.Request) error {
+	var (
+		app              = r.Context.(*App)
+		conversationUUID = r.RequestCtx.UserValue("uuid").(string)
+		req              = chatMessageReq{}
+	)
+
+	if err := r.Decode(&req, "json"); err != nil {
+		app.lo.Error("error unmarshalling chat message request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
+	}
+
+	var senderID int
+	var senderType = models.SenderTypeContact
+	if req.JWT == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "JWT is required", nil, envelope.InputError)
+	}
+
+	if req.Message == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Message content is required", nil, envelope.InputError)
+	}
+
+	claims, err := verifyStandardJWT(req.JWT)
+	if err != nil {
+		app.lo.Error("invalid JWT", "jwt", req.JWT, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusUnauthorized, "Invalid JWT", nil, envelope.InputError)
+	}
+	senderID = claims.UserID
+
+	if senderID <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Invalid user ID in JWT", nil, envelope.InputError)
+	}
+
+	// Fetch conversation to ensure it exists
+	conversation, err := app.conversation.GetConversation(0, conversationUUID)
+	if err != nil {
+		app.lo.Error("error fetching conversation", "conversation_uuid", conversationUUID, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusNotFound, "Conversation not found", nil, envelope.NotFoundError)
+	}
+
+	// Make sure the conversation belongs to the sender
+	if conversation.ContactID != senderID {
+		app.lo.Error("unauthorized access to conversation", "conversation_uuid", conversationUUID, "contact_id", senderID)
+		return r.SendErrorEnvelope(fasthttp.StatusForbidden, "You do not have access to this conversation", nil, envelope.PermissionError)
+	}
+
+	// Create and insert message
+	message := models.Message{
+		ConversationUUID: conversationUUID,
+		SenderID:         senderID,
+		Type:             models.MessageIncoming,
+		SenderType:       senderType,
+		Status:           models.MessageStatusReceived,
+		Content:          req.Message,
+		ContentType:      models.ContentTypeText,
+		Private:          false,
+	}
+
+	if err := app.conversation.InsertMessage(&message); err != nil {
+		app.lo.Error("error inserting chat message", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, "Failed to send message", nil, envelope.GeneralError)
+	}
+
+	return r.SendEnvelope(map[string]bool{"success": true})
+}
+
+// handleChatArchiveConversation archives a chat conversation
+func handleChatCloseConversation(r *fastglue.Request) error {
+	var (
+		app              = r.Context.(*App)
+		conversationUUID = r.RequestCtx.UserValue("uuid").(string)
+		onlyJWT          = onlyJWT{}
+	)
+
+	if conversationUUID == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "conversation_id is required", nil, envelope.InputError)
+	}
+
+	// Decode
+	if err := r.Decode(&onlyJWT, "json"); err != nil {
+		app.lo.Error("error unmarshalling chat close request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
+	}
+
+	// Verify JWT
+	if onlyJWT.JWT == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "JWT is required", nil, envelope.InputError)
+	}
+
+	claims, err := verifyStandardJWT(onlyJWT.JWT)
+	if err != nil {
+		app.lo.Error("invalid JWT", "jwt", onlyJWT.JWT, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusUnauthorized, "Invalid JWT", nil, envelope.InputError)
+	}
+	contactID := claims.UserID
+	if contactID <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Invalid user ID in JWT", nil, envelope.InputError)
+	}
+
+	// Fetch conversation to ensure it exists
+	conversation, err := app.conversation.GetConversation(0, conversationUUID)
+	if err != nil {
+		app.lo.Error("error fetching conversation for closing", "conversation_uuid", conversationUUID, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusNotFound, "Conversation not found", nil, envelope.NotFoundError)
+	}
+
+	// Make sure the conversation belongs to the contact
+	if conversation.ContactID != contactID {
+		app.lo.Error("unauthorized access to conversation for closing", "conversation_uuid", conversationUUID, "contact_id", contactID)
+		return r.SendErrorEnvelope(fasthttp.StatusForbidden, "You do not have access to this conversation", nil, envelope.PermissionError)
+	}
+
+	contact, err := app.user.GetContact(contactID, "")
+	if err != nil {
+		app.lo.Error("error fetching contact for closing conversation", "contact_id", contactID, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusNotFound, "Contact not found", nil, envelope.NotFoundError)
+	}
+
+	err = app.conversation.UpdateConversationStatus(conversationUUID, 0, models.StatusClosed, "", contact)
+	if err != nil {
+		app.lo.Error("error archiving chat conversation", "conversation_uuid", conversationUUID, "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, "Failed to archive conversation", nil, envelope.GeneralError)
+	}
+
+	return r.SendEnvelope(map[string]bool{"success": true})
+}
+
+// verifyJWT verifies and validates a JWT token with proper signature verification
+func verifyJWT(tokenString string, secretKey []byte) (*Claims, error) {
+	// Parse and verify the token
+	token, err := jwt.ParseWithClaims(tokenString, &Claims{}, func(token *jwt.Token) (interface{}, error) {
+		// Verify the signing method
+		if _, ok := token.Method.(*jwt.SigningMethodHMAC); !ok {
+			return nil, fmt.Errorf("unexpected signing method: %v", token.Header["alg"])
+		}
+		return secretKey, nil
+	})
+
+	if err != nil {
+		return nil, err
+	}
+
+	// Extract claims if token is valid
+	if claims, ok := token.Claims.(*Claims); ok && token.Valid {
+		return claims, nil
+	}
+
+	return nil, fmt.Errorf("invalid token")
+}
+
+// verifyStandardJWT verifies a standard JWT token using proper JWT library
+func verifyStandardJWT(jwtToken string) (Claims, error) {
+	if jwtToken == "" {
+		return Claims{}, fmt.Errorf("JWT token is empty")
+	}
+
+	claims, err := verifyJWT(jwtToken, getJWTSecret())
+	if err != nil {
+		return Claims{}, err
+	}
+
+	return *claims, nil
+}
+
+// getJWTSecret gets the JWT secret key from configuration or uses a default
+func getJWTSecret() []byte {
+	// TODO: Update this to pick from inbox config in db.
+	return []byte("your-secret-key-change-this-in-production")
+}
+
+// generateUserJWT generates a JWT token for a user
+func generateUserJWT(userID int, isGuest bool, expirationTime time.Time) (string, error) {
+	claims := &Claims{
+		UserID:  userID,
+		IsGuest: isGuest,
+		RegisteredClaims: jwt.RegisteredClaims{
+			ExpiresAt: jwt.NewNumericDate(expirationTime),
+			IssuedAt:  jwt.NewNumericDate(time.Now()),
+			NotBefore: jwt.NewNumericDate(time.Now()),
+		},
+	}
+	token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
+	tokenString, err := token.SignedString(getJWTSecret())
+	if err != nil {
+		return "", err
+	}
+	return tokenString, nil
+}

cmd/conversation.go

@@ -708,10 +708,8 @@ func handleCreateConversation(r *fastglue.Request) error {
 	// Find or create contact.
 	contact := umodels.User{
 		Email:           null.StringFrom(req.Email),
-		SourceChannelID: null.StringFrom(req.Email),
 		FirstName:       req.FirstName,
 		LastName:        req.LastName,
-		InboxID:         req.InboxID,
 	}
 	if err := app.user.CreateContact(&contact); err != nil {
 		return sendErrorEnvelope(r, envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorCreating", "name", "{globals.terms.contact}"), nil))
@@ -720,7 +718,6 @@ func handleCreateConversation(r *fastglue.Request) error {
 	// Create conversation
 	conversationID, conversationUUID, err := app.conversation.CreateConversation(
 		contact.ID,
-		contact.ContactChannelID,
 		req.InboxID,
 		"",         /** last_message **/
 		time.Now(), /** last_message_at **/

cmd/handlers.go

@@ -5,6 +5,7 @@ import (
 	"net/http"
 	"path"
 	"path/filepath"
+	"strings"
 
 	"github.com/abhinavxd/libredesk/internal/envelope"
 	"github.com/abhinavxd/libredesk/internal/ws"
@@ -214,8 +215,18 @@ func initHandlers(g *fastglue.Fastglue, hub *ws.Hub) {
 		return handleWS(r, hub)
 	}))
 
+	// Live chat widget.
+	g.GET("/widget/ws", handleWidgetWS)
+	g.GET("/api/v1/widget/chat/settings", handleGetChatSettings)
+	g.POST("/api/v1/widget/chat/conversations/init", handleChatInit)
+	g.POST("/api/v1/widget/chat/conversations", handleGetConversations)
+	g.POST("/api/v1/widget/chat/conversations/{uuid}", handleChatGetConversation)
+	g.POST("/api/v1/widget/chat/conversations/{uuid}/message", handleChatSendMessage)
+	g.POST("/api/v1/widget/chat/conversations/{uuid}/close", handleChatCloseConversation)
+
 	// Frontend pages.
 	g.GET("/", notAuthPage(serveIndexPage))
+	g.GET("/widget", serveWidgetIndexPage)
 	g.GET("/inboxes/{all:*}", authPage(serveIndexPage))
 	g.GET("/teams/{all:*}", authPage(serveIndexPage))
 	g.GET("/views/{all:*}", authPage(serveIndexPage))
@@ -225,8 +236,12 @@ func initHandlers(g *fastglue.Fastglue, hub *ws.Hub) {
 	g.GET("/account/{all:*}", authPage(serveIndexPage))
 	g.GET("/reset-password", notAuthPage(serveIndexPage))
 	g.GET("/set-password", notAuthPage(serveIndexPage))
-	// FIXME: Don't need three separate routes for the same thing.
+
+	// Assets and static files.
+	// FIXME: Reduce the number of routes.
+	g.GET("/widget.js", serveWidgetJS)
 	g.GET("/assets/{all:*}", serveFrontendStaticFiles)
+	g.GET("/widget/assets/{all:*}", serveWidgetStaticFiles)
 	g.GET("/images/{all:*}", serveFrontendStaticFiles)
 	g.GET("/static/public/{all:*}", serveStaticFiles)
 
@@ -263,6 +278,26 @@ func serveIndexPage(r *fastglue.Request) error {
 	return nil
 }
 
+// serveWidgetIndexPage serves the widget index page of the application.
+func serveWidgetIndexPage(r *fastglue.Request) error {
+	app := r.Context.(*App)
+
+	// Prevent caching of the index page.
+	r.RequestCtx.Response.Header.Add("Cache-Control", "no-store, no-cache, must-revalidate, post-check=0, pre-check=0")
+	r.RequestCtx.Response.Header.Add("Pragma", "no-cache")
+	r.RequestCtx.Response.Header.Add("Expires", "-1")
+
+	// Serve the index.html file from the embedded filesystem.
+	file, err := app.fs.Get(path.Join(widgetDir, "index.html"))
+	if err != nil {
+		return r.SendErrorEnvelope(http.StatusNotFound, app.i18n.Ts("globals.messages.notFound", "name", "{globals.terms.file}"), nil, envelope.NotFoundError)
+	}
+	r.RequestCtx.Response.Header.Set("Content-Type", "text/html")
+	r.RequestCtx.SetBody(file.ReadBytes())
+
+	return nil
+}
+
 // serveStaticFiles serves static assets from the embedded filesystem.
 func serveStaticFiles(r *fastglue.Request) error {
 	app := r.Context.(*App)
@@ -311,6 +346,47 @@ func serveFrontendStaticFiles(r *fastglue.Request) error {
 	return nil
 }
 
+// serveWidgetStaticFiles serves widget static assets from the embedded filesystem.
+func serveWidgetStaticFiles(r *fastglue.Request) error {
+	app := r.Context.(*App)
+
+	filePath := string(r.RequestCtx.Path())
+	finalPath := filepath.Join(widgetDir, strings.TrimPrefix(filePath, "/widget"))
+
+	file, err := app.fs.Get(finalPath)
+	if err != nil {
+		return r.SendErrorEnvelope(http.StatusNotFound, app.i18n.Ts("globals.messages.notFound", "name", "{globals.terms.file}"), nil, envelope.NotFoundError)
+	}
+
+	// Set the appropriate Content-Type based on the file extension.
+	ext := filepath.Ext(filePath)
+	contentType := mime.TypeByExtension(ext)
+	if contentType == "" {
+		contentType = http.DetectContentType(file.ReadBytes())
+	}
+	r.RequestCtx.Response.Header.Set("Content-Type", contentType)
+	r.RequestCtx.SetBody(file.ReadBytes())
+	return nil
+}
+
+// serveWidgetJS serves the widget JavaScript file.
+func serveWidgetJS(r *fastglue.Request) error {
+	app := r.Context.(*App)
+
+	// Set appropriate headers for JavaScript
+	r.RequestCtx.Response.Header.Set("Content-Type", "application/javascript")
+	r.RequestCtx.Response.Header.Set("Cache-Control", "public, max-age=3600") // Cache for 1 hour
+
+	// Serve the widget.js file from the embedded filesystem.
+	file, err := app.fs.Get("static/widget.js")
+	if err != nil {
+		return r.SendErrorEnvelope(http.StatusNotFound, app.i18n.Ts("globals.messages.notFound", "name", "{globals.terms.file}"), nil, envelope.NotFoundError)
+	}
+
+	r.RequestCtx.SetBody(file.ReadBytes())
+	return nil
+}
+
 // sendErrorEnvelope sends a standardized error response to the client.
 func sendErrorEnvelope(r *fastglue.Request, err error) error {
 	e, ok := err.(envelope.Error)

cmd/inboxes.go

@@ -154,10 +154,12 @@ func handleDeleteInbox(r *fastglue.Request) error {
 
 // validateInbox validates the inbox
 func validateInbox(app *App, inbox imodels.Inbox) error {
-	// Validate from address.
+	// Validate from address only for email channels.
+	if inbox.Channel == "email" {
 		if _, err := mail.ParseAddress(inbox.From); err != nil {
 			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalidFromAddress"), nil)
 		}
+	}
 	if len(inbox.Config) == 0 {
 		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "config"), nil)
 	}

cmd/init.go

@@ -27,6 +27,7 @@ import (
 	customAttribute "github.com/abhinavxd/libredesk/internal/custom_attribute"
 	"github.com/abhinavxd/libredesk/internal/inbox"
 	"github.com/abhinavxd/libredesk/internal/inbox/channel/email"
+	"github.com/abhinavxd/libredesk/internal/inbox/channel/livechat"
 	imodels "github.com/abhinavxd/libredesk/internal/inbox/models"
 	"github.com/abhinavxd/libredesk/internal/macro"
 	"github.com/abhinavxd/libredesk/internal/media"
@@ -132,7 +133,8 @@ func initConstants() *constants {
 // initFS initializes the stuffbin FileSystem.
 func initFS() stuffbin.FileSystem {
 	var files = []string{
-		"frontend/dist",
+		"frontend/dist/main",
+		"frontend/dist/widget",
 		"i18n",
 		"static",
 	}
@@ -572,11 +574,41 @@ func initEmailInbox(inboxRecord imodels.Inbox, msgStore inbox.MessageStore, usrS
 	return inbox, nil
 }
 
+// initLiveChatInbox initializes the live chat inbox.
+func initLiveChatInbox(inboxRecord imodels.Inbox, msgStore inbox.MessageStore, usrStore inbox.UserStore) (inbox.Inbox, error) {
+	var config livechat.Config
+
+	// Load JSON data into Koanf.
+	if err := ko.Load(rawbytes.Provider([]byte(inboxRecord.Config)), kjson.Parser()); err != nil {
+		return nil, fmt.Errorf("loading config: %w", err)
+	}
+
+	if err := ko.UnmarshalWithConf("", &config, koanf.UnmarshalConf{Tag: "json"}); err != nil {
+		return nil, fmt.Errorf("unmarshalling `%s` %s config: %w", inboxRecord.Channel, inboxRecord.Name, err)
+	}
+
+	inbox, err := livechat.New(msgStore, usrStore, livechat.Opts{
+		ID:     inboxRecord.ID,
+		Config: config,
+		Lo:     initLogger("livechat_inbox"),
+	})
+
+	if err != nil {
+		return nil, fmt.Errorf("initializing `%s` inbox: `%s` error : %w", inboxRecord.Channel, inboxRecord.Name, err)
+	}
+
+	log.Printf("`%s` inbox successfully initialized", inboxRecord.Name)
+
+	return inbox, nil
+}
+
 // initializeInboxes handles inbox initialization.
 func initializeInboxes(inboxR imodels.Inbox, msgStore inbox.MessageStore, usrStore inbox.UserStore) (inbox.Inbox, error) {
 	switch inboxR.Channel {
 	case "email":
 		return initEmailInbox(inboxR, msgStore, usrStore)
+	case "livechat":
+		return initLiveChatInbox(inboxR, msgStore, usrStore)
 	default:
 		return nil, fmt.Errorf("unknown inbox channel: %s", inboxR.Channel)
 	}

cmd/main.go

@@ -54,7 +54,8 @@ var (
 	ko          = koanf.New(".")
 	ctx         = context.Background()
 	appName     = "libredesk"
-	frontendDir = "frontend/dist"
+	frontendDir = "frontend/dist/main"
+	widgetDir   = "frontend/dist/widget"
 
 	// Injected at build time.
 	buildString   string

cmd/messages.go

@@ -4,6 +4,7 @@ import (
 	"strconv"
 
 	amodels "github.com/abhinavxd/libredesk/internal/auth/models"
+	cmodels "github.com/abhinavxd/libredesk/internal/conversation/models"
 	"github.com/abhinavxd/libredesk/internal/envelope"
 	medModels "github.com/abhinavxd/libredesk/internal/media/models"
 	"github.com/valyala/fasthttp"
@@ -41,7 +42,7 @@ func handleGetMessages(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	messages, pageSize, err := app.conversation.GetConversationMessages(uuid, page, pageSize)
+	messages, pageSize, err := app.conversation.GetConversationMessages(uuid, []string{cmodels.MessageIncoming, cmodels.MessageOutgoing, cmodels.MessageActivity}, nil, page, pageSize)
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}

cmd/upgrade.go

@@ -35,6 +35,7 @@ var migList = []migFunc{
 	{"v0.5.0", migrations.V0_5_0},
 	{"v0.6.0", migrations.V0_6_0},
 	{"v0.7.0", migrations.V0_7_0},
+	{"v0.8.0", migrations.V0_8_0},
 }
 
 // upgrade upgrades the database to the current version by running SQL migration files

cmd/widget_ws.go

@@ -0,0 +1,208 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+
+	"github.com/abhinavxd/libredesk/internal/inbox/channel/livechat"
+	"github.com/fasthttp/websocket"
+	"github.com/zerodha/fastglue"
+)
+
+// Widget WebSocket message types
+const (
+	WidgetMsgTypeJoin    = "join"
+	WidgetMsgTypeMessage = "message"
+	WidgetMsgTypeTyping  = "typing"
+	WidgetMsgTypeError   = "error"
+	WidgetMsgTypeNewMsg  = "new_message"
+	WidgetMsgTypeStatus  = "status"
+)
+
+// WidgetMessage represents a message sent through the widget WebSocket
+type WidgetMessage struct {
+	Type string      `json:"type"`
+	JWT  string      `json:"jwt,omitempty"`
+	Data interface{} `json:"data"`
+}
+
+// WidgetJoinData represents data for joining a conversation
+type WidgetJoinData struct {
+	ConversationUUID string `json:"conversation_uuid"`
+}
+
+// WidgetMessageData represents a chat message through the widget
+type WidgetMessageData struct {
+	ConversationID string `json:"conversation_id"`
+	Content        string `json:"content"`
+	SenderName     string `json:"sender_name,omitempty"`
+	SenderType     string `json:"sender_type"`
+	Timestamp      int64  `json:"timestamp"`
+}
+
+// WidgetTypingData represents typing indicator data
+type WidgetTypingData struct {
+	ConversationID string `json:"conversation_id"`
+	IsTyping       bool   `json:"is_typing"`
+}
+
+// handleWidgetWS handles the widget WebSocket connection for public live chat
+func handleWidgetWS(r *fastglue.Request) error {
+	var (
+		app = r.Context.(*App)
+	)
+
+	if err := upgrader.Upgrade(r.RequestCtx, func(conn *websocket.Conn) {
+		defer conn.Close()
+		// Handle incoming messages
+		for {
+			var msg WidgetMessage
+			if err := conn.ReadJSON(&msg); err != nil {
+				app.lo.Error("error reading widget websocket message", "error", err)
+				break
+			}
+
+			claims, err := validateWidgetMessageJWT(msg.JWT)
+			if err != nil {
+				app.lo.Error("invalid JWT in widget message", "error", err)
+				sendWidgetError(conn, "Invalid JWT token")
+				continue
+			}
+
+			switch msg.Type {
+			// Join conversation request.
+			case WidgetMsgTypeJoin:
+				if err := handleWidgetJoin(app, conn, &msg, claims); err != nil {
+					app.lo.Error("error handling widget join", "error", err)
+					sendWidgetError(conn, "Failed to join conversation")
+					continue
+				}
+			// Typing.
+			case WidgetMsgTypeTyping:
+				if err := handleWidgetTyping(app, &msg, claims); err != nil {
+					app.lo.Error("error handling widget typing", "error", err)
+					continue
+				}
+			}
+		}
+	}); err != nil {
+		app.lo.Error("error upgrading widget websocket connection", "error", err)
+	}
+	return nil
+}
+
+// handleWidgetJoin handles a client joining a conversation
+func handleWidgetJoin(app *App, conn *websocket.Conn, msg *WidgetMessage, claims Claims) error {
+	userID := claims.UserID
+
+	joinDataBytes, err := json.Marshal(msg.Data)
+	if err != nil {
+		return fmt.Errorf("invalid join data: %w", err)
+	}
+
+	var joinData WidgetJoinData
+	if err := json.Unmarshal(joinDataBytes, &joinData); err != nil {
+		return fmt.Errorf("invalid join data format: %w", err)
+	}
+
+	// Get conversation to find the inbox
+	conversation, err := app.conversation.GetConversation(0, joinData.ConversationUUID)
+	if err != nil {
+		return fmt.Errorf("conversation not found: %w", err)
+	}
+
+	// Make sure conversation belongs to the user.
+	if conversation.ContactID != userID {
+		return fmt.Errorf("conversation does not belong to the user")
+	}
+
+	// Make sure inbox is active.
+	inbox, err := app.inbox.GetDBRecord(conversation.InboxID)
+	if err != nil {
+		return fmt.Errorf("inbox not found: %w", err)
+	}
+
+	if !inbox.Enabled {
+		return fmt.Errorf("inbox is not enabled")
+	}
+
+	// Get live chat inbox
+	lcInbox, err := app.inbox.Get(inbox.ID)
+	if err != nil {
+		return fmt.Errorf("live chat inbox not found: %w", err)
+	}
+
+	// Assert type.
+	chatInbox, ok := lcInbox.(*livechat.LiveChat)
+	if !ok {
+		return fmt.Errorf("inbox is not a live chat inbox")
+	}
+
+	// Add client to live chat session
+	userIDStr := fmt.Sprintf("%d", userID)
+	client := chatInbox.AddClient(userIDStr, joinData.ConversationUUID)
+
+	// Start listening for messages from the live chat channel
+	go func() {
+		for msgData := range client.Channel {
+			// Forward message to WebSocket client
+			if err := conn.WriteMessage(websocket.TextMessage, msgData); err != nil {
+				app.lo.Error("error forwarding message to widget client", "error", err)
+				return
+			}
+		}
+	}()
+
+	// Send join confirmation
+	joinResp := WidgetMessage{
+		Type: WidgetMsgTypeStatus,
+		Data: map[string]string{
+			"message":           "Joined conversation successfully",
+			"conversation_uuid": joinData.ConversationUUID,
+		},
+	}
+
+	return conn.WriteJSON(joinResp)
+}
+
+// handleWidgetTyping handles typing indicators
+func handleWidgetTyping(app *App, msg *WidgetMessage, claims Claims) error {
+	userID := claims.UserID
+	typingDataBytes, err := json.Marshal(msg.Data)
+	if err != nil {
+		app.lo.Error("error marshalling typing data", "error", err)
+		return fmt.Errorf("invalid typing data: %w", err)
+	}
+
+	var typingData WidgetTypingData
+	if err := json.Unmarshal(typingDataBytes, &typingData); err != nil {
+		app.lo.Error("error unmarshalling typing data", "error", err)
+		return fmt.Errorf("invalid typing data format: %w", err)
+	}
+	// TODO: broadcast typing data to all clients in the conversation.
+	app.lo.Debug("Received typing data for user", "user_id", userID, "is_typing", typingData.IsTyping)
+	return nil
+}
+
+// validateWidgetMessageJWT validates the incoming widget message JWT and returns the claims
+func validateWidgetMessageJWT(jwt string) (Claims, error) {
+	// Verify JWT
+	claims, err := verifyStandardJWT(jwt)
+	if err != nil {
+		return Claims{}, fmt.Errorf("invalid JWT token: %w", err)
+	}
+
+	// Return claims as a map
+	return claims, nil
+}
+
+// sendWidgetError sends an error message to the widget client
+func sendWidgetError(conn *websocket.Conn, message string) {
+	errorMsg := WidgetMessage{
+		Type: WidgetMsgTypeError,
+		Data: map[string]string{
+			"message": message,
+		},
+	}
+	conn.WriteJSON(errorMsg)
+}

frontend/README-SETUP.md

@@ -0,0 +1,59 @@
+# Libredesk Frontend - Multi-App Setup
+
+This frontend supports both the main Libredesk application and a chat widget as separate Vue applications sharing common UI components.
+
+## Project Structure
+
+```
+frontend/
+├── apps/
+│   ├── main/          # Main Libredesk application
+│   │   ├── src/
+│   │   └── index.html
+│   └── widget/        # Chat widget application
+│       ├── src/
+│       └── index.html
+├── shared-ui/         # Shared UI components (shadcn/ui)
+│   ├── components/
+│   │   └── ui/        # shadcn/ui components
+│   ├── lib/           # Utility functions
+│   └── assets/        # Shared styles
+└── package.json
+```
+
+## Development
+
+Check Makefile for available commands.
+
+## Shared UI Components
+
+The `shared-ui` directory contains all the shadcn/ui components that can be used in both apps.
+
+### Using Shared Components
+
+```vue
+<script setup>
+import { Button } from '@shared-ui/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@shared-ui/components/ui/card'
+import { Input } from '@shared-ui/components/ui/input'
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Example Card</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <Input placeholder="Type something..." />
+      <Button>Submit</Button>
+    </CardContent>
+  </Card>
+</template>
+```
+
+### Path Aliases
+
+- `@shared-ui` - Points to the shared-ui directory
+- `@main` - Points to apps/main/src
+- `@widget` - Points to apps/widget/src
+- `@` - Points to the current app's src directory (context-dependent)

frontend/apps/main/src/App.vue

@@ -112,26 +112,26 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { RouterView } from 'vue-router'
-import { useUserStore } from '@/stores/user'
-import { initWS } from '@/websocket.js'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
-import { useEmitter } from '@/composables/useEmitter'
-import { handleHTTPError } from '@/utils/http'
+import { useUserStore } from './stores/user'
+import { initWS } from './websocket.js'
+import { EMITTER_EVENTS } from './constants/emitterEvents.js'
+import { useEmitter } from './composables/useEmitter'
+import { handleHTTPError } from './utils/http'
 import { useConversationStore } from './stores/conversation'
-import { useInboxStore } from '@/stores/inbox'
-import { useUsersStore } from '@/stores/users'
-import { useTeamStore } from '@/stores/team'
-import { useSlaStore } from '@/stores/sla'
-import { useMacroStore } from '@/stores/macro'
-import { useTagStore } from '@/stores/tag'
-import { useCustomAttributeStore } from '@/stores/customAttributes'
-import { useIdleDetection } from '@/composables/useIdleDetection'
+import { useInboxStore } from './stores/inbox'
+import { useUsersStore } from './stores/users'
+import { useTeamStore } from './stores/team'
+import { useSlaStore } from './stores/sla'
+import { useMacroStore } from './stores/macro'
+import { useTagStore } from './stores/tag'
+import { useCustomAttributeStore } from './stores/customAttributes'
+import { useIdleDetection } from './composables/useIdleDetection'
 import PageHeader from './components/layout/PageHeader.vue'
 import ViewForm from '@/features/view/ViewForm.vue'
-import AppUpdate from '@/components/update/AppUpdate.vue'
-import api from '@/api'
+import AppUpdate from '@main/components/update/AppUpdate.vue'
+import api from './api'
 import { toast as sooner } from 'vue-sonner'
-import Sidebar from '@/components/sidebar/Sidebar.vue'
+import Sidebar from '@main/components/sidebar/Sidebar.vue'
 import Command from '@/features/command/CommandBox.vue'
 import CreateConversation from '@/features/conversation/CreateConversation.vue'
 import { Inbox, Shield, FileLineChart, BookUser } from 'lucide-vue-next'
@@ -147,9 +147,9 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider
-} from '@/components/ui/sidebar'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import SidebarNavUser from '@/components/sidebar/SidebarNavUser.vue'
+} from '@shared-ui/components/ui/sidebar'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@shared-ui/components/ui/tooltip'
+import SidebarNavUser from '@main/components/sidebar/SidebarNavUser.vue'
 
 const route = useRoute()
 const emitter = useEmitter()

frontend/apps/main/src/OuterApp.vue

@@ -5,8 +5,8 @@
 <script setup>
 import { onMounted } from 'vue'
 import { RouterView } from 'vue-router'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
-import { useEmitter } from '@/composables/useEmitter'
+import { EMITTER_EVENTS } from './constants/emitterEvents.js'
+import { useEmitter } from './composables/useEmitter'
 import { toast as sooner } from 'vue-sonner'
 
 const emitter = useEmitter()

frontend/apps/main/src/Root.vue

@@ -7,6 +7,6 @@
 
 <script setup>
 import { RouterView } from 'vue-router'
-import { Toaster } from '@/components/ui/sonner'
-import { TooltipProvider } from '@/components/ui/tooltip'
+import { Toaster } from '@shared-ui/components/ui/sonner'
+import { TooltipProvider } from '@shared-ui/components/ui/tooltip'
 </script>

frontend/apps/main/src/components/button/CloseButton.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import { Button } from '@/components/ui/button'
+import { Button } from '@shared-ui/components/ui/button'
 import { X } from 'lucide-vue-next'
 
 defineProps({

frontend/apps/main/src/components/combobox/SelectCombobox.vue

@@ -42,8 +42,8 @@
 
 <script setup>
 import { computed } from 'vue'
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
-import ComboBox from '@/components/ui/combobox/ComboBox.vue'
+import { Avatar, AvatarImage, AvatarFallback } from '@shared-ui/components/ui/avatar'
+import ComboBox from '@shared-ui/components/ui/combobox/ComboBox.vue'
 
 const props = defineProps({
   modelValue: [String, Number, Object],

frontend/apps/main/src/components/datatable/DataTable.vue

@@ -51,7 +51,7 @@ import {
   TableHead,
   TableHeader,
   TableRow
-} from '@/components/ui/table'
+} from '@shared-ui/components/ui/table'
 
 const { t } = useI18n()
 const props = defineProps({

frontend/apps/main/src/components/editor/TextEditor.vue

@@ -102,14 +102,14 @@ import {
   Check,
   X
 } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
+import { Button } from '@shared-ui/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-import { Input } from '@/components/ui/input'
+} from '@shared-ui/components/ui/dropdown-menu'
+import { Input } from '@shared-ui/components/ui/input'
 import Placeholder from '@tiptap/extension-placeholder'
 import Image from '@tiptap/extension-image'
 import StarterKit from '@tiptap/starter-kit'

frontend/apps/main/src/components/filter/FilterBuilder.vue

@@ -120,13 +120,13 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
+} from '@shared-ui/components/ui/select'
 import { Plus } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
+import { Button } from '@shared-ui/components/ui/button'
+import { Input } from '@shared-ui/components/ui/input'
 import { useI18n } from 'vue-i18n'
-import CloseButton from '@/components/button/CloseButton.vue'
-import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
+import CloseButton from '@main/components/button/CloseButton.vue'
+import SelectComboBox from '@main/components/combobox/SelectCombobox.vue'
 
 const props = defineProps({
   fields: {

frontend/apps/main/src/components/layout/PageHeader.vue

@@ -12,8 +12,8 @@
 
 <script setup>
 import { computed } from 'vue'
-import { Separator } from '@/components/ui/separator'
-import { SidebarTrigger } from '@/components/ui/sidebar'
+import { Separator } from '@shared-ui/components/ui/separator'
+import { SidebarTrigger } from '@shared-ui/components/ui/sidebar'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()

frontend/apps/main/src/components/sidebar/Sidebar.vue

@@ -4,9 +4,9 @@ import {
   reportsNavItems,
   accountNavItems,
   contactNavItems
-} from '@/constants/navigation'
+} from '../../constants/navigation'
 import { RouterLink, useRoute, useRouter } from 'vue-router'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@shared-ui/components/ui/collapsible'
 import {
   Sidebar,
   SidebarContent,
@@ -21,8 +21,8 @@ import {
   SidebarMenuSubItem,
   SidebarProvider,
   SidebarRail
-} from '@/components/ui/sidebar'
-import { useAppSettingsStore } from '@/stores/appSettings'
+} from '@shared-ui/components/ui/sidebar'
+import { useAppSettingsStore } from '../../stores/appSettings'
 import {
   ChevronRight,
   EllipsisVertical,
@@ -37,13 +37,13 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-import { filterNavItems } from '@/utils/nav-permissions'
+} from '@shared-ui/components/ui/dropdown-menu'
+import { filterNavItems } from '../../utils/nav-permissions'
 import { useStorage } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useUserStore } from '@/stores/user'
-import { useConversationStore } from '@/stores/conversation'
+import { useUserStore } from '../../stores/user'
+import { useConversationStore } from '../../stores/conversation'
 
 defineProps({
   userTeams: { type: Array, default: () => [] },

frontend/apps/main/src/components/sidebar/SidebarNavUser.vue

@@ -118,12 +118,12 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-import { SidebarMenuButton } from '@/components/ui/sidebar'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { Switch } from '@/components/ui/switch'
+} from '@shared-ui/components/ui/dropdown-menu'
+import { SidebarMenuButton } from '@shared-ui/components/ui/sidebar'
+import { Avatar, AvatarFallback, AvatarImage } from '@shared-ui/components/ui/avatar'
+import { Switch } from '@shared-ui/components/ui/switch'
 import { ChevronsUpDown, CircleUserRound, LogOut, Moon, Sun } from 'lucide-vue-next'
-import { useUserStore } from '@/stores/user'
+import { useUserStore } from '../../stores/user'
 import { useRouter } from 'vue-router'
 
 import { useColorMode } from '@vueuse/core'

frontend/apps/main/src/components/table/SimpleTable.vue

@@ -71,8 +71,8 @@
 <script setup>
 import { Trash2 } from 'lucide-vue-next'
 import { defineEmits } from 'vue'
-import { Button } from '@/components/ui/button'
-import { Skeleton } from '@/components/ui/skeleton'
+import { Button } from '@shared-ui/components/ui/button'
+import { Skeleton } from '@shared-ui/components/ui/skeleton'
 
 defineProps({
   headers: {

frontend/apps/main/src/components/update/AppUpdate.vue

@@ -20,6 +20,6 @@
 </template>
 
 <script setup>
-import { useAppSettingsStore } from '@/stores/appSettings'
+import { useAppSettingsStore } from '../../stores/appSettings'
 const appSettingsStore = useAppSettingsStore()
 </script>

frontend/apps/main/src/composables/useActivityLogFilters.js

@@ -1,6 +1,6 @@
 import { computed } from 'vue'
-import { useUsersStore } from '@/stores/users'
-import { FIELD_TYPE, FIELD_OPERATORS } from '@/constants/filterConfig'
+import { useUsersStore } from '../stores/users'
+import { FIELD_TYPE, FIELD_OPERATORS } from '../constants/filterConfig'
 import { useI18n } from 'vue-i18n'
 
 export function useActivityLogFilters () {

frontend/apps/main/src/composables/useConversationFilters.js

@@ -1,11 +1,11 @@
 import { computed } from 'vue'
-import { useConversationStore } from '@/stores/conversation'
-import { useInboxStore } from '@/stores/inbox'
-import { useUsersStore } from '@/stores/users'
-import { useTeamStore } from '@/stores/team'
-import { useSlaStore } from '@/stores/sla'
-import { useCustomAttributeStore } from '@/stores/customAttributes'
-import { FIELD_TYPE, FIELD_OPERATORS } from '@/constants/filterConfig'
+import { useConversationStore } from '../stores/conversation'
+import { useInboxStore } from '../stores/inbox'
+import { useUsersStore } from '../stores/users'
+import { useTeamStore } from '../stores/team'
+import { useSlaStore } from '../stores/sla'
+import { useCustomAttributeStore } from '../stores/customAttributes'
+import { FIELD_TYPE, FIELD_OPERATORS } from '../constants/filterConfig'
 import { useI18n } from 'vue-i18n'
 
 export function useConversationFilters () {

frontend/apps/main/src/composables/useFileUpload.js

@@ -1,8 +1,8 @@
 import { ref, readonly } from 'vue'
-import { useEmitter } from '@/composables/useEmitter'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
-import { handleHTTPError } from '@/utils/http'
-import api from '@/api'
+import { useEmitter } from './useEmitter'
+import { EMITTER_EVENTS } from '../constants/emitterEvents.js'
+import { handleHTTPError } from '../utils/http'
+import api from '../api'
 
 /**
  * Composable for handling file uploads

frontend/apps/main/src/composables/useIdleDetection.js

@@ -1,6 +1,6 @@
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
-import { useUserStore } from '@/stores/user'
-import { debounce } from '@/utils/debounce'
+import { useUserStore } from '../stores/user'
+import { debounce } from '../utils/debounce'
 import { useStorage } from '@vueuse/core'
 
 export function useIdleDetection () {

frontend/apps/main/src/composables/useSla.js

@@ -1,5 +1,5 @@
 import { ref, onMounted, onUnmounted } from 'vue'
-import { calculateSla } from '@/utils/sla'
+import { calculateSla } from '../utils/sla'
 
 export function useSla (dueAt, actualAt) {
     const sla = ref(null)

frontend/apps/main/src/features/admin/activity-log/ActivityLog.vue

@@ -148,7 +148,7 @@
 
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
-import SimpleTable from '@/components/table/SimpleTable.vue'
+import SimpleTable from '@main/components/table/SimpleTable.vue'
 import {
   Pagination,
   PaginationEllipsis,
@@ -158,23 +158,23 @@ import {
   PaginationListItem,
   PaginationNext,
   PaginationPrev
-} from '@/components/ui/pagination'
+} from '@shared-ui/components/ui/pagination'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
-import FilterBuilder from '@/components/filter/FilterBuilder.vue'
-import { Button } from '@/components/ui/button'
+} from '@shared-ui/components/ui/select'
+import FilterBuilder from '@main/components/filter/FilterBuilder.vue'
+import { Button } from '@shared-ui/components/ui/button'
 import { ListFilter, ArrowDownWideNarrow } from 'lucide-vue-next'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { useActivityLogFilters } from '@/composables/useActivityLogFilters'
+import { Popover, PopoverContent, PopoverTrigger } from '@shared-ui/components/ui/popover'
+import { useActivityLogFilters } from '../../../composables/useActivityLogFilters'
 import { useI18n } from 'vue-i18n'
 import { format } from 'date-fns'
-import { getVisiblePages } from '@/utils/pagination'
-import api from '@/api'
+import { getVisiblePages } from '../../../utils/pagination'
+import api from '../../../api'
 
 const activityLogs = ref([])
 const { t } = useI18n()

frontend/apps/main/src/features/admin/agents/AgentForm.vue

@@ -304,17 +304,17 @@
 
 <script setup>
 import { watch, onMounted, ref, computed } from 'vue'
-import { Button } from '@/components/ui/button'
+import { Button } from '@shared-ui/components/ui/button/index.js'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema.js'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Label } from '@/components/ui/label'
+import { Checkbox } from '@shared-ui/components/ui/checkbox/index.js'
+import { Label } from '@shared-ui/components/ui/label/index.js'
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
-import { Badge } from '@/components/ui/badge'
+import { Badge } from '@shared-ui/components/ui/badge/index.js'
 import { Clock, LogIn, Key, RotateCcw, Trash2, Plus, Copy, AlertTriangle } from 'lucide-vue-next'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@shared-ui/components/ui/form/index.js'
+import { Avatar, AvatarFallback, AvatarImage } from '@shared-ui/components/ui/avatar/index.js'
 import {
   Select,
   SelectContent,
@@ -322,9 +322,9 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
-import { SelectTag } from '@/components/ui/select'
-import { Input } from '@/components/ui/input'
+} from '@shared-ui/components/ui/select/index.js'
+import { SelectTag } from '@shared-ui/components/ui/select/index.js'
+import { Input } from '@shared-ui/components/ui/input/index.js'
 import {
   Dialog,
   DialogContent,
@@ -332,13 +332,13 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle
-} from '@/components/ui/dialog'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+} from '@shared-ui/components/ui/dialog/index.js'
+import { Alert, AlertDescription, AlertTitle } from '@shared-ui/components/ui/alert/index.js'
 import { useI18n } from 'vue-i18n'
-import { useEmitter } from '@/composables/useEmitter'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
+import { useEmitter } from '../../../composables/useEmitter.js'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
 import { format } from 'date-fns'
-import api from '@/api'
+import api from '../../../api/index.js'
 
 const props = defineProps({
   initialValues: {

frontend/apps/main/src/features/admin/agents/dataTableDropdown.vue

@@ -40,7 +40,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@shared-ui/components/ui/dropdown-menu'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -50,13 +50,13 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
+} from '@shared-ui/components/ui/alert-dialog'
+import { Button } from '@shared-ui/components/ui/button'
 import { useRouter } from 'vue-router'
-import { useEmitter } from '@/composables/useEmitter'
-import { handleHTTPError } from '@/utils/http'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
-import api from '@/api'
+import { useEmitter } from '../../../composables/useEmitter'
+import { handleHTTPError } from '../../../utils/http'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
+import api from '../../../api'
 
 const alertOpen = ref(false)
 const emit = useEmitter()

frontend/apps/main/src/features/admin/automation/ActionBox.vue

@@ -87,9 +87,9 @@
 
 <script setup>
 import { toRefs } from 'vue'
-import { Button } from '@/components/ui/button'
-import CloseButton from '@/components/button/CloseButton.vue'
-import { useTagStore } from '@/stores/tag'
+import { Button } from '@shared-ui/components/ui/button'
+import CloseButton from '@main/components/button/CloseButton.vue'
+import { useTagStore } from '../../../stores/tag'
 import {
   Select,
   SelectContent,
@@ -97,13 +97,13 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
-import { SelectTag } from '@/components/ui/select'
-import { useConversationFilters } from '@/composables/useConversationFilters'
-import { getTextFromHTML } from '@/utils/strings.js'
+} from '@shared-ui/components/ui/select'
+import { SelectTag } from '@shared-ui/components/ui/select'
+import { useConversationFilters } from '../../../composables/useConversationFilters'
+import { getTextFromHTML } from '../../../utils/strings.js'
 import { useI18n } from 'vue-i18n'
-import Editor from '@/components/editor/TextEditor.vue'
-import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
+import Editor from '@main/components/editor/TextEditor.vue'
+import SelectComboBox from '@main/components/combobox/SelectCombobox.vue'
 
 const props = defineProps({
   actions: {

frontend/apps/main/src/features/admin/automation/AutomationTabs.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script setup>
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@shared-ui/components/ui/tabs'
 import { useI18n } from 'vue-i18n'
 import RuleTab from './RuleTab.vue'
 

frontend/apps/main/src/features/admin/automation/RuleBox.vue

@@ -190,10 +190,10 @@
 
 <script setup>
 import { toRefs, computed, watch } from 'vue'
-import { Checkbox } from '@/components/ui/checkbox'
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { Button } from '@/components/ui/button'
-import CloseButton from '@/components/button/CloseButton.vue'
+import { Checkbox } from '@shared-ui/components/ui/checkbox'
+import { RadioGroup, RadioGroupItem } from '@shared-ui/components/ui/radio-group'
+import { Button } from '@shared-ui/components/ui/button'
+import CloseButton from '@main/components/button/CloseButton.vue'
 import {
   Select,
   SelectContent,
@@ -202,19 +202,19 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
+} from '@shared-ui/components/ui/select'
 import {
   TagsInput,
   TagsInputInput,
   TagsInputItem,
   TagsInputItemDelete,
   TagsInputItemText
-} from '@/components/ui/tags-input'
-import { Label } from '@/components/ui/label'
-import { Input } from '@/components/ui/input'
+} from '@shared-ui/components/ui/tags-input'
+import { Label } from '@shared-ui/components/ui/label'
+import { Input } from '@shared-ui/components/ui/input'
 import { useI18n } from 'vue-i18n'
-import { useConversationFilters } from '@/composables/useConversationFilters'
-import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
+import { useConversationFilters } from '../../../composables/useConversationFilters'
+import SelectComboBox from '@main/components/combobox/SelectCombobox.vue'
 
 const props = defineProps({
   ruleGroup: {

frontend/apps/main/src/features/admin/automation/RuleList.vue

@@ -68,7 +68,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@shared-ui/components/ui/dropdown-menu'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -78,10 +78,10 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+} from '@shared-ui/components/ui/alert-dialog'
 import { EllipsisVertical } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
-import { Badge } from '@/components/ui/badge'
+import { Badge } from '@shared-ui/components/ui/badge'
 
 const router = useRouter()
 const alertOpen = ref(false)

frontend/apps/main/src/features/admin/automation/RuleTab.vue

@@ -64,17 +64,17 @@
 <script setup>
 import { ref, onMounted, watch } from 'vue'
 import RuleList from './RuleList.vue'
-import { Spinner } from '@/components/ui/spinner'
+import { Spinner } from '@shared-ui/components/ui/spinner'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
+} from '@shared-ui/components/ui/select'
 import { Settings } from 'lucide-vue-next'
 import draggable from 'vuedraggable'
-import api from '@/api'
+import api from '../../../api'
 
 const isLoading = ref(false)
 const rules = ref([])

frontend/apps/main/src/features/admin/business-hours/BusinessHoursForm.vue

@@ -167,23 +167,23 @@
 
 <script setup>
 import { ref, watch, reactive, computed } from 'vue'
-import { Button } from '@/components/ui/button'
+import { Button } from '@shared-ui/components/ui/button/index.js'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema.js'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Label } from '@/components/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
-import { Calendar } from '@/components/ui/calendar'
-import { Input } from '@/components/ui/input'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { cn } from '@/lib/utils'
+import { Checkbox } from '@shared-ui/components/ui/checkbox/index.js'
+import { Label } from '@shared-ui/components/ui/label/index.js'
+import { RadioGroup, RadioGroupItem } from '@shared-ui/components/ui/radio-group/index.js'
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@shared-ui/components/ui/form/index.js'
+import { Calendar } from '@shared-ui/components/ui/calendar/index.js'
+import { Input } from '@shared-ui/components/ui/input/index.js'
+import { Popover, PopoverContent, PopoverTrigger } from '@shared-ui/components/ui/popover/index.js'
+import { cn } from '@shared-ui/lib/utils.js'
 import { format } from 'date-fns'
-import { WEEKDAYS } from '@/constants/date'
+import { WEEKDAYS } from '../../../constants/date.js'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
 import { useI18n } from 'vue-i18n'
-import SimpleTable from '@/components/table/SimpleTable.vue'
+import SimpleTable from '@main/components/table/SimpleTable.vue'
 import {
   Dialog,
   DialogContent,
@@ -192,7 +192,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger
-} from '@/components/ui/dialog'
+} from '@shared-ui/components/ui/dialog/index.js'
 
 const props = defineProps({
   initialValues: {

frontend/apps/main/src/features/admin/business-hours/dataTableDropdown.vue

@@ -50,7 +50,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@shared-ui/components/ui/dropdown-menu'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -60,13 +60,13 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
+} from '@shared-ui/components/ui/alert-dialog'
+import { Button } from '@shared-ui/components/ui/button'
 import { useRouter } from 'vue-router'
-import api from '@/api'
-import { useEmitter } from '@/composables/useEmitter'
+import api from '../../../api'
+import { useEmitter } from '../../../composables/useEmitter'
 import { useI18n } from 'vue-i18n'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
 
 const { t } = useI18n()
 const router = useRouter()

frontend/apps/main/src/features/admin/custom-attributes/CustomAttributesForm.vue

@@ -150,14 +150,14 @@ import {
   FormItem,
   FormLabel,
   FormMessage
-} from '@/components/ui/form'
+} from '@shared-ui/components/ui/form'
 import {
   TagsInput,
   TagsInputInput,
   TagsInputItem,
   TagsInputItemDelete,
   TagsInputItemText
-} from '@/components/ui/tags-input'
+} from '@shared-ui/components/ui/tags-input'
 import {
   Select,
   SelectContent,
@@ -165,8 +165,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
-import { Input } from '@/components/ui/input'
+} from '@shared-ui/components/ui/select'
+import { Input } from '@shared-ui/components/ui/input'
 
 const props = defineProps({
   form: {

frontend/apps/main/src/features/admin/custom-attributes/dataTableDropdown.vue

@@ -44,7 +44,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@shared-ui/components/ui/dropdown-menu'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -54,12 +54,12 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
-import { useEmitter } from '@/composables/useEmitter'
-import { handleHTTPError } from '@/utils/http'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
-import api from '@/api'
+} from '@shared-ui/components/ui/alert-dialog'
+import { Button } from '@shared-ui/components/ui/button'
+import { useEmitter } from '../../../composables/useEmitter'
+import { handleHTTPError } from '../../../utils/http'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
+import api from '../../../api'
 
 const alertOpen = ref(false)
 const emit = useEmitter()

frontend/apps/main/src/features/admin/general/GeneralSettingForm.vue

@@ -171,7 +171,7 @@
 
 <script setup>
 import { watch, ref, onMounted } from 'vue'
-import { Button } from '@/components/ui/button'
+import { Button } from '@shared-ui/components/ui/button/index.js'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema.js'
@@ -182,7 +182,7 @@ import {
   FormLabel,
   FormMessage,
   FormDescription
-} from '@/components/ui/form'
+} from '@shared-ui/components/ui/form/index.js'
 import {
   Select,
   SelectContent,
@@ -190,21 +190,21 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
+} from '@shared-ui/components/ui/select/index.js'
 import {
   TagsInput,
   TagsInputInput,
   TagsInputItem,
   TagsInputItemDelete,
   TagsInputItemText
-} from '@/components/ui/tags-input'
-import { Input } from '@/components/ui/input'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
-import { useEmitter } from '@/composables/useEmitter'
-import { handleHTTPError } from '@/utils/http'
-import { timeZones } from '@/constants/timezones.js'
+} from '@shared-ui/components/ui/tags-input/index.js'
+import { Input } from '@shared-ui/components/ui/input/index.js'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
+import { useEmitter } from '../../../composables/useEmitter.js'
+import { handleHTTPError } from '../../../utils/http.js'
+import { timeZones } from '../../../constants/timezones.js'
 import { useI18n } from 'vue-i18n'
-import api from '@/api'
+import api from '../../../api/index.js'
 
 const emitter = useEmitter()
 const { t } = useI18n()

frontend/apps/main/src/features/admin/inbox/EmailInboxForm.vue

@@ -360,17 +360,17 @@ import {
   FormLabel,
   FormMessage,
   FormDescription
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { Switch } from '@/components/ui/switch'
-import { Button } from '@/components/ui/button'
+} from '@shared-ui/components/ui/form/index.js'
+import { Input } from '@shared-ui/components/ui/input/index.js'
+import { Switch } from '@shared-ui/components/ui/switch/index.js'
+import { Button } from '@shared-ui/components/ui/button/index.js'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
+} from '@shared-ui/components/ui/select/index.js'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps({

frontend/apps/main/src/features/admin/inbox/InboxDataTableDropDown.vue

@@ -48,7 +48,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@shared-ui/components/ui/dropdown-menu'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -58,8 +58,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
+} from '@shared-ui/components/ui/alert-dialog'
+import { Button } from '@shared-ui/components/ui/button'
 
 const alertOpen = ref(false)
 const props = defineProps({

frontend/apps/main/src/features/admin/inbox/LivechatInboxForm.vue

@@ -0,0 +1,752 @@
+<template>
+  <form @submit="onSubmit" class="space-y-6 w-full">
+    <FormField v-slot="{ componentField }" name="name">
+      <FormItem>
+        <FormLabel>{{ $t('globals.terms.name') }}</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="" v-bind="componentField" />
+        </FormControl>
+        <FormDescription>{{ $t('admin.inbox.name.description') }}</FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <FormField v-slot="{ componentField, handleChange }" name="enabled">
+      <FormItem class="flex flex-row items-center justify-between box p-4">
+        <div class="space-y-0.5">
+          <FormLabel class="text-base">{{ $t('globals.terms.enabled') }}</FormLabel>
+          <FormDescription>{{ $t('admin.inbox.enabled.description') }}</FormDescription>
+        </div>
+        <FormControl>
+          <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+        </FormControl>
+      </FormItem>
+    </FormField>
+
+    <FormField v-slot="{ componentField, handleChange }" name="csat_enabled">
+      <FormItem class="flex flex-row items-center justify-between box p-4">
+        <div class="space-y-0.5">
+          <FormLabel class="text-base">{{ $t('admin.inbox.csatSurveys') }}</FormLabel>
+          <FormDescription>
+            {{ $t('admin.inbox.csatSurveys.description_1') }}<br />
+            {{ $t('admin.inbox.csatSurveys.description_2') }}
+          </FormDescription>
+        </div>
+        <FormControl>
+          <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+        </FormControl>
+      </FormItem>
+    </FormField>
+
+    <!-- Livechat Configuration -->
+    <div class="box p-4 space-y-6">
+      <h3 class="font-semibold">{{ $t('admin.inbox.livechatConfig') }}</h3>
+
+      <FormField v-slot="{ componentField }" name="config.brand_name">
+        <FormItem>
+          <FormLabel>{{ $t('globals.terms.brandName') }}</FormLabel>
+          <FormControl>
+            <Input type="text" placeholder="" v-bind="componentField" />
+          </FormControl>
+          <FormDescription>{{ $t('admin.inbox.livechat.brandName.description') }}</FormDescription>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+
+      <!-- Logo URL -->
+      <FormField v-slot="{ componentField }" name="config.logo_url">
+        <FormItem>
+          <FormLabel>{{ $t('admin.inbox.livechat.logoUrl') }}</FormLabel>
+          <FormControl>
+            <Input type="url" placeholder="https://example.com/logo.png" v-bind="componentField" />
+          </FormControl>
+          <FormDescription>{{ $t('admin.inbox.livechat.logoUrl.description') }}</FormDescription>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+
+      <!-- Secret Key (readonly) -->
+      <div v-if="hasSecretKey">
+        <FormField v-slot="{ componentField }" name="config.secret_key">
+          <FormItem>
+            <FormLabel>{{ $t('admin.inbox.livechat.secretKey') }}</FormLabel>
+            <FormControl>
+              <div class="flex items-center gap-2">
+                <Input
+                  type="text"
+                  v-bind="componentField"
+                  readonly
+                  class="font-mono text-sm bg-muted"
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  @click="copyToClipboard(componentField.modelValue)"
+                >
+                  <Copy class="w-4 h-4" />
+                </Button>
+              </div>
+            </FormControl>
+            <FormDescription>{{
+              $t('admin.inbox.livechat.secretKey.description')
+            }}</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </div>
+
+      <!-- Launcher Configuration -->
+      <div class="space-y-4">
+        <h4 class="font-medium text-foreground">{{ $t('admin.inbox.livechat.launcher') }}</h4>
+
+        <div class="grid grid-cols-2 gap-4">
+          <!-- Launcher Position -->
+          <FormField v-slot="{ componentField }" name="config.launcher.position">
+            <FormItem>
+              <FormLabel>{{ $t('admin.inbox.livechat.launcher.position') }}</FormLabel>
+              <FormControl>
+                <Select v-bind="componentField">
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select position" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="left">{{
+                      $t('admin.inbox.livechat.launcher.position.left')
+                    }}</SelectItem>
+                    <SelectItem value="right">{{
+                      $t('admin.inbox.livechat.launcher.position.right')
+                    }}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <!-- Launcher Logo -->
+          <FormField v-slot="{ componentField }" name="config.launcher.logo_url">
+            <FormItem>
+              <FormLabel>{{ $t('admin.inbox.livechat.launcher.logo') }}</FormLabel>
+              <FormControl>
+                <Input
+                  type="url"
+                  placeholder="https://example.com/launcher-logo.png"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+          <!-- Launcher Spacing Side -->
+          <FormField v-slot="{ componentField }" name="config.launcher.spacing.side">
+            <FormItem>
+              <FormLabel>{{ $t('admin.inbox.livechat.launcher.spacing.side') }}</FormLabel>
+              <FormControl>
+                <Input type="number" placeholder="20" v-bind="componentField" />
+              </FormControl>
+              <FormDescription>{{
+                $t('admin.inbox.livechat.launcher.spacing.side.description')
+              }}</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <!-- Launcher Spacing Bottom -->
+          <FormField v-slot="{ componentField }" name="config.launcher.spacing.bottom">
+            <FormItem>
+              <FormLabel>{{ $t('admin.inbox.livechat.launcher.spacing.bottom') }}</FormLabel>
+              <FormControl>
+                <Input type="number" placeholder="20" v-bind="componentField" />
+              </FormControl>
+              <FormDescription>{{
+                $t('admin.inbox.livechat.launcher.spacing.bottom.description')
+              }}</FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+      </div>
+
+      <!-- Messages -->
+      <div class="space-y-4">
+        <h4 class="font-medium text-foreground">{{ $t('admin.inbox.livechat.messages') }}</h4>
+
+        <FormField v-slot="{ componentField }" name="config.greeting_message">
+          <FormItem>
+            <FormLabel>{{ $t('admin.inbox.livechat.greetingMessage') }}</FormLabel>
+            <FormControl>
+              <Textarea
+                v-bind="componentField"
+                placeholder="Welcome! How can we help you today?"
+                rows="2"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="config.introduction_message">
+          <FormItem>
+            <FormLabel>{{ $t('admin.inbox.livechat.introductionMessage') }}</FormLabel>
+            <FormControl>
+              <Textarea v-bind="componentField" placeholder="We're here to help!" rows="2" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="config.chat_introduction">
+          <FormItem>
+            <FormLabel>{{ $t('admin.inbox.livechat.chatIntroduction') }}</FormLabel>
+            <FormControl>
+              <Textarea
+                v-bind="componentField"
+                placeholder="Ask us anything, or share your feedback."
+                rows="2"
+              />
+            </FormControl>
+            <FormDescription>{{
+              $t('admin.inbox.livechat.chatIntroduction.description')
+            }}</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </div>
+
+      <!-- Office Hours -->
+      <div class="space-y-4">
+        <h4 class="font-medium text-foreground">{{ $t('admin.inbox.livechat.officeHours') }}</h4>
+
+        <FormField
+          v-slot="{ componentField, handleChange }"
+          name="config.show_office_hours_in_chat"
+        >
+          <FormItem class="flex flex-row items-center justify-between box p-4">
+            <div class="space-y-0.5">
+              <FormLabel class="text-base">{{
+                $t('admin.inbox.livechat.showOfficeHoursInChat')
+              }}</FormLabel>
+              <FormDescription>{{
+                $t('admin.inbox.livechat.showOfficeHoursInChat.description')
+              }}</FormDescription>
+            </div>
+            <FormControl>
+              <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+            </FormControl>
+          </FormItem>
+        </FormField>
+
+        <FormField
+          v-slot="{ componentField, handleChange }"
+          name="config.show_office_hours_after_assignment"
+        >
+          <FormItem class="flex flex-row items-center justify-between box p-4">
+            <div class="space-y-0.5">
+              <FormLabel class="text-base">{{
+                $t('admin.inbox.livechat.showOfficeHoursAfterAssignment')
+              }}</FormLabel>
+              <FormDescription>{{
+                $t('admin.inbox.livechat.showOfficeHoursAfterAssignment.description')
+              }}</FormDescription>
+            </div>
+            <FormControl>
+              <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+            </FormControl>
+          </FormItem>
+        </FormField>
+      </div>
+
+      <!-- Notice Banner -->
+      <div class="space-y-4">
+        <h4 class="font-medium text-foreground">{{ $t('admin.inbox.livechat.noticeBanner') }}</h4>
+
+        <FormField v-slot="{ componentField, handleChange }" name="config.notice_banner.enabled">
+          <FormItem class="flex flex-row items-center justify-between box p-4">
+            <div class="space-y-0.5">
+              <FormLabel class="text-base">{{
+                $t('admin.inbox.livechat.noticeBanner.enabled')
+              }}</FormLabel>
+              <FormDescription>{{
+                $t('admin.inbox.livechat.noticeBanner.enabled.description')
+              }}</FormDescription>
+            </div>
+            <FormControl>
+              <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+            </FormControl>
+          </FormItem>
+        </FormField>
+
+        <FormField
+          v-slot="{ componentField }"
+          name="config.notice_banner.text"
+          v-if="form.values.config?.notice_banner?.enabled"
+        >
+          <FormItem>
+            <FormLabel>{{ $t('admin.inbox.livechat.noticeBanner.text') }}</FormLabel>
+            <FormControl>
+              <Textarea
+                v-bind="componentField"
+                placeholder="Our response times are slower than usual. We're working hard to get to your message."
+                rows="2"
+              />
+            </FormControl>
+            <FormDescription>{{
+              $t('admin.inbox.livechat.noticeBanner.text.description')
+            }}</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </div>
+
+      <!-- Colors -->
+      <div class="space-y-4">
+        <h4 class="font-medium text-foreground">{{ $t('admin.inbox.livechat.colors') }}</h4>
+
+        <div class="grid grid-cols-2 gap-4">
+          <FormField v-slot="{ componentField }" name="config.colors.primary">
+            <FormItem>
+              <FormLabel>{{ $t('admin.inbox.livechat.colors.primary') }}</FormLabel>
+              <FormControl>
+                <Input type="color" v-bind="componentField" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{ componentField }" name="config.colors.background">
+            <FormItem>
+              <FormLabel>{{ $t('admin.inbox.livechat.colors.background') }}</FormLabel>
+              <FormControl>
+                <Input type="color" v-bind="componentField" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+      </div>
+
+      <!-- Features -->
+      <div class="space-y-4">
+        <h4 class="font-medium text-foreground">{{ $t('admin.inbox.livechat.features') }}</h4>
+
+        <div class="space-y-3">
+          <FormField v-slot="{ componentField, handleChange }" name="config.features.file_upload">
+            <FormItem class="flex flex-row items-center justify-between box p-4">
+              <div class="space-y-0.5">
+                <FormLabel class="text-base">{{
+                  $t('admin.inbox.livechat.features.fileUpload')
+                }}</FormLabel>
+                <FormDescription>{{
+                  $t('admin.inbox.livechat.features.fileUpload.description')
+                }}</FormDescription>
+              </div>
+              <FormControl>
+                <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+              </FormControl>
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{ componentField, handleChange }" name="config.features.emoji">
+            <FormItem class="flex flex-row items-center justify-between box p-4">
+              <div class="space-y-0.5">
+                <FormLabel class="text-base">{{
+                  $t('admin.inbox.livechat.features.emoji')
+                }}</FormLabel>
+                <FormDescription>{{
+                  $t('admin.inbox.livechat.features.emoji.description')
+                }}</FormDescription>
+              </div>
+              <FormControl>
+                <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+              </FormControl>
+            </FormItem>
+          </FormField>
+
+          <FormField
+            v-slot="{ componentField, handleChange }"
+            name="config.features.allow_close_conversation"
+          >
+            <FormItem class="flex flex-row items-center justify-between box p-4">
+              <div class="space-y-0.5">
+                <FormLabel class="text-base">{{
+                  $t('admin.inbox.livechat.features.allowCloseConversation')
+                }}</FormLabel>
+                <FormDescription>{{
+                  $t('admin.inbox.livechat.features.allowCloseConversation.description')
+                }}</FormDescription>
+              </div>
+              <FormControl>
+                <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+              </FormControl>
+            </FormItem>
+          </FormField>
+        </div>
+      </div>
+
+      <!-- External Links -->
+      <div class="space-y-4">
+        <h4 class="font-medium text-foreground">{{ $t('admin.inbox.livechat.externalLinks') }}</h4>
+
+        <FormField name="config.external_links">
+          <FormItem>
+            <div class="space-y-3">
+              <div
+                v-for="(link, index) in externalLinks"
+                :key="index"
+                class="flex items-center gap-2 p-3 border rounded"
+              >
+                <div class="flex-1 grid grid-cols-2 gap-2">
+                  <Input v-model="link.text" placeholder="Link Text" @input="updateExternalLinks" />
+                  <Input
+                    v-model="link.url"
+                    placeholder="https://example.com"
+                    @input="updateExternalLinks"
+                  />
+                </div>
+                <Button type="button" variant="ghost" size="sm" @click="removeExternalLink(index)">
+                  <X class="w-4 h-4" />
+                </Button>
+              </div>
+
+              <Button type="button" variant="outline" size="sm" @click="addExternalLink">
+                <Plus class="w-4 h-4 mr-2" />
+                {{ $t('admin.inbox.livechat.externalLinks.add') }}
+              </Button>
+            </div>
+            <FormDescription>{{
+              $t('admin.inbox.livechat.externalLinks.description')
+            }}</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </div>
+
+      <!-- Trusted Domains -->
+      <div class="space-y-4">
+        <h4 class="font-medium text-foreground">{{ $t('admin.inbox.livechat.trustedDomains') }}</h4>
+
+        <FormField v-slot="{ componentField }" name="config.trusted_domains">
+          <FormItem>
+            <FormLabel>{{ $t('admin.inbox.livechat.trustedDomains.list') }}</FormLabel>
+            <FormControl>
+              <Textarea
+                v-bind="componentField"
+                placeholder="example.com&#10;subdomain.example.com&#10;another-domain.com"
+                rows="4"
+              />
+            </FormControl>
+            <FormDescription>{{
+              $t('admin.inbox.livechat.trustedDomains.description')
+            }}</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </div>
+    </div>
+
+    <!-- User-specific Settings with Tabs -->
+    <div class="box p-4 space-y-6">
+      <h3 class="font-semibold">{{ $t('admin.inbox.livechat.userSettings') }}</h3>
+
+      <Tabs :model-value="selectedUserTab" @update:model-value="selectedUserTab = $event">
+        <TabsList class="grid w-full grid-cols-2">
+          <TabsTrigger value="visitors">
+            {{ $t('admin.inbox.livechat.userSettings.visitors') }}
+          </TabsTrigger>
+          <TabsTrigger value="users">
+            {{ $t('admin.inbox.livechat.userSettings.users') }}
+          </TabsTrigger>
+        </TabsList>
+
+        <div class="space-y-4 mt-4">
+          <!-- Visitors Settings -->
+          <div v-show="selectedUserTab === 'visitors'" class="space-y-4">
+            <FormField
+              v-slot="{ componentField }"
+              name="config.visitors.start_conversation_button_text"
+            >
+              <FormItem>
+                <FormLabel>{{ $t('admin.inbox.livechat.startConversationButtonText') }}</FormLabel>
+                <FormControl>
+                  <Input v-bind="componentField" placeholder="Start conversation" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+
+            <FormField
+              v-slot="{ componentField, handleChange }"
+              name="config.visitors.allow_start_conversation"
+            >
+              <FormItem class="flex flex-row items-center justify-between box p-4">
+                <div class="space-y-0.5">
+                  <FormLabel class="text-base">{{
+                    $t('admin.inbox.livechat.allowStartConversation')
+                  }}</FormLabel>
+                  <FormDescription>{{
+                    $t('admin.inbox.livechat.allowStartConversation.visitors.description')
+                  }}</FormDescription>
+                </div>
+                <FormControl>
+                  <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+                </FormControl>
+              </FormItem>
+            </FormField>
+
+            <FormField
+              v-slot="{ componentField, handleChange }"
+              name="config.visitors.prevent_multiple_conversations"
+            >
+              <FormItem class="flex flex-row items-center justify-between box p-4">
+                <div class="space-y-0.5">
+                  <FormLabel class="text-base">{{
+                    $t('admin.inbox.livechat.preventMultipleConversations')
+                  }}</FormLabel>
+                  <FormDescription>{{
+                    $t('admin.inbox.livechat.preventMultipleConversations.visitors.description')
+                  }}</FormDescription>
+                </div>
+                <FormControl>
+                  <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+                </FormControl>
+              </FormItem>
+            </FormField>
+          </div>
+
+          <!-- Users Settings -->
+          <div v-show="selectedUserTab === 'users'" class="space-y-4">
+            <FormField
+              v-slot="{ componentField }"
+              name="config.users.start_conversation_button_text"
+            >
+              <FormItem>
+                <FormLabel>{{ $t('admin.inbox.livechat.startConversationButtonText') }}</FormLabel>
+                <FormControl>
+                  <Input v-bind="componentField" placeholder="Start conversation" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+
+            <FormField
+              v-slot="{ componentField, handleChange }"
+              name="config.users.allow_start_conversation"
+            >
+              <FormItem class="flex flex-row items-center justify-between box p-4">
+                <div class="space-y-0.5">
+                  <FormLabel class="text-base">{{
+                    $t('admin.inbox.livechat.allowStartConversation')
+                  }}</FormLabel>
+                  <FormDescription>{{
+                    $t('admin.inbox.livechat.allowStartConversation.users.description')
+                  }}</FormDescription>
+                </div>
+                <FormControl>
+                  <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+                </FormControl>
+              </FormItem>
+            </FormField>
+
+            <FormField
+              v-slot="{ componentField, handleChange }"
+              name="config.users.prevent_multiple_conversations"
+            >
+              <FormItem class="flex flex-row items-center justify-between box p-4">
+                <div class="space-y-0.5">
+                  <FormLabel class="text-base">{{
+                    $t('admin.inbox.livechat.preventMultipleConversations')
+                  }}</FormLabel>
+                  <FormDescription>{{
+                    $t('admin.inbox.livechat.preventMultipleConversations.users.description')
+                  }}</FormDescription>
+                </div>
+                <FormControl>
+                  <Switch :checked="componentField.modelValue" @update:checked="handleChange" />
+                </FormControl>
+              </FormItem>
+            </FormField>
+          </div>
+        </div>
+      </Tabs>
+    </div>
+
+    <Button type="submit" :is-loading="isLoading" :disabled="isLoading">
+      {{ submitLabel }}
+    </Button>
+  </form>
+</template>
+
+<script setup>
+import { watch, computed, ref } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { createFormSchema } from './livechatFormSchema.js'
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription
+} from '@shared-ui/components/ui/form'
+import { Input } from '@shared-ui/components/ui/input'
+import { Textarea } from '@shared-ui/components/ui/textarea'
+import { Switch } from '@shared-ui/components/ui/switch'
+import { Button } from '@shared-ui/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@shared-ui/components/ui/select'
+import { Tabs, TabsList, TabsTrigger } from '@shared-ui/components/ui/tabs'
+import { Copy, Plus, X } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  initialValues: {
+    type: Object,
+    default: () => ({})
+  },
+  submitForm: {
+    type: Function,
+    required: true
+  },
+  submitLabel: {
+    type: String,
+    default: ''
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const { t } = useI18n()
+const selectedUserTab = ref('visitors')
+const externalLinks = ref([])
+
+const form = useForm({
+  validationSchema: toTypedSchema(createFormSchema(t)),
+  initialValues: {
+    name: '',
+    enabled: true,
+    csat_enabled: false,
+    config: {
+      brand_name: '',
+      logo_url: '',
+      secret_key: '',
+      launcher: {
+        position: 'right',
+        logo_url: '',
+        spacing: {
+          side: 20,
+          bottom: 20
+        }
+      },
+      greeting_message: '',
+      introduction_message: '',
+      chat_introduction: 'Ask us anything, or share your feedback.',
+      show_office_hours_in_chat: false,
+      show_office_hours_after_assignment: false,
+      notice_banner: {
+        enabled: false,
+        text: 'Our response times are slower than usual. We regret the inconvenience caused.'
+      },
+      colors: {
+        primary: '#2563eb',
+        background: '#ffffff'
+      },
+      features: {
+        file_upload: true,
+        emoji: true,
+        allow_close_conversation: true
+      },
+      trusted_domains: '',
+      external_links: [],
+      visitors: {
+        start_conversation_button_text: 'Start conversation',
+        allow_start_conversation: true,
+        prevent_multiple_conversations: false
+      },
+      users: {
+        start_conversation_button_text: 'Start conversation',
+        allow_start_conversation: true,
+        prevent_multiple_conversations: false
+      }
+    }
+  }
+})
+
+const submitLabel = computed(() => {
+  return props.submitLabel || t('globals.messages.save')
+})
+
+const hasSecretKey = computed(() => {
+  return form.values.config?.secret_key && form.values.config.secret_key.trim() !== ''
+})
+
+const copyToClipboard = async (text) => {
+  try {
+    await navigator.clipboard.writeText(text)
+    // You could emit a toast here for success feedback
+  } catch (err) {
+    console.error('Failed to copy text: ', err)
+  }
+}
+
+const addExternalLink = () => {
+  externalLinks.value.push({ text: '', url: '' })
+  updateExternalLinks()
+}
+
+const removeExternalLink = (index) => {
+  externalLinks.value.splice(index, 1)
+  updateExternalLinks()
+}
+
+const updateExternalLinks = () => {
+  form.setFieldValue(
+    'config.external_links',
+    externalLinks.value.filter((link) => link.text && link.url)
+  )
+}
+
+const onSubmit = form.handleSubmit(async (values) => {
+  // Transform trusted_domains from textarea to array
+  if (values.config.trusted_domains) {
+    values.config.trusted_domains = values.config.trusted_domains
+      .split('\n')
+      .map((domain) => domain.trim())
+      .filter((domain) => domain)
+  }
+
+  await props.submitForm(values)
+})
+
+watch(
+  () => props.initialValues,
+  (newValues) => {
+    if (Object.keys(newValues).length === 0) {
+      return
+    }
+
+    // Transform trusted_domains array back to textarea format
+    if (newValues.config?.trusted_domains && Array.isArray(newValues.config.trusted_domains)) {
+      newValues.config.trusted_domains = newValues.config.trusted_domains.join('\n')
+    }
+
+    // Set external links for the reactive array
+    if (newValues.config?.external_links) {
+      externalLinks.value = [...newValues.config.external_links]
+    }
+    form.setValues(newValues)
+  },
+  { deep: true, immediate: true }
+)
+</script>

frontend/apps/main/src/features/admin/inbox/formSchema.js

@@ -1,5 +1,5 @@
 import * as z from 'zod'
-import { isGoDuration } from '@/utils/strings'
+import { isGoDuration } from '../../../utils/strings'
 
 export const createFormSchema = (t) => z.object({
   name: z.string().min(1, t('globals.messages.required')),

frontend/apps/main/src/features/admin/inbox/livechatFormSchema.js

@@ -0,0 +1,57 @@
+import { z } from 'zod'
+
+export const createFormSchema = (t) => z.object({
+  name: z.string().min(1, { message: t('globals.messages.required') }),
+  enabled: z.boolean(),
+  csat_enabled: z.boolean(),
+  brand_name: z.string().min(1, { message: t('globals.messages.required') }),
+  config: z.object({
+    logo_url: z.string().url({ message: t('globals.messages.invalidUrl') }).optional().or(z.literal('')),
+    secret_key: z.string().optional(),
+    launcher: z.object({
+      position: z.enum(['left', 'right']),
+      logo_url: z.string().url({ message: t('globals.messages.invalidUrl') }).optional().or(z.literal('')),
+      spacing: z.object({
+        side: z.number().min(0),
+        bottom: z.number().min(0),
+      })
+    }),
+    greeting_message: z.string().optional(),
+    introduction_message: z.string().optional(),
+    chat_introduction: z.string(),
+    show_office_hours_in_chat: z.boolean(),
+    show_office_hours_after_assignment: z.boolean(),
+    notice_banner: z.object({
+      enabled: z.boolean(),
+      text: z.string()
+    }),
+    colors: z.object({
+      primary: z.string().regex(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, {
+        message: t('globals.messages.invalidColor')
+      }),
+      background: z.string().regex(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, {
+        message: t('globals.messages.invalidColor')
+      })
+    }),
+    features: z.object({
+      file_upload: z.boolean(),
+      emoji: z.boolean(),
+      allow_close_conversation: z.boolean()
+    }),
+    trusted_domains: z.string().optional(),
+    external_links: z.array(z.object({
+      text: z.string().min(1),
+      url: z.string().url({ message: t('globals.messages.invalidUrl') })
+    })),
+    visitors: z.object({
+      start_conversation_button_text: z.string(),
+      allow_start_conversation: z.boolean(),
+      prevent_multiple_conversations: z.boolean()
+    }),
+    users: z.object({
+      start_conversation_button_text: z.string(),
+      allow_start_conversation: z.boolean(),
+      prevent_multiple_conversations: z.boolean()
+    })
+  })
+})

frontend/apps/main/src/features/admin/macros/ActionBuilder.vue

@@ -129,7 +129,7 @@
 </template>
 
 <script setup>
-import { Button } from '@/components/ui/button'
+import { Button } from '@shared-ui/components/ui/button'
 import { Plus } from 'lucide-vue-next'
 import {
   Select,
@@ -138,11 +138,11 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
-import CloseButton from '@/components/button/CloseButton.vue'
-import { SelectTag } from '@/components/ui/select'
-import { useTagStore } from '@/stores/tag'
-import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
+} from '@shared-ui/components/ui/select'
+import CloseButton from '@main/components/button/CloseButton.vue'
+import { SelectTag } from '@shared-ui/components/ui/select'
+import { useTagStore } from '../../../stores/tag'
+import SelectComboBox from '@main/components/combobox/SelectCombobox.vue'
 
 const model = defineModel('actions', {
   type: Array,

frontend/apps/main/src/features/admin/macros/MacroForm.vue

@@ -150,17 +150,17 @@
 import { ref, watch, computed } from 'vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { Button } from '@/components/ui/button'
-import { Spinner } from '@/components/ui/spinner'
-import { Input } from '@/components/ui/input'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Button } from '@shared-ui/components/ui/button/index.js'
+import { Spinner } from '@shared-ui/components/ui/spinner/index.js'
+import { Input } from '@shared-ui/components/ui/input/index.js'
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@shared-ui/components/ui/form/index.js'
 import ActionBuilder from '@/features/admin/macros/ActionBuilder.vue'
-import { useConversationFilters } from '@/composables/useConversationFilters'
-import { useUsersStore } from '@/stores/users'
-import { useTeamStore } from '@/stores/team'
-import { getTextFromHTML } from '@/utils/strings.js'
+import { useConversationFilters } from '../../../composables/useConversationFilters.js'
+import { useUsersStore } from '../../../stores/users.js'
+import { useTeamStore } from '../../../stores/team.js'
+import { getTextFromHTML } from '../../../utils/strings.js'
 import { createFormSchema } from './formSchema.js'
-import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
+import SelectComboBox from '@main/components/combobox/SelectCombobox.vue'
 import {
   Select,
   SelectContent,
@@ -169,9 +169,9 @@ import {
   SelectTrigger,
   SelectValue,
   SelectTag
-} from '@/components/ui/select'
+} from '@shared-ui/components/ui/select/index.js'
 import { useI18n } from 'vue-i18n'
-import Editor from '@/components/editor/TextEditor.vue'
+import Editor from '@main/components/editor/TextEditor.vue'
 
 const { macroActions } = useConversationFilters()
 const { t } = useI18n()

frontend/apps/main/src/features/admin/macros/dataTableDropdown.vue

@@ -40,7 +40,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@shared-ui/components/ui/dropdown-menu'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -50,12 +50,12 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
-import { useEmitter } from '@/composables/useEmitter'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
+} from '@shared-ui/components/ui/alert-dialog'
+import { Button } from '@shared-ui/components/ui/button'
+import { useEmitter } from '../../../composables/useEmitter'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
 import { useRouter } from 'vue-router'
-import api from '@/api/index.js'
+import api from '../../../api/index.js'
 
 const router = useRouter()
 const emit = useEmitter()

frontend/apps/main/src/features/admin/macros/formSchema.js

@@ -1,5 +1,5 @@
 import * as z from 'zod'
-import { getTextFromHTML } from '@/utils/strings.js'
+import { getTextFromHTML } from '../../../utils/strings.js'
 
 const actionSchema = () => z.array(
   z.object({

frontend/apps/main/src/features/admin/notification/NotificationSetting.vue

@@ -19,14 +19,14 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import api from '@/api'
+import api from '../../../api'
 import AdminPageWithHelp from '@/layouts/admin/AdminPageWithHelp.vue'
 import { useI18n } from 'vue-i18n'
 import NotificationsForm from './NotificationSettingForm.vue'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
-import { useEmitter } from '@/composables/useEmitter'
-import { handleHTTPError } from '@/utils/http'
-import { Spinner } from '@/components/ui/spinner'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
+import { useEmitter } from '../../../composables/useEmitter'
+import { handleHTTPError } from '../../../utils/http'
+import { Spinner } from '@shared-ui/components/ui/spinner'
 
 const initialValues = ref({})
 const { t } = useI18n()

frontend/apps/main/src/features/admin/notification/NotificationSettingForm.vue

@@ -203,7 +203,7 @@
 
 <script setup>
 import { watch, ref, computed } from 'vue'
-import { Button } from '@/components/ui/button'
+import { Button } from '@shared-ui/components/ui/button/index.js'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema.js'
@@ -214,7 +214,7 @@ import {
   FormLabel,
   FormMessage,
   FormDescription
-} from '@/components/ui/form'
+} from '@shared-ui/components/ui/form/index.js'
 import {
   Select,
   SelectContent,
@@ -222,11 +222,11 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Switch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
-import { Input } from '@/components/ui/input'
+} from '@shared-ui/components/ui/select/index.js'
+import { Checkbox } from '@shared-ui/components/ui/checkbox/index.js'
+import { Switch } from '@shared-ui/components/ui/switch/index.js'
+import { Label } from '@shared-ui/components/ui/label/index.js'
+import { Input } from '@shared-ui/components/ui/input/index.js'
 import { useI18n } from 'vue-i18n'
 
 const isLoading = ref(false)

frontend/apps/main/src/features/admin/notification/formSchema.js

@@ -1,5 +1,5 @@
 import * as z from 'zod';
-import { isGoDuration } from '@/utils/strings';
+import { isGoDuration } from '../../../utils/strings';
 
 export const createFormSchema = (t) => z.object({
     enabled: z.boolean().default(false),

frontend/apps/main/src/features/admin/oidc/OIDCForm.vue

@@ -89,12 +89,12 @@
 
 <script setup>
 import { watch } from 'vue'
-import { Button } from '@/components/ui/button'
+import { Button } from '@shared-ui/components/ui/button/index.js'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema.js'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Label } from '@/components/ui/label'
+import { Checkbox } from '@shared-ui/components/ui/checkbox/index.js'
+import { Label } from '@shared-ui/components/ui/label/index.js'
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
 import { useI18n } from 'vue-i18n'
 import {
@@ -104,7 +104,7 @@ import {
   FormLabel,
   FormMessage,
   FormDescription
-} from '@/components/ui/form'
+} from '@shared-ui/components/ui/form/index.js'
 import {
   Select,
   SelectContent,
@@ -112,8 +112,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
-import { Input } from '@/components/ui/input'
+} from '@shared-ui/components/ui/select/index.js'
+import { Input } from '@shared-ui/components/ui/input/index.js'
 
 const props = defineProps({
   initialValues: {

frontend/apps/main/src/features/admin/oidc/dataTableDropdown.vue

@@ -44,7 +44,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@shared-ui/components/ui/dropdown-menu'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -54,11 +54,11 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
-import api from '@/api'
-import { useEmitter } from '@/composables/useEmitter'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
+} from '@shared-ui/components/ui/alert-dialog'
+import { Button } from '@shared-ui/components/ui/button'
+import api from '../../../api'
+import { useEmitter } from '../../../composables/useEmitter'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
 
 const emit = useEmitter()
 const alertOpen = ref(false)

frontend/apps/main/src/features/admin/roles/RoleForm.vue

@@ -65,16 +65,16 @@
 
 <script setup>
 import { watch, ref, computed } from 'vue'
-import { Button } from '@/components/ui/button'
+import { Button } from '@shared-ui/components/ui/button/index.js'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema.js'
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
-import { Checkbox } from '@/components/ui/checkbox'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
+import { Checkbox } from '@shared-ui/components/ui/checkbox/index.js'
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@shared-ui/components/ui/form/index.js'
+import { Input } from '@shared-ui/components/ui/input/index.js'
 import { useI18n } from 'vue-i18n'
-import { permissions as perms } from '@/constants/permissions.js'
+import { permissions as perms } from '../../../constants/permissions.js'
 
 const props = defineProps({
   initialValues: {

frontend/apps/main/src/features/admin/roles/dataTableDropdown.vue

@@ -49,7 +49,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@shared-ui/components/ui/dropdown-menu'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -59,14 +59,14 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
+} from '@shared-ui/components/ui/alert-dialog'
+import { Button } from '@shared-ui/components/ui/button'
 import { useRouter } from 'vue-router'
-import { useEmitter } from '@/composables/useEmitter'
-import { handleHTTPError } from '@/utils/http'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
-import { Roles } from '@/constants/user'
-import api from '@/api'
+import { useEmitter } from '../../../composables/useEmitter'
+import { handleHTTPError } from '../../../utils/http'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
+import { Roles } from '../../../constants/user'
+import api from '../../../api'
 
 const alertOpen = ref(false)
 const emit = useEmitter()

frontend/apps/main/src/features/admin/sla/SLAForm.vue

@@ -281,7 +281,7 @@ import { watch, computed } from 'vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema'
-import { Button } from '@/components/ui/button'
+import { Button } from '@shared-ui/components/ui/button'
 import {
   X,
   Plus,
@@ -293,7 +293,7 @@ import {
   Bell,
   SlidersHorizontal
 } from 'lucide-vue-next'
-import { useUsersStore } from '@/stores/users'
+import { useUsersStore } from '../../../stores/users'
 import {
   FormControl,
   FormField,
@@ -301,7 +301,7 @@ import {
   FormLabel,
   FormMessage,
   FormDescription
-} from '@/components/ui/form'
+} from '@shared-ui/components/ui/form'
 import {
   Select,
   SelectContent,
@@ -309,10 +309,10 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@/components/ui/select'
+} from '@shared-ui/components/ui/select'
 import { useI18n } from 'vue-i18n'
-import { SelectTag } from '@/components/ui/select'
-import { Input } from '@/components/ui/input'
+import { SelectTag } from '@shared-ui/components/ui/select'
+import { Input } from '@shared-ui/components/ui/input'
 
 const props = defineProps({
   initialValues: {

frontend/apps/main/src/features/admin/sla/dataTableDropdown.vue

@@ -46,7 +46,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@shared-ui/components/ui/dropdown-menu'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -56,14 +56,14 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
+} from '@shared-ui/components/ui/alert-dialog'
+import { Button } from '@shared-ui/components/ui/button'
 import { useRouter } from 'vue-router'
-import api from '@/api'
-import { useEmitter } from '@/composables/useEmitter'
-import { handleHTTPError } from '@/utils/http.js'
+import api from '../../../api'
+import { useEmitter } from '../../../composables/useEmitter'
+import { handleHTTPError } from '../../../utils/http.js'
 import { useI18n } from 'vue-i18n'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
 
 const { t } = useI18n()
 const router = useRouter()

frontend/apps/main/src/features/admin/sla/formSchema.js

@@ -1,5 +1,5 @@
 import * as z from 'zod'
-import { isGoHourMinuteDuration } from '@/utils/strings'
+import { isGoHourMinuteDuration } from '../../../utils/strings'
 
 export const createFormSchema = (t) =>
     z

frontend/apps/main/src/features/admin/status/StatusForm.vue

@@ -23,6 +23,6 @@ import {
   FormItem,
   FormLabel,
   FormMessage
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
+} from '@shared-ui/components/ui/form'
+import { Input } from '@shared-ui/components/ui/input'
 </script>

frontend/apps/main/src/features/admin/status/dataTableDropdown.vue

@@ -76,7 +76,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@shared-ui/components/ui/dropdown-menu/index.js'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -86,8 +86,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
+} from '@shared-ui/components/ui/alert-dialog/index.js'
+import { Button } from '@shared-ui/components/ui/button/index.js'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema.js'
@@ -100,13 +100,13 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger
-} from '@/components/ui/dialog'
-import { CONVERSATION_DEFAULT_STATUSES_LIST } from '@/constants/conversation.js'
-import { useEmitter } from '@/composables/useEmitter'
-import { handleHTTPError } from '@/utils/http'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
+} from '@shared-ui/components/ui/dialog/index.js'
+import { CONVERSATION_DEFAULT_STATUSES_LIST } from '../../../constants/conversation.js'
+import { useEmitter } from '../../../composables/useEmitter.js'
+import { handleHTTPError } from '../../../utils/http.js'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
 import { useI18n } from 'vue-i18n'
-import api from '@/api/index.js'
+import api from '../../../api/index.js'
 
 const { t } = useI18n()
 const isLoading = ref(false)

frontend/apps/main/src/features/admin/tags/TagsForm.vue

@@ -23,6 +23,6 @@ import {
     FormItem,
     FormLabel,
     FormMessage
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
+} from '@shared-ui/components/ui/form'
+import { Input } from '@shared-ui/components/ui/input'
 </script>

frontend/apps/main/src/features/admin/tags/dataTableDropdown.vue

@@ -61,8 +61,8 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-import { Button } from '@/components/ui/button'
+} from '@shared-ui/components/ui/dropdown-menu/index.js'
+import { Button } from '@shared-ui/components/ui/button/index.js'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema.js'
@@ -74,7 +74,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger
-} from '@/components/ui/dialog'
+} from '@shared-ui/components/ui/dialog/index.js'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -84,12 +84,12 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { useEmitter } from '@/composables/useEmitter'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
+} from '@shared-ui/components/ui/alert-dialog/index.js'
+import { useEmitter } from '../../../composables/useEmitter.js'
+import { EMITTER_EVENTS } from '../../../constants/emitterEvents.js'
 import TagsForm from './TagsForm.vue'
 import { useI18n } from 'vue-i18n'
-import api from '@/api/index.js'
+import api from '../../../api/index.js'
 
 const { t } = useI18n()
 const dialogOpen = ref(false)