add instructions for authenticated users for live chat widget

New common CopyButton component for copying text to clipboard

Makefile

@@ -15,7 +15,7 @@ GOPATH ?= $(HOME)/go
 STUFFBIN ?= $(GOPATH)/bin/stuffbin
 
 # The default target to run when `make` is executed.
-.DEFAULT_GOAL := build  
+.DEFAULT_GOAL := build 
 
 # Install stuffbin if it doesn't exist.
 $(STUFFBIN):
@@ -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

README.md

@@ -5,13 +5,11 @@
 
 Modern, open source, self-hosted customer support desk. Single binary app. 
 
-![image](https://libredesk.io/hero_white.png)
+![image](https://libredesk.io/hero.png)
 
 
 Visit [libredesk.io](https://libredesk.io) for more info. Check out the [**Live demo**](https://demo.libredesk.io/).
 
-> **CAUTION:** This project is currently in **alpha**. Features and APIs may change and are not yet fully tested.
-
 ## Features
 
 - **Multi Shared Inbox**  
@@ -85,11 +83,6 @@ __________________
 ## Developers
 If you are interested in contributing, refer to the [developer setup](https://docs.libredesk.io/contributing/developer-setup). The backend is written in Go and the frontend is Vue js 3 with Shadcn for UI components.
 
-## Development Status
-
-Libredesk is under active development.  
-Track roadmap and progress on the GitHub Project Board:   [https://github.com/users/abhinavxd/projects/1](https://github.com/users/abhinavxd/projects/1)
-
 
 ## Translators
 You can help translate Libredesk into your language on [Crowdin](https://crowdin.com/project/libredesk).  

cmd/contacts.go

@@ -276,11 +276,16 @@ func handleBlockContact(r *fastglue.Request) error {
 
 	app.lo.Info("setting contact block status", "contact_id", contactID, "enabled", req.Enabled, "actor_id", auser.ID)
 
-	if err := app.user.ToggleEnabled(contactID, models.UserTypeContact, req.Enabled); err != nil {
+	contact, err := app.user.GetContact(contactID, "")
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	contact, err := app.user.GetContact(contactID, "")
+	if err := app.user.ToggleEnabled(contactID, contact.Type, req.Enabled); err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	contact, err = app.user.GetContact(contactID, "")
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}

cmd/conversation.go

@@ -475,11 +475,6 @@ func handleUpdateConversationStatus(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	// Make sure a user is assigned before resolving conversation.
-	if status == cmodels.StatusResolved && conversation.AssignedUserID.Int == 0 {
-		return sendErrorEnvelope(r, envelope.NewError(envelope.InputError, app.i18n.T("conversation.resolveWithoutAssignee"), nil))
-	}
-
 	// Update conversation status.
 	if err := app.conversation.UpdateConversationStatus(uuid, 0 /**status_id**/, status, snoozedUntil, user); err != nil {
 		return sendErrorEnvelope(r, err)
@@ -584,7 +579,7 @@ func handleUpdateContactCustomAttributes(r *fastglue.Request) error {
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	if err := app.user.UpdateCustomAttributes(conversation.ContactID, attributes); err != nil {
+	if err := app.user.SaveCustomAttributes(conversation.ContactID, attributes, false); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 	// Broadcast update.
@@ -686,11 +681,9 @@ 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,
+		Email:     null.StringFrom(req.Email),
+		FirstName: req.FirstName,
+		LastName:  req.LastName,
 	}
 	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))
@@ -699,7 +692,6 @@ func handleCreateConversation(r *fastglue.Request) error {
 	// Create conversation first.
 	conversationID, conversationUUID, err := app.conversation.CreateConversation(
 		contact.ID,
-		contact.ContactChannelID,
 		req.InboxID,
 		"",         /** last_message **/
 		time.Now(), /** last_message_at **/
@@ -726,7 +718,7 @@ func handleCreateConversation(r *fastglue.Request) error {
 	switch req.Initiator {
 	case umodels.UserTypeAgent:
 		// Queue reply.
-		if _, err := app.conversation.QueueReply(media, req.InboxID, auser.ID /**sender_id**/, conversationUUID, req.Content, to, nil /**cc**/, nil /**bcc**/, map[string]any{} /**meta**/); err != nil {
+		if _, err := app.conversation.QueueReply(media, req.InboxID, auser.ID /**sender_id**/, contact.ID, conversationUUID, req.Content, to, nil /**cc**/, nil /**bcc**/, map[string]any{} /**meta**/); err != nil {
 			// Delete the conversation if msg queue fails.
 			if err := app.conversation.DeleteConversation(conversationUUID); err != nil {
 				app.lo.Error("error deleting conversation", "error", err)

cmd/csat.go

@@ -3,9 +3,15 @@ package main
 import (
 	"strconv"
 
+	"github.com/abhinavxd/libredesk/internal/envelope"
+	"github.com/valyala/fasthttp"
 	"github.com/zerodha/fastglue"
 )
 
+type csatResponse struct {
+	Rating   int    `json:"rating"`
+	Feedback string `json:"feedback"`
+}
 const (
 	maxCsatFeedbackLength = 1000
 )
@@ -76,7 +82,7 @@ func handleUpdateCSATResponse(r *fastglue.Request) error {
 		})
 	}
 
-	if ratingI < 1 || ratingI > 5 {
+	if ratingI < 0 || ratingI > 5 {
 		return app.tmpl.RenderWebPage(r.RequestCtx, "error", map[string]interface{}{
 			"Data": map[string]interface{}{
 				"ErrorMessage": app.i18n.T("globals.messages.somethingWentWrong"),
@@ -112,3 +118,36 @@ func handleUpdateCSATResponse(r *fastglue.Request) error {
 		},
 	})
 }
+
+// handleSubmitCSATResponse handles CSAT response submission from the widget API.
+func handleSubmitCSATResponse(r *fastglue.Request) error {
+	var (
+		app  = r.Context.(*App)
+		uuid = r.RequestCtx.UserValue("uuid").(string)
+		req  = csatResponse{}
+	)
+
+	if err := r.Decode(&req, "json"); err != nil {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Invalid JSON", nil, envelope.InputError)
+	}
+
+	if req.Rating < 0 || req.Rating > 5 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Rating must be between 0 and 5 (0 means no rating)", nil, envelope.InputError)
+	}
+
+	// At least one of rating or feedback must be provided
+	if req.Rating == 0 && req.Feedback == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Either rating or feedback must be provided", nil, envelope.InputError)
+	}
+
+	if uuid == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Invalid UUID", nil, envelope.InputError)
+	}
+
+	// Update CSAT response
+	if err := app.csat.UpdateResponse(uuid, req.Rating, req.Feedback); err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	return r.SendEnvelope(true)
+}

cmd/handlers.go

@@ -1,12 +1,16 @@
 package main
 
 import (
+	"encoding/json"
 	"mime"
 	"net/http"
 	"path"
 	"path/filepath"
+	"strings"
 
 	"github.com/abhinavxd/libredesk/internal/envelope"
+	"github.com/abhinavxd/libredesk/internal/httputil"
+	"github.com/abhinavxd/libredesk/internal/inbox/channel/livechat"
 	"github.com/abhinavxd/libredesk/internal/ws"
 	"github.com/valyala/fasthttp"
 	"github.com/zerodha/fastglue"
@@ -211,13 +215,30 @@ func initHandlers(g *fastglue.Fastglue, hub *ws.Hub) {
 	// Actvity logs.
 	g.GET("/api/v1/activity-logs", perm(handleGetActivityLogs, "activity_logs:manage"))
 
+	// CSAT.
+	g.POST("/api/v1/csat/{uuid}/response", handleSubmitCSATResponse)
+
 	// WebSocket.
 	g.GET("/ws", auth(func(r *fastglue.Request) error {
 		return handleWS(r, hub)
 	}))
 
+	// Live chat widget websocket.
+	g.GET("/widget/ws", handleWidgetWS)
+
+	// Widget APIs.
+	g.GET("/api/v1/widget/chat/settings/launcher", handleGetChatLauncherSettings)
+	g.GET("/api/v1/widget/chat/settings", handleGetChatSettings)
+	g.POST("/api/v1/widget/chat/conversations/init", rateLimitWidget(widgetAuth(handleChatInit)))
+	g.GET("/api/v1/widget/chat/conversations", rateLimitWidget(widgetAuth(handleGetConversations)))
+	g.POST("/api/v1/widget/chat/conversations/{uuid}/update-last-seen", rateLimitWidget(widgetAuth(handleChatUpdateLastSeen)))
+	g.GET("/api/v1/widget/chat/conversations/{uuid}", rateLimitWidget(widgetAuth(handleChatGetConversation)))
+	g.POST("/api/v1/widget/chat/conversations/{uuid}/message", rateLimitWidget(widgetAuth(handleChatSendMessage)))
+	g.POST("/api/v1/widget/media/upload", rateLimitWidget(widgetAuth(handleWidgetMediaUpload)))
+
 	// 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))
@@ -227,8 +248,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)
 
@@ -265,6 +290,77 @@ func serveIndexPage(r *fastglue.Request) error {
 	return nil
 }
 
+// validateWidgetReferer validates the Referer header against trusted domains configured in the live chat inbox settings.
+func validateWidgetReferer(app *App, r *fastglue.Request, inboxID int) error {
+	// Get the Referer header from the request
+	referer := string(r.RequestCtx.Request.Header.Peek("Referer"))
+
+	// If no referer header is present, allow direct access.
+	if referer == "" {
+		return nil
+	}
+
+	// Get inbox configuration
+	inbox, err := app.inbox.GetDBRecord(inboxID)
+	if err != nil {
+		app.lo.Error("error fetching inbox for referer check", "inbox_id", inboxID, "error", err)
+		return r.SendErrorEnvelope(http.StatusNotFound, app.i18n.Ts("globals.messages.notFound", "name", "{globals.terms.inbox}"), nil, envelope.NotFoundError)
+	}
+
+	if !inbox.Enabled {
+		return r.SendErrorEnvelope(http.StatusBadRequest, app.i18n.Ts("globals.messages.disabled", "name", "{globals.terms.inbox}"), nil, envelope.InputError)
+	}
+
+	// Parse the live chat config
+	var config livechat.Config
+	if err := json.Unmarshal(inbox.Config, &config); err != nil {
+		app.lo.Error("error parsing live chat config for referer check", "error", err)
+		return r.SendErrorEnvelope(http.StatusInternalServerError, app.i18n.Ts("globals.messages.invalid", "name", "{globals.terms.inbox}"), nil, envelope.GeneralError)
+	}
+
+	// If trusted domains list is empty, allow all referers
+	if len(config.TrustedDomains) == 0 {
+		return nil
+	}
+
+	// Check if the referer matches any of the trusted domains
+	if !httputil.IsOriginTrusted(referer, config.TrustedDomains) {
+		app.lo.Warn("widget request from untrusted referer blocked",
+			"referer", referer,
+			"inbox_id", inboxID,
+			"trusted_domains", config.TrustedDomains)
+		return r.SendErrorEnvelope(http.StatusForbidden, "Widget not allowed from this origin: "+referer, nil, envelope.PermissionError)
+	}
+	app.lo.Debug("widget request from trusted referer allowed", "referer", referer, "inbox_id", inboxID)
+	return nil
+}
+
+// serveWidgetIndexPage serves the widget index page of the application.
+func serveWidgetIndexPage(r *fastglue.Request) error {
+	app := r.Context.(*App)
+
+	// Extract inbox ID and validate trusted domains if present
+	inboxID := r.RequestCtx.QueryArgs().GetUintOrZero("inbox_id")
+	if err := validateWidgetReferer(app, r, inboxID); err != nil {
+		return err
+	}
+
+	// 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)
@@ -313,6 +409,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

@@ -1,10 +1,12 @@
 package main
 
 import (
+	"encoding/json"
 	"net/mail"
 	"strconv"
 
 	"github.com/abhinavxd/libredesk/internal/envelope"
+	"github.com/abhinavxd/libredesk/internal/inbox/channel/livechat"
 	imodels "github.com/abhinavxd/libredesk/internal/inbox/models"
 	"github.com/valyala/fasthttp"
 	"github.com/zerodha/fastglue"
@@ -160,9 +162,11 @@ func handleDeleteInbox(r *fastglue.Request) error {
 
 // validateInbox validates the inbox
 func validateInbox(app *App, inbox imodels.Inbox) error {
-	// Validate from address.
-	if _, err := mail.ParseAddress(inbox.From); err != nil {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalidFromAddress"), nil)
+	// 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)
@@ -173,5 +177,33 @@ func validateInbox(app *App, inbox imodels.Inbox) error {
 	if inbox.Channel == "" {
 		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "channel"), nil)
 	}
+
+	// Validate livechat-specific configuration
+	if inbox.Channel == livechat.ChannelLiveChat {
+		var config livechat.Config
+		if err := json.Unmarshal(inbox.Config, &config); err == nil {
+			// ShowOfficeHoursAfterAssignment cannot be enabled if ShowOfficeHoursInChat is disabled
+			if config.ShowOfficeHoursAfterAssignment && !config.ShowOfficeHoursInChat {
+				return envelope.NewError(envelope.InputError, "`show_office_hours_after_assignment` cannot be enabled when `show_office_hours_in_chat` is disabled", nil)
+			}
+		}
+
+		// Validate linked email inbox if specified
+		if inbox.LinkedEmailInboxID.Valid {
+			linkedInbox, err := app.inbox.GetDBRecord(int(inbox.LinkedEmailInboxID.Int))
+			if err != nil {
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "linked_email_inbox_id"), nil)
+			}
+			// Ensure linked inbox is an email channel
+			if linkedInbox.Channel != "email" {
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "linked_email_inbox_id"), nil)
+			}
+			// Ensure linked inbox is enabled
+			if !linkedInbox.Enabled {
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "linked_email_inbox_id"), nil)
+			}
+		}
+	}
+
 	return 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"
@@ -35,6 +36,7 @@ import (
 	notifier "github.com/abhinavxd/libredesk/internal/notification"
 	emailnotifier "github.com/abhinavxd/libredesk/internal/notification/providers/email"
 	"github.com/abhinavxd/libredesk/internal/oidc"
+	"github.com/abhinavxd/libredesk/internal/ratelimit"
 	"github.com/abhinavxd/libredesk/internal/report"
 	"github.com/abhinavxd/libredesk/internal/role"
 	"github.com/abhinavxd/libredesk/internal/search"
@@ -132,7 +134,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",
 	}
@@ -223,11 +226,30 @@ func initConversations(
 	template *tmpl.Manager,
 	webhook *webhook.Manager,
 ) *conversation.Manager {
+	continuityConfig := &conversation.ContinuityConfig{}
+
+	if ko.Exists("conversation.continuity.batch_check_interval") {
+		continuityConfig.BatchCheckInterval = ko.MustDuration("conversation.continuity.batch_check_interval")
+	}
+
+	if ko.Exists("conversation.continuity.offline_threshold") {
+		continuityConfig.OfflineThreshold = ko.MustDuration("conversation.continuity.offline_threshold")
+	}
+
+	if ko.Exists("conversation.continuity.min_email_interval") {
+		continuityConfig.MinEmailInterval = ko.MustDuration("conversation.continuity.min_email_interval")
+	}
+
+	if ko.Exists("conversation.continuity.max_messages_per_email") {
+		continuityConfig.MaxMessagesPerEmail = ko.MustInt("conversation.continuity.max_messages_per_email")
+	}
+
 	c, err := conversation.New(hub, i18n, notif, sla, status, priority, inboxStore, userStore, teamStore, mediaStore, settings, csat, automationEngine, template, webhook, conversation.Opts{
 		DB:                       db,
 		Lo:                       initLogger("conversation_manager"),
 		OutgoingMessageQueueSize: ko.MustInt("message.outgoing_queue_size"),
 		IncomingMessageQueueSize: ko.MustInt("message.incoming_queue_size"),
+		ContinuityConfig:         continuityConfig,
 	})
 	if err != nil {
 		log.Fatalf("error initializing conversation manager: %v", err)
@@ -458,6 +480,8 @@ func initMedia(db *sqlx.DB, i18n *i18n.I18n) *media.Manager {
 			UploadURI:  "/uploads",
 			UploadPath: filepath.Clean(ko.String("upload.fs.upload_path")),
 			RootURL:    appRootURL,
+			Expiry:     ko.Duration("upload.fs.expiry"),
+			Secret:     ko.String("upload.fs.secret"),
 		})
 		if err != nil {
 			log.Fatalf("error initializing fs media store: %v", err)
@@ -579,11 +603,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)
 	}
@@ -901,3 +955,12 @@ func getLogLevel(lvl string) logf.Level {
 		return logf.InfoLevel
 	}
 }
+
+// initRateLimit initializes the rate limiter.
+func initRateLimit(redisClient *redis.Client) *ratelimit.Limiter {
+	var config ratelimit.Config
+	if err := ko.UnmarshalWithConf("rate_limit", &config, koanf.UnmarshalConf{Tag: "toml"}); err != nil {
+		log.Fatalf("error unmarshalling rate limit config: %v", err)
+	}
+	return ratelimit.New(redisClient, config)
+}

cmd/main.go

@@ -35,6 +35,7 @@ import (
 	"github.com/abhinavxd/libredesk/internal/inbox"
 	"github.com/abhinavxd/libredesk/internal/media"
 	"github.com/abhinavxd/libredesk/internal/oidc"
+	"github.com/abhinavxd/libredesk/internal/ratelimit"
 	"github.com/abhinavxd/libredesk/internal/role"
 	"github.com/abhinavxd/libredesk/internal/setting"
 	"github.com/abhinavxd/libredesk/internal/tag"
@@ -54,7 +55,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
@@ -94,6 +96,7 @@ type App struct {
 	customAttribute *customAttribute.Manager
 	report          *report.Manager
 	webhook         *webhook.Manager
+	rateLimit       *ratelimit.Limiter
 
 	// Global state that stores data on an available app update.
 	update *AppUpdate
@@ -203,14 +206,20 @@ func main() {
 		sla                         = initSLA(db, team, settings, businessHours, notifier, template, user, i18n)
 		conversation                = initConversations(i18n, sla, status, priority, wsHub, notifier, db, inbox, user, team, media, settings, csat, automation, template, webhook)
 		autoassigner                = initAutoAssigner(team, user, conversation)
+		rateLimiter                 = initRateLimit(rdb)
 	)
+
+	wsHub.SetConversationStore(conversation)
 	automation.SetConversationStore(conversation)
 
+	// Start inboxes.
 	startInboxes(ctx, inbox, conversation, user)
+
 	go automation.Run(ctx, automationWorkers)
 	go autoassigner.Run(ctx, autoAssignInterval)
 	go conversation.Run(ctx, messageIncomingQWorkers, messageOutgoingQWorkers, messageOutgoingScanInterval)
 	go conversation.RunUnsnoozer(ctx, unsnoozeInterval)
+	go conversation.RunContinuity(ctx)
 	go webhook.Run(ctx)
 	go notifier.Run(ctx)
 	go sla.Run(ctx, slaEvaluationInterval)
@@ -250,6 +259,7 @@ func main() {
 		macro:           initMacro(db, i18n),
 		ai:              initAI(db, i18n),
 		webhook:         webhook,
+		rateLimit:       rateLimiter,
 	}
 	app.consts.Store(constants)
 

cmd/media.go

@@ -143,45 +143,51 @@ func handleMediaUpload(r *fastglue.Request) error {
 }
 
 // handleServeMedia serves uploaded media.
+// Supports both authenticated agent access and unauthenticated access via signed URLs.
 func handleServeMedia(r *fastglue.Request) error {
 	var (
-		app   = r.Context.(*App)
-		auser = r.RequestCtx.UserValue("user").(amodels.User)
-		uuid  = r.RequestCtx.UserValue("uuid").(string)
+		app  = r.Context.(*App)
+		uuid = r.RequestCtx.UserValue("uuid").(string)
 	)
 
-	user, err := app.user.GetAgent(auser.ID, "")
-	if err != nil {
-		return sendErrorEnvelope(r, err)
-	}
-
-	// Fetch media from DB.
-	media, err := app.media.Get(0, strings.TrimPrefix(uuid, thumbPrefix))
-	if err != nil {
-		return sendErrorEnvelope(r, err)
-	}
-
-	// Check if the user has permission to access the linked model.
-	allowed, err := app.authz.EnforceMediaAccess(user, media.Model.String)
-	if err != nil {
-		return sendErrorEnvelope(r, err)
-	}
-
-	// For messages, check access to the conversation this message is part of.
-	if media.Model.String == "messages" {
-		conversation, err := app.conversation.GetConversationByMessageID(media.ModelID.Int)
+	// Check if user is authenticated (agent access)
+	auser := r.RequestCtx.UserValue("user")
+	if auser != nil {
+		// Authenticated.
+		user, err := app.user.GetAgent(auser.(amodels.User).ID, "")
 		if err != nil {
 			return sendErrorEnvelope(r, err)
 		}
-		allowed, err = app.authz.EnforceConversationAccess(user, conversation)
+
+		// Fetch media from DB.
+		media, err := app.media.Get(0, strings.TrimPrefix(uuid, thumbPrefix))
 		if err != nil {
 			return sendErrorEnvelope(r, err)
 		}
-	}
 
-	if !allowed {
-		return r.SendErrorEnvelope(http.StatusUnauthorized, app.i18n.Ts("globals.messages.denied", "name", "{globals.terms.permission}"), nil, envelope.UnauthorizedError)
+		// Check if the user has permission to access the linked model.
+		allowed, err := app.authz.EnforceMediaAccess(user, media.Model.String)
+		if err != nil {
+			return sendErrorEnvelope(r, err)
+		}
+
+		// For messages, check access to the conversation this message is part of.
+		if media.Model.String == "messages" {
+			conversation, err := app.conversation.GetConversationByMessageID(media.ModelID.Int)
+			if err != nil {
+				return sendErrorEnvelope(r, err)
+			}
+			allowed, err = app.authz.EnforceConversationAccess(user, conversation)
+			if err != nil {
+				return sendErrorEnvelope(r, err)
+			}
+		}
+
+		if !allowed {
+			return r.SendErrorEnvelope(http.StatusUnauthorized, app.i18n.Ts("globals.messages.denied", "name", "{globals.terms.permission}"), nil, envelope.UnauthorizedError)
+		}
 	}
+	// If no authenticated user, the middleware has already verified the request signature serve the file.
 	consts := app.consts.Load().(*constants)
 	switch consts.UploadProvider {
 	case "fs":

cmd/messages.go

@@ -46,7 +46,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)
 	}
@@ -57,10 +57,11 @@ func handleGetMessages(r *fastglue.Request) error {
 		for j := range messages[i].Attachments {
 			messages[i].Attachments[j].URL = app.media.GetURL(messages[i].Attachments[j].UUID)
 		}
-		// Redact CSAT survey link
-		messages[i].CensorCSATContent()
 	}
 
+	// Process CSAT status for all messages (will only affect CSAT messages)
+	app.conversation.ProcessCSATStatus(messages)
+
 	return r.SendEnvelope(envelope.PageResults{
 		Total:      total,
 		Results:    messages,
@@ -94,8 +95,10 @@ func handleGetMessage(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	// Redact CSAT survey link
-	message.CensorCSATContent()
+	// Process CSAT status for the message (will only affect CSAT messages)
+	messages := []cmodels.Message{message}
+	app.conversation.ProcessCSATStatus(messages)
+	message = messages[0]
 
 	for j := range message.Attachments {
 		message.Attachments[j].URL = app.media.GetURL(message.Attachments[j].UUID)
@@ -155,6 +158,16 @@ func handleSendMessage(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
 
+	// Make sure the inbox is enabled.
+	inbox, err := app.inbox.GetDBRecord(conv.InboxID)
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+	if !inbox.Enabled {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.disabled", "name", "{globals.terms.inbox}"), nil, envelope.InputError)
+	}
+
+	// Prepare attachments.
 	if req.SenderType != umodels.UserTypeAgent && req.SenderType != umodels.UserTypeContact {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`sender_type`"), nil, envelope.InputError)
 	}
@@ -208,8 +221,7 @@ func handleSendMessage(r *fastglue.Request) error {
 		return r.SendEnvelope(message)
 	}
 
-	// Queue reply.
-	message, err := app.conversation.QueueReply(media, conv.InboxID, user.ID, cuuid, req.Message, req.To, req.CC, req.BCC, map[string]any{} /**meta**/)
+	message, err := app.conversation.QueueReply(media, conv.InboxID, user.ID, conv.ContactID, cuuid, req.Message, req.To, req.CC, req.BCC, map[string]any{} /**meta**/)
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}

cmd/middlewares.go

@@ -97,6 +97,23 @@ func auth(handler fastglue.FastRequestHandler) fastglue.FastRequestHandler {
 	return func(r *fastglue.Request) error {
 		var app = r.Context.(*App)
 
+		// For media uploads, check if signature is provided in the query parameters, if so, verify it.
+		path := string(r.RequestCtx.Path())
+		if strings.HasPrefix(path, "/uploads/") {
+			signature := string(r.RequestCtx.QueryArgs().Peek("signature"))
+			expires := string(r.RequestCtx.QueryArgs().Peek("expires"))
+
+			if signature != "" && expires != "" {
+				if err := app.media.VerifySignature(r); err != nil {
+					app.lo.Error("error verifying media signature", "error",
+						err, "path", string(r.RequestCtx.Path()), "query", string(r.RequestCtx.QueryArgs().QueryString()))
+					return r.SendErrorEnvelope(http.StatusUnauthorized, "signature verification failed", nil, envelope.PermissionError)
+				}
+				return handler(r)
+			}
+			// If no signature, continue with normal authentication.
+		}
+
 		// Authenticate user using shared authentication logic
 		user, err := authenticateUser(r, app)
 		if err != nil {

cmd/upgrade.go

@@ -36,6 +36,7 @@ var migList = []migFunc{
 	{"v0.6.0", migrations.V0_6_0},
 	{"v0.7.0", migrations.V0_7_0},
 	{"v0.7.4", migrations.V0_7_4},
+	{"v0.9.0", migrations.V0_9_0},
 }
 
 // upgrade upgrades the database to the current version by running SQL migration files

cmd/users.go

@@ -26,10 +26,6 @@ const (
 	maxAvatarSizeMB = 2
 )
 
-type updateAvailabilityRequest struct {
-	Status string `json:"status"`
-}
-
 type resetPasswordRequest struct {
 	Email string `json:"email"`
 }

cmd/widget_middleware.go

@@ -0,0 +1,167 @@
+package main
+
+import (
+	"fmt"
+	"strconv"
+	"strings"
+
+	"github.com/abhinavxd/libredesk/internal/envelope"
+	"github.com/abhinavxd/libredesk/internal/inbox/channel/livechat"
+	imodels "github.com/abhinavxd/libredesk/internal/inbox/models"
+	"github.com/valyala/fasthttp"
+	"github.com/zerodha/fastglue"
+)
+
+const (
+	// Context keys for storing authenticated widget data
+	ctxWidgetClaims    = "widget_claims"
+	ctxWidgetInboxID   = "widget_inbox_id"
+	ctxWidgetContactID = "widget_contact_id"
+	ctxWidgetInbox     = "widget_inbox"
+
+	// Header sent in every widget request to identify the inbox
+	hdrWidgetInboxID = "X-Libredesk-Inbox-ID"
+)
+
+// widgetAuth middleware authenticates widget requests using JWT and inbox validation.
+// It always validates the inbox from X-Libredesk-Inbox-ID header, and conditionally validates JWT.
+// For /conversations/init without JWT, it allows visitor creation while still validating inbox.
+func widgetAuth(next func(*fastglue.Request) error) func(*fastglue.Request) error {
+	return func(r *fastglue.Request) error {
+		var (
+			app = r.Context.(*App)
+		)
+
+		// Always extract and validate inbox_id from custom header
+		inboxIDHeader := string(r.RequestCtx.Request.Header.Peek(hdrWidgetInboxID))
+		if inboxIDHeader == "" {
+			return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.required", "name", "{globals.terms.inbox}"), nil, envelope.InputError)
+		}
+
+		inboxID, err := strconv.Atoi(inboxIDHeader)
+		if err != nil || inboxID <= 0 {
+			return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "{globals.terms.inbox}"), nil, envelope.InputError)
+		}
+
+		// Always fetch and validate inbox
+		inbox, err := app.inbox.GetDBRecord(inboxID)
+		if err != nil {
+			app.lo.Error("error fetching inbox", "inbox_id", inboxID, "error", err)
+			return sendErrorEnvelope(r, err)
+		}
+
+		if !inbox.Enabled {
+			return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.disabled", "name", "{globals.terms.inbox}"), nil, envelope.InputError)
+		}
+
+		// Check if inbox is the correct type for widget requests
+		if inbox.Channel != livechat.ChannelLiveChat {
+			return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.notFound", "name", "{globals.terms.inbox}"), nil, envelope.InputError)
+		}
+
+		// Always store inbox data in context
+		r.RequestCtx.SetUserValue(ctxWidgetInboxID, inboxID)
+		r.RequestCtx.SetUserValue(ctxWidgetInbox, inbox)
+
+		// Extract JWT from Authorization header (Bearer token)
+		authHeader := string(r.RequestCtx.Request.Header.Peek("Authorization"))
+
+		// For init endpoint, allow requests without JWT (visitor creation)
+		if authHeader == "" && strings.Contains(string(r.RequestCtx.Path()), "/conversations/init") {
+			return next(r)
+		}
+
+		// For all other requests, require JWT
+		if authHeader == "" || !strings.HasPrefix(authHeader, "Bearer ") {
+			return r.SendErrorEnvelope(fasthttp.StatusUnauthorized, app.i18n.T("globals.terms.unAuthorized"), nil, envelope.UnauthorizedError)
+		}
+		jwtToken := strings.TrimPrefix(authHeader, "Bearer ")
+
+		// Verify JWT using inbox secret
+		claims, err := verifyStandardJWT(jwtToken, inbox.Secret.String)
+		if err != nil {
+			app.lo.Error("invalid JWT", "jwt", jwtToken, "error", err)
+			return r.SendErrorEnvelope(fasthttp.StatusUnauthorized, app.i18n.T("globals.terms.unAuthorized"), nil, envelope.UnauthorizedError)
+		}
+
+		// Resolve user/contact ID from JWT claims
+		contactID, err := resolveUserIDFromClaims(app, claims)
+		if err != nil {
+			envErr, ok := err.(envelope.Error)
+			if ok && envErr.ErrorType != envelope.NotFoundError {
+				app.lo.Error("error resolving user ID from JWT claims", "error", err)
+				return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, app.i18n.Ts("globals.messages.errorFetching", "name", "{globals.terms.user}"), nil, envelope.GeneralError)
+			}
+		}
+
+		// Store authenticated data in request context for downstream handlers
+		r.RequestCtx.SetUserValue(ctxWidgetClaims, claims)
+		r.RequestCtx.SetUserValue(ctxWidgetContactID, contactID)
+
+		return next(r)
+	}
+}
+
+// Helper functions to extract authenticated data from request context
+
+// getWidgetInboxID extracts inbox ID from request context
+func getWidgetInboxID(r *fastglue.Request) (int, error) {
+	val := r.RequestCtx.UserValue(ctxWidgetInboxID)
+	if val == nil {
+		return 0, fmt.Errorf("widget middleware not applied: missing inbox ID in context")
+	}
+	inboxID, ok := val.(int)
+	if !ok {
+		return 0, fmt.Errorf("invalid inbox ID type in context")
+	}
+	return inboxID, nil
+}
+
+// getWidgetContactID extracts contact ID from request context
+func getWidgetContactID(r *fastglue.Request) (int, error) {
+	val := r.RequestCtx.UserValue(ctxWidgetContactID)
+	if val == nil {
+		return 0, fmt.Errorf("widget middleware not applied: missing contact ID in context")
+	}
+	contactID, ok := val.(int)
+	if !ok {
+		return 0, fmt.Errorf("invalid contact ID type in context")
+	}
+	return contactID, nil
+}
+
+// getWidgetInbox extracts inbox model from request context
+func getWidgetInbox(r *fastglue.Request) (imodels.Inbox, error) {
+	val := r.RequestCtx.UserValue(ctxWidgetInbox)
+	if val == nil {
+		return imodels.Inbox{}, fmt.Errorf("widget middleware not applied: missing inbox in context")
+	}
+	inbox, ok := val.(imodels.Inbox)
+	if !ok {
+		return imodels.Inbox{}, fmt.Errorf("invalid inbox type in context")
+	}
+	return inbox, nil
+}
+
+// getWidgetClaimsOptional extracts JWT claims from request context, returns nil if not set
+func getWidgetClaimsOptional(r *fastglue.Request) *Claims {
+	val := r.RequestCtx.UserValue(ctxWidgetClaims)
+	if val == nil {
+		return nil
+	}
+	if claims, ok := val.(Claims); ok {
+		return &claims
+	}
+	return nil
+}
+
+// rateLimitWidget applies rate limiting to widget endpoints.
+func rateLimitWidget(handler fastglue.FastRequestHandler) fastglue.FastRequestHandler {
+	return func(r *fastglue.Request) error {
+		app := r.Context.(*App)
+		if err := app.rateLimit.CheckWidgetLimit(r.RequestCtx); err != nil {
+			return err
+		}
+		return handler(r)
+	}
+}

cmd/widget_ws.go

@@ -0,0 +1,288 @@
+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"
+	WidgetMsgTypePing    = "ping"
+	WidgetMsgTypePong    = "pong"
+	WidgetMsgTypeError   = "error"
+	WidgetMsgTypeNewMsg  = "new_message"
+	WidgetMsgTypeStatus  = "status"
+	WidgetMsgTypeJoined  = "joined"
+)
+
+// WidgetMessage represents a message sent through the widget WebSocket
+type WidgetMessage struct {
+	Type string `json:"type"`
+	JWT  string `json:"jwt,omitempty"`
+	Data any    `json:"data"`
+}
+
+type WidgetInboxJoinRequest struct {
+	InboxID int `json:"inbox_id"`
+}
+
+// WidgetMessageData represents a chat message through the widget
+type WidgetMessageData struct {
+	ConversationUUID string `json:"conversation_uuid"`
+	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 {
+	ConversationUUID string `json:"conversation_uuid"`
+	IsTyping         bool   `json:"is_typing"`
+}
+
+// handleWidgetWS handles the widget WebSocket connection for live chat.
+func handleWidgetWS(r *fastglue.Request) error {
+	var app = r.Context.(*App)
+
+	if err := upgrader.Upgrade(r.RequestCtx, func(conn *websocket.Conn) {
+		// To store client and live chat references for cleanup.
+		var client *livechat.Client
+		var liveChat *livechat.LiveChat
+		var inboxID int
+
+		// Clean up client when connection closes.
+		defer func() {
+			conn.Close()
+			if client != nil && liveChat != nil {
+				liveChat.RemoveClient(client)
+				close(client.Channel)
+				app.lo.Debug("cleaned up client on websocket disconnect", "client_id", client.ID)
+			}
+		}()
+
+		// Read messages from the WebSocket connection.
+		for {
+			var msg WidgetMessage
+			if err := conn.ReadJSON(&msg); err != nil {
+				app.lo.Debug("widget websocket connection closed", "error", err)
+				break
+			}
+
+			switch msg.Type {
+			// Inbox join request.
+			case WidgetMsgTypeJoin:
+				var joinedClient *livechat.Client
+				var joinedLiveChat *livechat.LiveChat
+				var joinedInboxID int
+				var err error
+				if joinedClient, joinedLiveChat, joinedInboxID, err = handleInboxJoin(app, conn, &msg); err != nil {
+					app.lo.Error("error handling widget join", "error", err)
+					sendWidgetError(conn, "Failed to join conversation")
+					continue
+				}
+				// Store the client, livechat, and inbox ID for cleanup and future use.
+				client = joinedClient
+				liveChat = joinedLiveChat
+				inboxID = joinedInboxID
+			// Typing.
+			case WidgetMsgTypeTyping:
+				if err := handleWidgetTyping(app, &msg); err != nil {
+					app.lo.Error("error handling widget typing", "error", err)
+					continue
+				}
+			// Ping.
+			case WidgetMsgTypePing:
+				// Update user's last active timestamp if JWT is provided and client has joined
+				if msg.JWT != "" && inboxID != 0 {
+					if claims, err := validateWidgetMessageJWT(app, msg.JWT, inboxID); err == nil {
+						if userID, err := resolveUserIDFromClaims(app, claims); err == nil {
+							if err := app.user.UpdateLastActive(userID); err != nil {
+								app.lo.Error("error updating user last active timestamp", "user_id", userID, "error", err)
+							} else {
+								app.lo.Debug("updated user last active timestamp", "user_id", userID)
+							}
+						}
+					}
+				}
+
+				if err := conn.WriteJSON(WidgetMessage{
+					Type: WidgetMsgTypePong,
+				}); err != nil {
+					app.lo.Error("error writing pong to widget client", "error", err)
+				}
+			}
+		}
+	}); err != nil {
+		app.lo.Error("error upgrading widget websocket connection", "error", err)
+	}
+	return nil
+}
+
+// handleInboxJoin handles a websocket join request for a live chat inbox.
+func handleInboxJoin(app *App, conn *websocket.Conn, msg *WidgetMessage) (*livechat.Client, *livechat.LiveChat, int, error) {
+	joinDataBytes, err := json.Marshal(msg.Data)
+	if err != nil {
+		return nil, nil, 0, fmt.Errorf("invalid join data: %w", err)
+	}
+
+	var joinData WidgetInboxJoinRequest
+	if err := json.Unmarshal(joinDataBytes, &joinData); err != nil {
+		return nil, nil, 0, fmt.Errorf("invalid join data format: %w", err)
+	}
+
+	// Validate JWT with inbox secret
+	claims, err := validateWidgetMessageJWT(app, msg.JWT, joinData.InboxID)
+	if err != nil {
+		return nil, nil, 0, fmt.Errorf("JWT validation failed: %w", err)
+	}
+
+	// Resolve user ID.
+	userID, err := resolveUserIDFromClaims(app, claims)
+	if err != nil {
+		return nil, nil, 0, fmt.Errorf("failed to resolve user ID from claims: %w", err)
+	}
+
+	// Make sure inbox is active.
+	inbox, err := app.inbox.GetDBRecord(joinData.InboxID)
+	if err != nil {
+		return nil, nil, 0, fmt.Errorf("inbox not found: %w", err)
+	}
+	if !inbox.Enabled {
+		return nil, nil, 0, fmt.Errorf("inbox is not enabled")
+	}
+
+	// Get live chat inbox
+	lcInbox, err := app.inbox.Get(inbox.ID)
+	if err != nil {
+		return nil, nil, 0, fmt.Errorf("live chat inbox not found: %w", err)
+	}
+
+	// Assert type.
+	liveChat, ok := lcInbox.(*livechat.LiveChat)
+	if !ok {
+		return nil, nil, 0, fmt.Errorf("inbox is not a live chat inbox")
+	}
+
+	// Add client to live chat session
+	userIDStr := fmt.Sprintf("%d", userID)
+	client, err := liveChat.AddClient(userIDStr)
+	if err != nil {
+		app.lo.Error("error adding client to live chat", "error", err, "user_id", userIDStr)
+		return nil, nil, 0, err
+	}
+
+	// Start listening for messages from the live chat channel.
+	go func() {
+		for msgData := range client.Channel {
+			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: WidgetMsgTypeJoined,
+		Data: map[string]string{
+			"message": "namaste!",
+		},
+	}
+
+	if err := conn.WriteJSON(joinResp); err != nil {
+		return nil, nil, 0, err
+	}
+
+	app.lo.Debug("widget client joined live chat", "user_id", userIDStr, "inbox_id", joinData.InboxID)
+
+	return client, liveChat, joinData.InboxID, nil
+}
+
+// handleWidgetTyping handles typing indicators
+func handleWidgetTyping(app *App, msg *WidgetMessage) error {
+	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)
+	}
+
+	// Get conversation to retrieve inbox ID for JWT validation
+	if typingData.ConversationUUID == "" {
+		return fmt.Errorf("conversation UUID is required for typing messages")
+	}
+
+	conversation, err := app.conversation.GetConversation(0, typingData.ConversationUUID)
+	if err != nil {
+		app.lo.Error("error fetching conversation for typing", "conversation_uuid", typingData.ConversationUUID, "error", err)
+		return fmt.Errorf("conversation not found: %w", err)
+	}
+
+	// Validate JWT with inbox secret
+	claims, err := validateWidgetMessageJWT(app, msg.JWT, conversation.InboxID)
+	if err != nil {
+		return fmt.Errorf("JWT validation failed: %w", err)
+	}
+
+	userID := claims.UserID
+
+	// Broadcast typing status to agents via conversation manager
+	// Set broadcastToWidgets=false to avoid echoing back to widget clients
+	app.conversation.BroadcastTypingToConversation(typingData.ConversationUUID, typingData.IsTyping, false)
+
+	app.lo.Debug("Broadcasted typing data from widget user to agents", "user_id", userID, "is_typing", typingData.IsTyping, "conversation_uuid", typingData.ConversationUUID)
+	return nil
+}
+
+// validateWidgetMessageJWT validates the incoming widget message JWT using inbox secret
+func validateWidgetMessageJWT(app *App, jwtToken string, inboxID int) (Claims, error) {
+	if jwtToken == "" {
+		return Claims{}, fmt.Errorf("JWT token is empty")
+	}
+
+	if inboxID <= 0 {
+		return Claims{}, fmt.Errorf("inbox ID is required for JWT validation")
+	}
+
+	// Get inbox to retrieve secret for JWT verification
+	inbox, err := app.inbox.GetDBRecord(inboxID)
+	if err != nil {
+		return Claims{}, fmt.Errorf("inbox not found: %w", err)
+	}
+
+	if !inbox.Secret.Valid {
+		return Claims{}, fmt.Errorf("inbox secret not configured for JWT verification")
+	}
+
+	// Use the existing verifyStandardJWT function which properly validates with inbox secret
+	claims, err := verifyStandardJWT(jwtToken, inbox.Secret.String)
+	if err != nil {
+		return Claims{}, fmt.Errorf("JWT validation failed: %w", err)
+	}
+
+	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)
+}

config.sample.toml

@@ -119,6 +119,17 @@ timeout = "15s"
 # How often to check for conversations to unsnooze
 unsnooze_interval = "5m"
 
+[conversation.continuity]
+offline_threshold = "10m"
+batch_check_interval = "5m"
+max_messages_per_email = 10
+min_email_interval = "15m"
+
 [sla]
 # How often to evaluate SLA compliance for conversations
 evaluation_interval = "5m"
+
+[rate_limit]
+  [rate_limit.widget]
+    enabled = true
+    requests_per_minute = 100

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,25 @@
 <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 AdminBanner from '@/components/banner/AdminBanner.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 +146,10 @@ 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'
+import api from '@/api'
 
 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/banner/AdminBanner.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="border-b">
+    <!-- Update notification -->
+    <div
+      v-if="appSettingsStore.settings['app.update']?.update?.is_new"
+      class="px-4 py-2.5 border-b border-border/50 last:border-b-0"
+    >
+      <div class="flex items-center gap-3">
+        <div class="flex-shrink-0">
+          <Download class="w-5 h-5 text-primary" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="flex items-center gap-2 text-sm text-foreground">
+            <span>{{ $t('update.newUpdateAvailable') }}</span>
+            <a
+              :href="appSettingsStore.settings['app.update'].update.url"
+              target="_blank"
+              rel="nofollow noreferrer"
+              class="font-semibold text-primary hover:text-primary/80 underline transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
+            >
+              {{ appSettingsStore.settings['app.update'].update.release_version }}
+            </a>
+            <span class="text-muted-foreground">•</span>
+            <span class="text-muted-foreground">
+              {{ appSettingsStore.settings['app.update'].update.release_date }}
+            </span>
+          </div>
+
+          <!-- Update description -->
+          <div
+            v-if="appSettingsStore.settings['app.update'].update.description"
+            class="mt-2 text-xs text-muted-foreground"
+          >
+            {{ appSettingsStore.settings['app.update'].update.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Restart required notification -->
+    <div
+      v-if="appSettingsStore.settings['app.restart_required']"
+      class="px-4 py-2.5 border-b border-border/50 last:border-b-0"
+    >
+      <div class="flex items-center gap-3">
+        <div class="flex-shrink-0">
+          <Info class="w-5 h-5 text-primary" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="text-sm text-foreground">
+            {{ $t('admin.banner.restartMessage') }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Download, Info } from 'lucide-vue-next'
+import { useAppSettingsStore } from '@/stores/appSettings'
+const appSettingsStore = useAppSettingsStore()
+</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/button/CopyButton.vue

@@ -0,0 +1,73 @@
+<template>
+  <Button :variant="variant" :size="size" type="button" @click="handleCopy" :class="buttonClass">
+    <Copy v-if="!copied" class="w-4 h-4" />
+    <Check v-else class="w-4 h-4 text-green-500" />
+    <span v-if="showText">
+      {{ copied ? copiedText : copyText }}
+    </span>
+  </Button>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Button } from '@shared-ui/components/ui/button'
+import { Copy, Check } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  textToCopy: {
+    type: String,
+    required: true
+  },
+  variant: {
+    type: String,
+    default: 'secondary'
+  },
+  size: {
+    type: String,
+    default: 'sm'
+  },
+  showText: {
+    type: Boolean,
+    default: true
+  },
+  copyText: {
+    type: String,
+    default: null
+  },
+  copiedText: {
+    type: String,
+    default: null
+  },
+  resetDelay: {
+    type: Number,
+    default: 2000
+  },
+  class: {
+    type: String,
+    default: ''
+  }
+})
+
+const { t } = useI18n()
+const copied = ref(false)
+
+const buttonClass = computed(() => props.class)
+const copyText = computed(() => props.copyText || t('globals.terms.copy'))
+const copiedText = computed(() => props.copiedText || t('globals.terms.copied'))
+
+const handleCopy = async () => {
+  try {
+    await navigator.clipboard.writeText(props.textToCopy)
+    copied.value = true
+
+    if (props.resetDelay > 0) {
+      setTimeout(() => {
+        copied.value = false
+      }, props.resetDelay)
+    }
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+</script>

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/CodeEditor.vue

@@ -1,18 +1,20 @@
 <template>
-    <div ref="codeEditor" @click="editorView?.focus()" class="w-full h-[28rem] border rounded-md" />
+    <div ref="codeEditor" @click="editorView?.focus()" :class="readOnly ? 'w-full border rounded-md' : 'w-full h-[28rem] border rounded-md'" />
 </template>
 
 <script setup>
 import { ref, onMounted, watch, nextTick, useTemplateRef } from 'vue'
 import { EditorView, basicSetup } from 'codemirror'
 import { html } from '@codemirror/lang-html'
+import { javascript } from '@codemirror/lang-javascript'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { useColorMode } from '@vueuse/core'
 
 const props = defineProps({
     modelValue: { type: String, default: '' },
     language: { type: String, default: 'html' },
-    disabled: Boolean
+    disabled: Boolean,
+    readOnly: Boolean
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -22,33 +24,37 @@ const codeEditor = useTemplateRef('codeEditor')
 
 const initCodeEditor = (body) => {
     const isDark = useColorMode().value === 'dark'
+    const langExtension = props.language === 'javascript' ? javascript() : html()
+    const isEditable = !props.disabled && !props.readOnly
 
     editorView = new EditorView({
         doc: body,
         extensions: [
             basicSetup,
-            html(),
+            langExtension,
             ...(isDark ? [oneDark] : []),
-            EditorView.editable.of(!props.disabled),
+            EditorView.editable.of(isEditable),
             EditorView.theme({
-                '&': { height: '100%' },
-                '.cm-editor': { height: '100%' },
+                '&': { height: props.readOnly ? 'auto' : '100%' },
+                '.cm-editor': { height: props.readOnly ? 'auto' : '100%' },
                 '.cm-scroller': { overflow: 'auto' }
             }),
             EditorView.updateListener.of((update) => {
-                if (!update.docChanged) return
+                if (!update.docChanged || props.readOnly) return
                 const v = update.state.doc.toString()
                 emit('update:modelValue', v)
                 data.value = v
-                
+
             })
         ],
         parent: codeEditor.value
     })
 
-    nextTick(() => {
-        editorView?.focus()
-    })
+    if (!props.readOnly) {
+        nextTick(() => {
+            editorView?.focus()
+        })
+    }
 }
 
 onMounted(() => {

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'
@@ -118,6 +118,8 @@ import Table from '@tiptap/extension-table'
 import TableRow from '@tiptap/extension-table-row'
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
+import { useTypingIndicator } from '@shared-ui/composables'
+import { useConversationStore } from '@main/stores/conversation'
 
 const textContent = defineModel('textContent', { default: '' })
 const htmlContent = defineModel('htmlContent', { default: '' })
@@ -127,6 +129,7 @@ const linkUrl = ref('')
 const props = defineProps({
   placeholder: String,
   insertContent: String,
+  messageType: String,
   autoFocus: {
     type: Boolean,
     default: true
@@ -134,13 +137,19 @@ const props = defineProps({
   aiPrompts: {
     type: Array,
     default: () => []
-  }
+  },
 })
 
 const emit = defineEmits(['send', 'aiPromptSelected'])
 
 const emitPrompt = (key) => emit('aiPromptSelected', key)
 
+// Set up typing indicator
+const conversationStore = useConversationStore()
+const { startTyping, stopTyping } = useTypingIndicator(conversationStore.sendTyping, {
+  get isPrivateMessage() { return props.messageType === 'private_note' }
+}) 
+
 // To preseve the table styling in emails, need to set the table style inline.
 // Created these custom extensions to set the table style inline.
 const CustomTable = Table.extend({
@@ -201,6 +210,8 @@ const editor = useEditor({
     handleKeyDown: (view, event) => {
       if (event.ctrlKey && event.key === 'Enter') {
         emit('send')
+        // Stop typing when sending
+        stopTyping()
         return true
       }
     }
@@ -211,6 +222,13 @@ const editor = useEditor({
     htmlContent.value = editor.getHTML()
     textContent.value = editor.getText()
     isInternalUpdate.value = false
+
+    // Trigger typing indicator when user types
+    startTyping()
+  },
+  onBlur: () => {
+    // Stop typing when editor loses focus
+    stopTyping()
   }
 })
 

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

@@ -130,15 +130,15 @@ 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 { FIELD_TYPE } from '@/constants/filterConfig'
 import CloseButton from '@/components/button/CloseButton.vue'
 import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
-import SelectTag from '@/components/ui/select/SelectTag.vue'
+import SelectTag from '@shared-ui/components/ui/select/SelectTag.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,7 +37,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@shared-ui/components/ui/dropdown-menu'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -47,13 +47,13 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+} from '@shared-ui/components/ui/alert-dialog'
 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/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/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/constants/websocket.js

@@ -0,0 +1,13 @@
+export const WS_EVENT = {
+    NEW_MESSAGE: 'new_message',
+    MESSAGE_PROP_UPDATE: 'message_prop_update',
+    CONVERSATION_PROP_UPDATE: 'conversation_prop_update',
+    CONVERSATION_SUBSCRIBE: 'conversation_subscribe',
+    CONVERSATION_SUBSCRIBED: 'conversation_subscribed',
+    TYPING: 'typing',
+}
+
+// Message types that should not be queued because they become stale quickly
+export const WS_EPHEMERAL_TYPES = [
+    WS_EVENT.TYPING,
+]

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

@@ -132,28 +132,24 @@
             <Label class="text-sm font-medium">{{ $t('globals.terms.apiKey') }}</Label>
             <div class="flex items-center gap-2 mt-1">
               <Input v-model="newAPIKeyData.api_key" readonly class="font-mono text-sm" />
-              <Button
-                type="button"
+              <CopyButton
+                :text-to-copy="newAPIKeyData.api_key"
                 variant="outline"
                 size="sm"
-                @click="copyToClipboard(newAPIKeyData.api_key)"
-              >
-                <Copy class="w-4 h-4" />
-              </Button>
+                :show-text="false"
+              />
             </div>
           </div>
           <div>
             <Label class="text-sm font-medium">{{ $t('globals.terms.secret') }}</Label>
             <div class="flex items-center gap-2 mt-1">
               <Input v-model="newAPIKeyData.api_secret" readonly class="font-mono text-sm" />
-              <Button
-                type="button"
+              <CopyButton
+                :text-to-copy="newAPIKeyData.api_secret"
                 variant="outline"
                 size="sm"
-                @click="copyToClipboard(newAPIKeyData.api_secret)"
-              >
-                <Copy class="w-4 h-4" />
-              </Button>
+                :show-text="false"
+              />
             </div>
           </div>
           <Alert>
@@ -304,17 +300,24 @@
 
 <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 { 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 { Badge } from '@shared-ui/components/ui/badge/index.js'
+import { Clock, LogIn, Key, RotateCcw, Trash2, Plus, AlertTriangle } from 'lucide-vue-next'
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@shared-ui/components/ui/form/index.js'
+import CopyButton from '@/components/button/CopyButton.vue'
+import { Avatar, AvatarFallback, AvatarImage } from '@shared-ui/components/ui/avatar/index.js'
 import {
   Select,
   SelectContent,
@@ -322,9 +325,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 +335,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: {
@@ -493,17 +496,6 @@ const revokeAPIKey = async () => {
   }
 }
 
-const copyToClipboard = async (text) => {
-  try {
-    await navigator.clipboard.writeText(text)
-    emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
-      description: t('globals.messages.copied')
-    })
-  } catch (error) {
-    console.error('Error copying to clipboard:', error)
-  }
-}
-
 const closeAPIKeyModal = () => {
   showAPIKeyDialog.value = false
   newAPIKeyData.value = { api_key: '', api_secret: '' }

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 '@shared-ui/utils/string'
 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/PreChatFormConfig.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="space-y-6">
+    <!-- Master Toggle -->
+    <div class="flex flex-row items-center justify-between box p-4">
+      <div class="space-y-0.5">
+        <label class="text-base font-medium">
+          {{ $t('admin.inbox.livechat.prechatForm.enabled') }}
+        </label>
+        <p class="text-sm text-muted-foreground">
+          {{ $t('admin.inbox.livechat.prechatForm.enabled.description') }}
+        </p>
+      </div>
+      <Switch v-model:checked="prechatConfig.enabled" />
+    </div>
+
+    <!-- Form Configuration -->
+    <div v-if="prechatConfig.enabled" class="space-y-6">
+      <!-- Form Title -->
+      <div>
+        <label class="text-sm font-medium">
+          {{ $t('admin.inbox.livechat.prechatForm.title') }}
+        </label>
+        <Input
+          type="text"
+          v-model="prechatConfig.title"
+          placeholder="Tell us about yourself"
+          class="mt-1"
+        />
+        <p class="text-sm text-muted-foreground mt-1">
+          {{ $t('admin.inbox.livechat.prechatForm.title.description') }}
+        </p>
+      </div>
+
+      <!-- Fields Configuration -->
+      <div class="space-y-4">
+        <div class="flex justify-between items-center">
+          <h4 class="font-medium text-foreground">
+            {{ $t('admin.inbox.livechat.prechatForm.fields') }}
+          </h4>
+          <Button
+            variant="outline"
+            size="sm"
+            @click="fetchCustomAttributes"
+            :disabled="availableCustomAttributes.length === 0"
+          >
+            <Plus class="w-4 h-4 mr-2" />
+            {{ $t('admin.inbox.livechat.prechatForm.addField') }}
+          </Button>
+        </div>
+
+        <!-- Field List -->
+        <div class="space-y-3">
+          <Draggable
+            v-model="draggableFields"
+            :item-key="(field) => field.key || `field_${field.custom_attribute_id || 'unknown'}`"
+            :animation="200"
+            class="space-y-3"
+          >
+            <template #item="{ element: field, index }">
+              <div :key="field.key || `field-${index}`" class="border rounded-lg p-4 space-y-4">
+                <!-- Field Header -->
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center space-x-3">
+                    <div class="cursor-move text-muted-foreground">
+                      <GripVertical class="w-4 h-4" />
+                    </div>
+                    <div>
+                      <div class="font-medium">{{ field.label }}</div>
+                      <div class="text-sm text-muted-foreground">
+                        {{ field.type }} {{ field.is_default ? '(Default)' : '(Custom)' }}
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex items-center space-x-2">
+                    <Switch v-model:checked="field.enabled" />
+                    <Button
+                      v-if="!field.is_default"
+                      variant="ghost"
+                      size="sm"
+                      @click="removeField(index)"
+                    >
+                      <X class="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+
+                <!-- Field Configuration -->
+                <div v-if="field.enabled" class="space-y-4">
+                  <div class="grid grid-cols-2 gap-4">
+                    <!-- Label -->
+                    <div>
+                      <label class="text-sm font-medium">{{ $t('globals.terms.label') }}</label>
+                      <Input v-model="field.label" placeholder="Field label" class="mt-1" />
+                    </div>
+
+                    <!-- Placeholder -->
+                    <div>
+                      <label class="text-sm font-medium">
+                        {{ $t('globals.terms.placeholder') }}
+                      </label>
+                      <Input
+                        v-model="field.placeholder"
+                        placeholder="Field placeholder"
+                        class="mt-1"
+                      />
+                    </div>
+                  </div>
+
+                  <!-- Required -->
+                  <div class="flex items-center space-x-2">
+                    <Checkbox v-model:checked="field.required" />
+                    <label class="text-sm">{{ $t('globals.terms.required') }}</label>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </Draggable>
+
+          <!-- Empty State -->
+          <div v-if="formFields.length === 0" class="text-center py-8 text-muted-foreground">
+            {{ $t('admin.inbox.livechat.prechatForm.noFields') }}
+          </div>
+        </div>
+
+        <!-- Custom Attributes Selection -->
+        <div v-if="availableCustomAttributes.length > 0" class="space-y-3">
+          <h5 class="font-medium text-sm">
+            {{ $t('admin.inbox.livechat.prechatForm.availableFields') }}
+          </h5>
+          <div class="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto">
+            <div
+              v-for="attr in availableCustomAttributes"
+              :key="attr.id"
+              class="flex items-center space-x-2 p-2 border rounded cursor-pointer hover:bg-accent"
+              @click="addCustomAttributeToForm(attr)"
+            >
+              <div class="flex-1">
+                <div class="font-medium text-sm">{{ attr.name }}</div>
+                <div class="text-xs text-muted-foreground">{{ attr.data_type }}</div>
+              </div>
+              <Plus class="w-4 h-4 text-muted-foreground" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { Input } from '@shared-ui/components/ui/input'
+import { Button } from '@shared-ui/components/ui/button'
+import { Switch } from '@shared-ui/components/ui/switch'
+import { Checkbox } from '@shared-ui/components/ui/checkbox'
+import { Plus, X, GripVertical } from 'lucide-vue-next'
+import Draggable from 'vuedraggable'
+import api from '@/api'
+
+const prechatConfig = defineModel({
+  default: () => ({
+    enabled: false,
+    title: '',
+    fields: [
+      {
+        key: 'name',
+        type: 'text',
+        label: 'Full name',
+        placeholder: 'Enter your name',
+        required: true,
+        enabled: true,
+        order: 1,
+        is_default: true
+      },
+      {
+        key: 'email',
+        type: 'email',
+        label: 'Email address',
+        placeholder: 'your@email.com',
+        required: true,
+        enabled: true,
+        order: 2,
+        is_default: true
+      }
+    ]
+  })
+})
+
+const customAttributes = ref([])
+
+const formFields = computed(() => {
+  return prechatConfig.value.fields || []
+})
+
+const availableCustomAttributes = computed(() => {
+  const usedIds = formFields.value
+    .filter((field) => field.custom_attribute_id)
+    .map((field) => field.custom_attribute_id)
+
+  return customAttributes.value.filter((attr) => !usedIds.includes(attr.id))
+})
+
+const draggableFields = computed({
+  get() {
+    return prechatConfig.value.fields || []
+  },
+  set(newValue) {
+    const fieldsWithUpdatedOrder = newValue.map((field, index) => ({
+      ...field,
+      order: index + 1
+    }))
+    prechatConfig.value.fields = fieldsWithUpdatedOrder
+  }
+})
+
+const removeField = (index) => {
+  const fields = formFields.value.filter((_, i) => i !== index)
+  prechatConfig.value.fields = fields
+}
+
+const addCustomAttributeToForm = (attribute) => {
+  const newField = {
+    key: attribute.key || `custom_attr_${attribute.id || Date.now()}`,
+    type: attribute.data_type,
+    label: attribute.name,
+    placeholder: '',
+    required: false,
+    enabled: false,
+    order: formFields.value.length + 1,
+    is_default: false,
+    custom_attribute_id: attribute.id
+  }
+
+  const fields = [...formFields.value, newField]
+  prechatConfig.value.fields = fields
+}
+
+const fetchCustomAttributes = async () => {
+  try {
+    // Fetch both contact and conversation custom attributes
+    const [contactAttrs, conversationAttrs] = await Promise.all([
+      api.getCustomAttributes('contact'),
+      api.getCustomAttributes('conversation')
+    ])
+
+    customAttributes.value = [
+      ...(contactAttrs.data?.data || []),
+      ...(conversationAttrs.data?.data || [])
+    ]
+
+    // Clean up orphaned custom attribute fields
+    const availableCustomAttrIds = customAttributes.value.map((attr) => attr.id)
+    const cleanedFields = (prechatConfig.value.fields || []).filter((field) => {
+      // Keep default fields
+      if (field.is_default) return true
+
+      // Keep custom fields that still exist
+      if (field.custom_attribute_id && availableCustomAttrIds.includes(field.custom_attribute_id))
+        return true
+
+      // Remove orphaned custom fields
+      return false
+    })
+
+    // Update fields if any were removed
+    if (cleanedFields.length !== (prechatConfig.value.fields || []).length) {
+      prechatConfig.value.fields = cleanedFields
+    }
+  } catch (error) {
+    console.error('Error fetching custom attributes:', error)
+    customAttributes.value = []
+  }
+}
+
+onMounted(() => {
+  fetchCustomAttributes()
+})
+</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 '@shared-ui/utils/string'
 
 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,86 @@
+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(),
+  secret: z.string(),
+  linked_email_inbox_id: z.number().nullable().optional(),
+  config: z.object({
+    brand_name: z.string().min(1, { message: t('globals.messages.required') }),
+    dark_mode: z.boolean(),
+    show_powered_by: z.boolean(),
+    language: z.string().min(1, { message: t('globals.messages.required') }),
+    logo_url: z.string().url({
+      message: t('globals.messages.invalid', {
+        name: t('globals.terms.url').toLowerCase()
+      })
+    }).optional().or(z.literal('')),
+    launcher: z.object({
+      position: z.enum(['left', 'right']),
+      logo_url: z.string().url({
+        message: t('globals.messages.invalid', {
+          name: t('globals.terms.url').toLowerCase()
+        })
+      }).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().optional()
+    }),
+    colors: z.object({
+      primary: z.string().regex(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, {
+        message: t('globals.messages.invalid', {
+          name: t('admin.inbox.livechat.colors').toLowerCase()
+        })
+      }),
+    }),
+    features: z.object({
+      file_upload: z.boolean(),
+      emoji: 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.invalid', {
+          name: t('globals.terms.url').toLowerCase()
+        })
+      })
+    })),
+    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(),
+    }),
+    prechat_form: z.object({
+      enabled: z.boolean(),
+      title: z.string().optional(),
+      fields: z.array(z.object({
+        key: z.string().min(1),
+        type: z.enum(['text', 'email', 'number', 'checkbox', 'date', 'link', 'list']),
+        label: z.string().min(1, { message: t('globals.messages.required') }),
+        placeholder: z.string().optional(),
+        required: z.boolean(),
+        enabled: z.boolean(),
+        order: z.number().min(1),
+        is_default: z.boolean(),
+        custom_attribute_id: z.number().optional()
+      }))
+    })
+  })
+})

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 '@shared-ui/utils/string'
 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 '@shared-ui/utils/string'
 
 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 '@shared-ui/utils/string';
 
 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: {