diff --git a/README.md b/README.md index 9570b0c..ec2fe8d 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,19 @@ An iFruit account is optional. Unlinked devices retain local settings, alarms, m server-only `Config.Media.FiveManage.ApiKey` in `sky_phone/config/media.lua`; the token is never sent to NUI because clients receive temporary presigned upload URLs instead. +## Messages GIF provider + +Configure GIF search in `sky_phone/config/config.lua`: + +```lua +Config.Media.GiphyApiKey = "YOUR_GIPHY_API_KEY" +``` + +GIPHY provides trending and searched GIFs through a paginated server-side proxy. The shared +`config.lua` is loaded by both FiveM runtimes, so its values are available to clients even though +only the server uses the GIPHY key. Photo and video actions in Messages are intentionally inactive +until their dedicated implementation is available. + Database migrations run automatically. Existing `sky_phone_mail_accounts` installations are renamed to `sky_phone_accounts` while preserving account IDs and mail foreign keys. iFruit passwords are intentional in-character credentials and remain plaintext `VARCHAR(64)` values; registration screens warn players never to reuse a real password. Camera and Gallery media is stored in `sky_phone_media`. Signed-out captures belong to the current diff --git a/frontend/package.json b/frontend/package.json index 8b933eb..7c86e8f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,6 +14,7 @@ "test": "vitest run" }, "dependencies": { + "emoji-picker-element-data": "^1.8.0", "@tiptap/core": "^3.29.2", "@tiptap/extension-placeholder": "^3.29.2", "@tiptap/markdown": "^3.29.2", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 5ad6d78..1f4dd36 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: dompurify: specifier: ^3.4.13 version: 3.4.13 + emoji-picker-element-data: + specifier: ^1.8.0 + version: 1.8.0 fix-webm-duration: specifier: ^1.0.6 version: 1.0.6 @@ -1161,6 +1164,9 @@ packages: ee-first@1.1.1: resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} + emoji-picker-element-data@1.8.0: + resolution: {integrity: sha512-VfRuRJNEDLS1JKlNS4olaqhjX5S1nnZ+ZHG73b/dV8QeZyi0yPruTPEE72EmF6XO3k/9hj3lybMIYMOYXb/57A==} + emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} @@ -3199,6 +3205,8 @@ snapshots: ee-first@1.1.1: {} + emoji-picker-element-data@1.8.0: {} + emoji-regex@8.0.0: {} encodeurl@2.0.0: {} diff --git a/frontend/src/App.vue b/frontend/src/App.vue index a8b81f9..4771f4b 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -26,6 +26,7 @@ import { useCallsStore } from '@/stores/calls' import { useBankingStore } from '@/stores/banking' import { useAccountStore } from '@/stores/account' import { useMailStore } from '@/stores/mail' +import { useMessagesStore } from '@/stores/messages' import { useMediaStore } from '@/stores/media' import { useMarketplaceStore } from '@/stores/marketplace' import { useAppStoreStore } from '@/stores/app-store' @@ -51,6 +52,7 @@ type AppMessage = { | CalendarReminderData | MailEventData | MarketplaceEventData + | MessagesEventData | PhoneCall | PhoneNotificationInput | PhoneOpenPayload @@ -70,6 +72,14 @@ type MailEventData = { title?: string } +type MessagesEventData = { + device?: PhoneNotificationDevicePayload + phoneNumber?: string + sender?: string + text?: string + title?: string +} + type MarketplaceEventData = { counts?: MarketplaceCounts device?: PhoneNotificationDevicePayload @@ -88,7 +98,6 @@ type CalendarReminderData = { text?: string title?: string } - const REFERENCE_VIEWPORT_WIDTH = 1920 const REFERENCE_VIEWPORT_HEIGHT = 1080 const PHONE_BASE_SCALE = 0.69 @@ -101,6 +110,7 @@ const games = useGamesStore() const calls = useCallsStore() const banking = useBankingStore() const mail = useMailStore() +const messages = useMessagesStore() const media = useMediaStore() const marketplace = useMarketplaceStore() const appStore = useAppStoreStore() @@ -150,6 +160,7 @@ function hydratePhone(payload: PhoneOpenPayload): void { if (payload.account?.email) void marketplace.loadCounts() else marketplace.setCounts({ active: 0, unread: 0 }) void calls.bootstrap() + void messages.loadConversations() } async function hydrateDevelopmentPhone(): Promise { @@ -275,6 +286,35 @@ function onMessage(event: MessageEvent): void { notifications.show(notification) } else if (event.data?.type === 'contacts:changed') { void calls.loadContacts() + } else if (event.data?.type === 'messages:changed') { + void messages.loadConversations() + if (messages.activeNumber) void messages.openThread(messages.activeNumber) + } else if (event.data?.type === 'messages:new' && event.data.data) { + const data = event.data.data as MessagesEventData + void messages.loadConversations() + if (messages.activeNumber === data.phoneNumber) { + void messages.openThread(messages.activeNumber) + } + + const notification: PhoneNotificationInput = { + appId: 'messages', + subtitle: data.phoneNumber, + text: + data.text ?? + phone.t('Apps.messages.newMessage', { sender: data.sender ?? '' }), + title: data.title ?? phone.t('Apps.messages.name'), + } + if ( + data.device && + (!phone.isOpen || data.device.imei !== phone.device?.imei) + ) { + notification.device = { + imei: data.device.imei, + name: data.device.name, + preferences: parsePhonePreferences(data.device.settings ?? null), + } + } + notifications.show(notification) } else if (event.data?.type === 'calls:changed') { void calls.loadRecents() } else if (event.data?.type === 'banking:changed') { diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 11569c8..43c0a02 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -2454,6 +2454,1881 @@ button { *::-webkit-scrollbar { display: none; } +.messages-page { + background: #fff !important; + color: #111; + color-scheme: light; +} +.dark .messages-page { + background: #fff !important; + color: #111; +} +.phone-app:has(.messages-page) .phone-status-bar { + color: #080808; + text-shadow: none; +} +.phone-app:has(.messages-page)::before { + content: ''; + position: absolute; + z-index: 60; + top: 0; + right: 0; + left: 0; + height: 44px; + background: #fff; + pointer-events: none; +} +.messages-inbox-page { + padding: 96px 0 86px !important; + overflow-y: auto; +} +.messages-inbox-header { + position: fixed; + z-index: 34; + top: 44px; + right: 0; + left: 0; + height: 52px; + padding: 0 16px; + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + background: rgb(255 255 255 / 92%); + backdrop-filter: saturate(180%) blur(22px); + -webkit-backdrop-filter: saturate(180%) blur(22px); +} +.messages-inbox-header > span { + color: #191919; + font-size: 14px; +} +.messages-inbox-header > strong { + font-size: 16px; + font-weight: 700; + letter-spacing: -0.025em; +} +.messages-inbox-header > button { + width: 34px; + height: 34px; + margin-left: auto; + display: grid; + place-items: center; + border: 0; + border-radius: 50%; + background: transparent; + color: #181818; + transition: background 0.18s ease, color 0.18s ease; +} +.messages-inbox-header > button.active { + background: #e8f4ff; + color: #007aff; +} +.messages-inbox-header__edit { + width: auto !important; + height: 34px !important; + margin: 0 !important; + justify-self: start; + border-radius: 9px !important; + color: #007aff !important; + font-size: 13px; +} +.messages-inbox-header__delete { + color: #ff3b30 !important; +} +.messages-inbox-header__delete:disabled { + color: #aaa !important; + opacity: 0.45; +} +.messages-conversation-list { + padding: 0 14px 12px; +} +.messages-conversation { + position: relative; + width: 100%; + min-height: 72px; + padding: 8px 0 8px 7px; + display: flex; + align-items: center; + gap: 11px; + border: 0; + background: transparent; + color: #111; + text-align: left; +} +.messages-conversation::after { + content: ''; + position: absolute; + right: 0; + bottom: 0; + left: 66px; + height: 1px; + background: #e6e6e8; +} +.messages-conversation:active { + border-radius: 13px; + background: #f0f0f3; +} +.messages-conversation__dot { + position: absolute; + left: -8px; + width: 7px; + height: 7px; + border-radius: 50%; + background: #0a84ff; +} +.messages-conversation__selection { + position: absolute; + left: -8px; + width: 19px; + height: 19px; + display: grid; + place-items: center; + border: 1.5px solid #c7c7cc; + border-radius: 50%; + background: #fff; + color: #fff; +} +.messages-conversation--selected .messages-conversation__selection { + border-color: #0a84ff; + background: #0a84ff; +} +.messages-conversation--selected { + border-radius: 13px; + background: #f3f8ff; +} +.messages-conversation__body { + min-width: 0; + display: flex; + flex: 1; + flex-direction: column; + gap: 2px; +} +.messages-conversation__headline { + display: grid; + grid-template-columns: minmax(0, 1fr) auto 13px; + align-items: center; + gap: 4px; +} +.messages-conversation__headline strong { + overflow: hidden; + font-size: 14px; + font-weight: 600; + letter-spacing: -0.012em; + text-overflow: ellipsis; + white-space: nowrap; +} +.messages-conversation--unread .messages-conversation__headline strong { + font-weight: 750; +} +.messages-conversation__headline time, +.messages-conversation__headline svg { + color: #aaa; +} +.messages-conversation__headline time { + font-size: 10px; + white-space: nowrap; +} +.messages-conversation__preview { + min-height: 30px; + overflow: hidden; + color: #8b8b91; + display: -webkit-box; + font-size: 11px; + line-height: 1.3; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} +.messages-inbox-toolbar { + position: fixed; + z-index: 42; + right: 12px; + bottom: 30px; + left: 12px; + height: 46px; + display: flex; + align-items: center; + gap: 9px; +} +.messages-inbox-toolbar label { + height: 40px; + padding: 0 12px; + display: flex; + flex: 1; + align-items: center; + gap: 7px; + border: 1px solid #ededf0; + border-radius: 22px; + background: rgb(255 255 255 / 94%); + box-shadow: 0 7px 25px rgb(0 0 0 / 8%); + color: #9b9ba0; + backdrop-filter: blur(22px); + -webkit-backdrop-filter: blur(22px); +} +.messages-inbox-toolbar input { + min-width: 0; + flex: 1; + border: 0; + outline: 0; + background: transparent; + color: #111; + font-size: 13px; +} +.messages-inbox-toolbar > button { + width: 40px; + height: 40px; + display: grid; + place-items: center; + border: 1px solid #ededf0; + border-radius: 50%; + background: rgb(255 255 255 / 96%); + box-shadow: 0 7px 25px rgb(0 0 0 / 9%); + color: #111; +} +.messages-edit-toolbar { + position: fixed; + z-index: 42; + right: 12px; + bottom: 30px; + left: 12px; + height: 46px; + padding: 0 7px 0 15px; + display: flex; + align-items: center; + justify-content: space-between; + border: 1px solid #ededf0; + border-radius: 23px; + background: rgb(255 255 255 / 96%); + box-shadow: 0 7px 25px rgb(0 0 0 / 8%); + color: #8e8e93; + font-size: 12px; +} +.messages-edit-toolbar button { + height: 34px; + padding: 0 12px; + display: flex; + align-items: center; + gap: 6px; + border: 0; + border-radius: 17px; + background: #ff3b30; + color: #fff; + font-weight: 650; +} +.messages-edit-toolbar button:disabled { + background: #e5e5ea; + color: #aaa; +} +.messages-avatar { + width: 50px; + height: 50px; + display: grid; + flex: none; + place-items: center; + border: 1px solid rgb(255 255 255 / 25%); + border-radius: 50%; + box-shadow: + inset 0 1px 0 rgb(255 255 255 / 30%), + 0 3px 12px rgb(0 0 0 / 12%); + overflow: hidden; + color: #fff; +} +.messages-avatar__glyph { + padding-top: 6px; + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; + font-size: 34px; + line-height: 1; + filter: drop-shadow(0 2px 2px rgb(0 0 0 / 15%)); +} +.messages-avatar--small { + width: 38px; + height: 38px; +} +.messages-avatar--small .messages-avatar__glyph { + padding-top: 5px; + font-size: 27px; +} +.messages-empty-state { + min-height: 72%; + padding: 42px 42px 80px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} +.messages-empty-state--list { + min-height: 58%; +} +.messages-empty-state__icon { + width: 74px; + height: 74px; + display: grid; + place-items: center; + border-radius: 24px; + background: linear-gradient(145deg, #55e875, #20b74a); + box-shadow: 0 16px 35px rgb(37 196 79 / 28%); + color: #fff; +} +.messages-empty-state h2 { + margin: 20px 0 6px; + font-size: 22px; + letter-spacing: -0.025em; +} +.messages-empty-state p { + max-width: 250px; + margin: 0; + color: #8e8e93; + font-size: 14px; + line-height: 1.4; +} +.messages-empty-state button, +.messages-number-action { + margin-top: 18px; + padding: 8px 17px; + border: 0; + border-radius: 20px; + background: rgb(52 199 89 / 13%); + color: #20a647; + font-size: 14px; + font-weight: 650; +} +.messages-recipient-field { + margin-top: 8px; +} +.messages-contact-list { + margin-top: 10px; +} +.messages-number-action { + margin-left: 16px; + display: flex; + align-items: center; + gap: 8px; +} +.messages-thread-page { + padding: 218px 0 84px !important; + overflow-y: auto; + scroll-padding-top: 218px; + transition: padding-bottom 0.28s cubic-bezier(0.32, 0.72, 0, 1); +} +.messages-thread-page--emoji { + padding-bottom: 288px !important; +} +.messages-chat-header { + position: fixed; + z-index: 35; + top: 44px; + right: 0; + left: 0; + height: 140px; + background: linear-gradient(180deg, #fff 76%, rgb(255 255 255 / 94%) 100%); +} +.dark .messages-chat-header { + background: linear-gradient(180deg, #fff 76%, rgb(255 255 255 / 94%) 100%); +} +.messages-chat-header__back { + position: absolute; + top: 14px; + left: 14px; + width: 43px; + height: 43px; + display: grid; + place-items: center; + border: 1px solid #e7e7e9; + border-radius: 50%; + background: rgb(255 255 255 / 94%); + box-shadow: 0 5px 18px rgb(0 0 0 / 5%); + color: #111; +} +.messages-chat-header__contact { + position: absolute; + top: 6px; + left: 50%; + min-width: 190px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transform: translateX(-50%); +} +.messages-avatar--header { + width: 58px; + height: 58px; + margin-bottom: 7px; + border: 2px solid #fff; + box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 8px 22px rgb(0 0 0 / 12%); +} +.messages-avatar--header .messages-avatar__glyph { + padding-top: 7px; + font-size: 42px; +} +.messages-chat-header__name { + max-width: 205px; + height: 29px; + padding: 0 9px 0 12px; + display: flex; + align-items: center; + gap: 2px; + overflow: hidden; + border: 1px solid #e5e5e7; + border-radius: 16px; + background: rgb(255 255 255 / 88%); + box-shadow: 0 3px 10px rgb(0 0 0 / 4%); + color: #111; +} +.messages-chat-header__name strong { + min-width: 0; + overflow: hidden; + font-size: 15px; + font-weight: 700; + letter-spacing: -0.02em; + text-overflow: ellipsis; + white-space: nowrap; +} +.messages-chat-header__name svg { + flex: none; + color: #aaa; +} +.messages-bubbles { + min-height: calc(100% - 12px); + padding: 10px 12px 20px; +} +.messages-bubbles [class*='message-bubble'] { + max-width: 248px; + border-radius: 21px; + box-shadow: none; + font-size: 15px; + line-height: 1.26; +} +.messages-bubbles .k-message { + max-width: 82% !important; +} +.messages-bubbles .k-message.self-end > div > div { + background: #34c759 !important; + color: #fff !important; +} +.messages-bubbles .k-message:not(.self-end) > div > div { + background: #e9e9eb !important; + color: #111 !important; +} +.messages-bubbles .k-message.self-end > div > div::after { + content: ''; + position: absolute; + right: -4px; + bottom: 0; + width: 12px; + height: 15px; + border-bottom-left-radius: 12px 10px; + background: #34c759; + clip-path: polygon(0 0, 100% 100%, 0 100%); +} +.messages-bubbles .k-message:not(.self-end) > div > div::after { + content: ''; + position: absolute; + bottom: 0; + left: -4px; + width: 12px; + height: 15px; + border-bottom-right-radius: 12px 10px; + background: #e9e9eb; + clip-path: polygon(100% 0, 100% 100%, 0 100%); +} +.messages-thread-timestamp { + min-height: 34px; + margin: 0 auto 12px; + padding: 3px 12px; + display: flex; + flex-direction: column; + align-items: center; + color: #89898e; + font-size: 12px; + font-weight: 500; + line-height: 1.35; +} +.messages-thread-timestamp b { + font-weight: 550; +} +.messages-message--sending { + animation: messages-send-in 0.44s cubic-bezier(0.22, 1.35, 0.36, 1) both; +} +.messages-message--sending [class*='message-footer'] { + opacity: 0.62; +} +.messages-message--failed [class*='message-bubble'] { + box-shadow: 0 0 0 1px #ff453a; +} +.messages-messagebar { + position: fixed; + z-index: 42; + right: 10px; + bottom: 31px; + left: 10px; + width: auto; + min-height: 45px; + padding: 2px 3px !important; + border: 1px solid #ededf0; + border-radius: 25px; + background: rgb(255 255 255 / 94%); + box-shadow: 0 8px 28px rgb(0 0 0 / 9%); + backdrop-filter: blur(22px); + -webkit-backdrop-filter: blur(22px); +} +.dark .messages-messagebar { + background: rgb(255 255 255 / 94%); +} +.messages-messagebar textarea { + max-height: 88px; + color: #111 !important; + font-size: 14px; +} +.messages-messagebar > div { + padding: 0 !important; +} +.messages-messagebar > div > div:first-child { + display: none; +} +.messages-messagebar > div > div:nth-child(2) { + height: 39px !important; + gap: 6px !important; +} +.messages-messagebar .k-glass { + border: 0 !important; + background: transparent !important; + box-shadow: none !important; +} +.messages-messagebar button { + color: #34c759; +} +.messages-messagebar button:disabled { + color: #8e8e93; + opacity: 0.5; +} +.messages-messagebar__tools button { + width: 35px; + height: 35px; + border: 1px solid #e5e5e7; + border-radius: 50%; + color: #111; + transition: + color 0.2s ease, + transform 0.2s ease; +} +.messages-messagebar__tools button.active { + background: #e8f4ff; + color: #007aff; + transform: rotate(45deg) scale(1.05); +} +.messages-attachment-menu { + position: fixed; + z-index: 48; + bottom: 82px; + left: 12px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 7px; + animation: messages-action-menu-in 0.28s cubic-bezier(0.22, 1.25, 0.36, 1) both; +} +.messages-attachment-menu > button { + height: 39px; + padding: 0 14px 0 6px; + display: flex; + align-items: center; + gap: 9px; + border: 1px solid #e6e6e8; + border-radius: 21px; + background: rgb(255 255 255 / 97%); + box-shadow: 0 7px 22px rgb(0 0 0 / 12%); + color: #111; + font-size: 12px; + font-weight: 600; + backdrop-filter: blur(22px); + -webkit-backdrop-filter: blur(22px); +} +.messages-attachment-menu > button > span { + width: 29px; + height: 29px; + display: grid; + place-items: center; + border-radius: 50%; + background: #e8f4ff; + color: #007aff; +} +.messages-attachment-menu > button:nth-child(2) > span { + background: #e9f9ed; + color: #28a745; +} +.messages-attachment-menu > button:nth-child(3) > span { + background: #fff6dd; +} +.messages-attachment-menu > button:nth-child(4) > span { + background: #f6eefe; + color: #af52de; +} +.messages-attachment-menu > button:nth-child(5) > span { + background: #fff0ef; + color: #ff3b30; +} +.messages-action-emoji { + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; + font-size: 17px; +} +.messages-media-picker { + position: fixed; + z-index: 47; + right: 0; + bottom: 78px; + left: 0; + height: 244px; + overflow: hidden; + border-top: 1px solid #e1e1e4; + background: rgb(247 247 249 / 98%); + box-shadow: 0 -8px 28px rgb(0 0 0 / 10%); + animation: messages-panel-in 0.3s cubic-bezier(0.32, 0.72, 0, 1) both; +} +.messages-media-picker > header { + height: 40px; + padding: 0 13px 0 16px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #e4e4e7; +} +.messages-media-picker > header strong { + font-size: 14px; +} +.messages-media-picker > header small { margin-left: auto; color: #8e8e93; font-size: 9px; font-weight: 650; } +.messages-media-picker > header button { + border: 0; + background: transparent; + color: #007aff; + font-size: 12px; +} +.messages-media-picker__photos { + height: 204px; + padding: 7px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 82px; + gap: 5px; + overflow-y: auto; +} +.messages-media-picker__photos button { + border: 0; + border-radius: 10px; + box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%); +} +.messages-media-picker__gifs { + height: 204px; + padding: 8px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 7px; + overflow-y: auto; +} +.messages-media-picker__gifs button { + min-height: 83px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; + border: 0; + border-radius: 13px; + background: linear-gradient(145deg, #fff, #ececf2); + box-shadow: 0 5px 14px rgb(0 0 0 / 7%); +} +.messages-media-picker__gifs span { + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; + font-size: 35px; + animation: messages-gif-bounce 1.3s ease-in-out infinite alternate; +} +.messages-media-picker__gifs strong { + font-size: 11px; +} +.messages-media-picker__videos { + height: 204px; + padding: 8px; + display: flex; + flex-direction: column; + gap: 7px; + overflow-y: auto; +} +.messages-media-picker__videos button { + min-height: 53px; + padding: 0 11px; + display: grid; + grid-template-columns: 36px 1fr auto; + align-items: center; + gap: 9px; + border: 0; + border-radius: 13px; + background: linear-gradient(135deg, #302b63, #a6c1ee); + color: #fff; + text-align: left; +} +.messages-video-option--sunset-loop { + background: linear-gradient(135deg, #141e30, #ff9a62) !important; +} +.messages-video-option--ocean-loop { + background: linear-gradient(135deg, #0b132b, #67d5b5) !important; +} +.messages-media-picker__videos button > span { + width: 32px; + height: 32px; + display: grid; + place-items: center; + border-radius: 50%; + background: rgb(255 255 255 / 20%); +} +.messages-media-picker__videos strong { font-size: 12px; } +.messages-media-picker__videos small { font-size: 10px; opacity: 0.8; } +.messages-emoji-picker { + position: fixed; + z-index: 41; + right: 0; + bottom: 74px; + left: 0; + height: 214px; + overflow: hidden; + border-top: 1px solid rgb(60 60 67 / 20%); + background: rgb(244 244 246 / 96%); + box-shadow: 0 -8px 30px rgb(0 0 0 / 12%); + animation: messages-panel-in 0.32s cubic-bezier(0.32, 0.72, 0, 1) both; + backdrop-filter: blur(28px); + -webkit-backdrop-filter: blur(28px); +} +.dark .messages-emoji-picker { + border-color: rgb(60 60 67 / 20%); + background: rgb(244 244 246 / 96%); +} +.messages-emoji-picker__categories { + height: 39px; + padding: 4px 10px; + display: flex; + align-items: center; + justify-content: space-around; + border-bottom: 1px solid rgb(60 60 67 / 12%); +} +.messages-emoji-picker__categories button { + width: 34px; + height: 29px; + border: 0; + border-radius: 9px; + background: transparent; + font-size: 17px; + filter: grayscale(0.65); + transition: all 0.18s ease; +} +.messages-emoji-picker__categories button.active { + background: rgb(118 118 128 / 17%); + filter: none; + transform: scale(1.08); +} +.messages-emoji-picker__grid { + height: 175px; + padding: 8px 10px 14px; + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-auto-rows: 35px; + overflow-y: auto; +} +.messages-emoji-picker__grid button { + display: grid; + place-items: center; + border: 0; + background: transparent; + font-size: 23px; + transition: transform 0.12s ease; +} +.messages-emoji-picker__grid button:active { + transform: scale(1.32); +} +.messages-recorder { + position: fixed; + z-index: 43; + right: 7px; + bottom: 28px; + left: 7px; + height: 46px; + padding: 0 7px; + display: flex; + align-items: center; + gap: 7px; + border: 1px solid rgb(120 120 128 / 27%); + border-radius: 24px; + background: rgb(246 246 248 / 94%); + box-shadow: 0 7px 28px rgb(0 0 0 / 22%); + animation: messages-recorder-in 0.3s cubic-bezier(0.22, 1.3, 0.36, 1) both; + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); +} +.dark .messages-recorder { + background: rgb(246 246 248 / 94%); + color: #111; +} +.messages-recorder button { + width: 32px; + height: 32px; + display: grid; + flex: none; + place-items: center; + border: 0; + border-radius: 50%; +} +.messages-recorder__cancel { + background: rgb(120 120 128 / 16%); + color: #8e8e93; +} +.messages-recorder__send { + background: transparent; + color: #0a84ff; +} +.messages-recorder__dot { + width: 7px; + height: 7px; + flex: none; + border-radius: 50%; + background: #ff453a; + box-shadow: 0 0 0 4px rgb(255 69 58 / 15%); + animation: messages-record-pulse 1.2s ease-in-out infinite; +} +.messages-recorder time { + width: 31px; + flex: none; + font-size: 10px; + font-variant-numeric: tabular-nums; +} +.messages-recorder__wave { + height: 28px; + display: flex; + flex: 1; + align-items: center; + justify-content: flex-end; + gap: 1px; + overflow: hidden; +} +.messages-recorder__wave i { + width: 2px; + flex: none; + border-radius: 2px; + background: #ff453a; + transition: height 0.09s linear; +} +.voice-message { + min-width: 165px; + display: flex; + align-items: center; + gap: 8px; +} +.voice-message__play { + width: 29px; + height: 29px; + display: grid; + flex: none; + place-items: center; + border: 0; + border-radius: 50%; + background: rgb(255 255 255 / 22%); + color: inherit; +} +.voice-message__content { + min-width: 0; + display: flex; + flex: 1; + flex-direction: column; + gap: 3px; +} +.voice-message__content > span { + font-size: 9px; + font-variant-numeric: tabular-nums; + opacity: 0.7; +} +.voice-message__waveform { + height: 24px; + display: flex; + align-items: center; + gap: 1.5px; +} +.voice-message__waveform i { + width: 2px; + border-radius: 2px; + background: currentColor; + opacity: 0.35; + transition: opacity 0.12s ease; +} +.voice-message__waveform i.active { + opacity: 1; +} +.voice-message audio { + display: none; +} +.voice-message--failed { + opacity: 0.6; +} +.voice-message__loader { + width: 13px; + height: 13px; + border: 2px solid currentColor; + border-right-color: transparent; + border-radius: 50%; + animation: messages-spin 0.7s linear infinite; +} +.messages-attachment { + position: relative; + width: 205px; + height: 132px; + overflow: hidden; + border: 0; + border-radius: 17px; + color: #fff; +} +.messages-attachment--image { + display: flex; + align-items: flex-end; + justify-content: flex-end; + padding: 9px; + box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%); +} +.messages-attachment--image svg { + padding: 4px; + border-radius: 50%; + background: rgb(0 0 0 / 25%); +} +.messages-attachment--video { + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} +.messages-attachment--video::before { + content: ''; + position: absolute; + inset: -20%; + background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 20%), transparent 70%); + transform: translateX(-70%); +} +.messages-attachment--video.playing::before { + animation: messages-video-play 1.8s linear infinite; +} +.messages-attachment--video > span { + width: 47px; + height: 47px; + display: grid; + place-items: center; + border-radius: 50%; + background: rgb(0 0 0 / 28%); + backdrop-filter: blur(8px); +} +.messages-attachment--video small { + position: absolute; + right: 9px; + bottom: 8px; + padding: 2px 6px; + border-radius: 8px; + background: rgb(0 0 0 / 35%); + font-size: 9px; +} +.messages-attachment--gif { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: linear-gradient(145deg, #f6eefe, #e8f4ff); + color: #111; +} +.messages-attachment--gif span { + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; + font-size: 60px; + animation: messages-gif-bounce 0.9s ease-in-out infinite alternate; +} +.messages-attachment--gif strong { + margin-top: 4px; + font-size: 13px; +} +.messages-contact-details { + position: fixed; + z-index: 58; + top: 44px; + right: 0; + bottom: 25px; + left: 0; + overflow-y: auto; + background: #f2f2f7; + color: #111; + animation: messages-contact-in 0.32s cubic-bezier(0.32, 0.72, 0, 1) both; +} +.messages-contact-details > header { + height: 53px; + padding: 0 10px; + display: grid; + grid-template-columns: 40px 1fr 40px; + align-items: center; + border-bottom: 1px solid #dedee2; + background: rgb(255 255 255 / 92%); +} +.messages-contact-details > header strong { + text-align: center; + font-size: 15px; +} +.messages-contact-details > header button { + width: 36px; + height: 36px; + display: grid; + place-items: center; + border: 0; + border-radius: 50%; + background: transparent; + color: #007aff; +} +.messages-contact-details__hero { + padding: 22px 16px 14px; + display: flex; + flex-direction: column; + align-items: center; +} +.messages-avatar--contact { + width: 78px; + height: 78px; +} +.messages-avatar--contact .messages-avatar__glyph { + padding-top: 10px; + font-size: 57px; +} +.messages-contact-details__hero h2 { + margin: 10px 0 2px; + font-size: 20px; +} +.messages-contact-details__hero small { color: #8e8e93; } +.messages-contact-details__actions { + padding: 0 45px 16px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 11px; +} +.messages-contact-details__actions button { + height: 55px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3px; + border: 0; + border-radius: 14px; + background: #fff; + color: #007aff; + font-size: 10px; +} +.messages-contact-details__fields { + margin: 0 11px; + overflow: hidden; + border-radius: 13px; + background: #fff; +} +.messages-contact-details__fields label { + min-height: 54px; + padding: 7px 13px; + display: flex; + flex-direction: column; + gap: 2px; + border-bottom: 1px solid #e5e5e8; +} +.messages-contact-details__fields label:last-child { border-bottom: 0; } +.messages-contact-details__fields span { + color: #8e8e93; + font-size: 9px; +} +.messages-contact-details__fields input { + border: 0; + outline: 0; + background: transparent; + color: #111; + font-size: 13px; +} +.messages-contact-details__fields input:not([readonly]) { color: #007aff; } +.messages-contact-details__primary, +.messages-contact-details__delete { + width: calc(100% - 22px); + height: 44px; + margin: 12px 11px; + display: flex; + align-items: center; + justify-content: center; + gap: 7px; + border: 0; + border-radius: 13px; + background: #fff; + color: #007aff; + font-size: 13px; +} +.messages-contact-details__delete { color: #ff3b30; } +@keyframes messages-send-in { + from { + opacity: 0; + transform: translate(24px, 18px) scale(0.72); + } + 72% { + transform: translate(-2px, -1px) scale(1.025); + } + to { + opacity: 1; + transform: none; + } +} +@keyframes messages-action-menu-in { + from { opacity: 0; transform: translate(-8px, 18px) scale(0.84); } + to { opacity: 1; transform: none; } +} +@keyframes messages-gif-bounce { + to { transform: translateY(-5px) rotate(4deg) scale(1.05); } +} +@keyframes messages-video-play { + to { transform: translateX(70%); } +} +@keyframes messages-contact-in { + from { opacity: 0; transform: translateX(35%); } + to { opacity: 1; transform: none; } +} +/* iOS 26-style Liquid Glass refinements and complete media pickers. */ +.phone-app:has(.messages-page) { + --ios-glass: rgb(252 252 255 / 70%); + --ios-glass-strong: rgb(255 255 255 / 86%); + --ios-glass-border: rgb(255 255 255 / 72%); + --ios-blue: #007aff; +} +.messages-inbox-header, +.messages-chat-header, +.messages-contact-details > header { + border-bottom: 1px solid rgb(60 60 67 / 10%); + background: linear-gradient(180deg, rgb(255 255 255 / 82%), rgb(248 248 252 / 62%)); + box-shadow: inset 0 1px 0 var(--ios-glass-border); + backdrop-filter: blur(30px) saturate(190%); + -webkit-backdrop-filter: blur(30px) saturate(190%); +} +.messages-inbox-header > button:not(.messages-inbox-header__edit), +.messages-chat-header__back, +.messages-inbox-toolbar > button, +.messages-messagebar__tools button { + border: 1px solid rgb(255 255 255 / 78%); + background: linear-gradient(145deg, rgb(255 255 255 / 90%), rgb(236 238 244 / 68%)); + box-shadow: inset 0 1px 0 #fff, 0 5px 16px rgb(32 40 60 / 11%); + backdrop-filter: blur(22px) saturate(175%); + -webkit-backdrop-filter: blur(22px) saturate(175%); +} +.messages-inbox-toolbar label, +.messages-edit-toolbar, +.messages-messagebar, +.messages-chat-header__name { + border-color: rgb(255 255 255 / 74%); + background: linear-gradient(145deg, rgb(255 255 255 / 88%), rgb(242 243 248 / 69%)); + box-shadow: inset 0 1px 0 #fff, 0 7px 24px rgb(24 31 50 / 10%); + backdrop-filter: blur(30px) saturate(185%); + -webkit-backdrop-filter: blur(30px) saturate(185%); +} +.messages-conversation { + transition: transform 160ms cubic-bezier(.2,.8,.2,1), background 160ms ease; +} +.messages-conversation:active { transform: scale(.985); } +.messages-attachment-menu > button { + border-color: rgb(255 255 255 / 78%); + background: linear-gradient(145deg, rgb(255 255 255 / 91%), rgb(239 241 247 / 73%)); + box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgb(22 30 48 / 15%); + backdrop-filter: blur(28px) saturate(190%); + -webkit-backdrop-filter: blur(28px) saturate(190%); +} +.messages-attachment-menu > button:active { transform: scale(.96); } +.messages-attachment-menu > button[aria-disabled='true'] { + opacity: .48; + cursor: default; +} +.messages-attachment-menu > button[aria-disabled='true']:active { transform: none; } +.messages-thread-page--emoji { padding-bottom: 392px !important; } +.messages-media-picker { height: 310px; background: rgb(247 247 251 / 82%); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); } +.messages-media-picker__photos, +.messages-media-picker__gifs, +.messages-media-picker__videos { height: 270px; } +.messages-media-picker__photos button { background-position: center !important; background-size: cover !important; } +.messages-media-picker__empty { grid-column: 1 / -1; margin: auto; padding: 25px; color: #8e8e93; font-size: 12px; text-align: center; } +.messages-gif-search { grid-column: 1 / -1; position: sticky; z-index: 2; top: 0; height: 34px; padding: 0 11px; display: flex; align-items: center; gap: 6px; border-radius: 17px; background: rgb(118 118 128 / 12%); color: #8e8e93; } +.messages-gif-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 12px; } +.messages-media-picker__gifs button { min-height: 92px; overflow: hidden; padding: 0; background: #e9e9ed; } +.messages-media-picker__gifs button img { width: 100%; height: 100%; object-fit: cover; } +.messages-media-picker__gifs .messages-gif-more { min-height: 36px; grid-column: 1 / -1; color: var(--ios-blue); font-size: 12px; font-weight: 650; } +.messages-gif-loading { grid-column: 1 / -1; justify-self: center; } +.messages-gif-error { + grid-column: 1 / -1; + min-height: 150px; + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + color: #8e8e93; + text-align: center; +} +.messages-gif-error strong { max-width: 220px; font-size: 12px; font-weight: 550; } +.messages-media-picker__gifs .messages-gif-error button { + min-height: 32px; + padding: 0 14px; + border-radius: 16px; + background: rgb(0 122 255 / 13%); + box-shadow: none; + color: var(--ios-blue); + font-size: 12px; + font-weight: 650; +} +.messages-media-picker__videos button { position: relative; overflow: hidden; min-height: 92px; padding: 0; grid-template-columns: 1fr; } +.messages-media-picker__videos button video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } +.messages-media-picker__videos button > span { position: relative; z-index: 1; justify-self: center; } +.messages-media-picker__videos button small { position: absolute; z-index: 1; right: 7px; bottom: 6px; padding: 2px 6px; border-radius: 9px; background: rgb(0 0 0 / 48%); } +.messages-full-emoji-picker { + position: fixed; + z-index: 47; + right: 0; + bottom: 78px; + left: 0; + height: 318px; + overflow: hidden; + border-top: 1px solid rgb(255 255 255 / 76%); + background: rgb(247 247 251 / 84%); + box-shadow: 0 -10px 34px rgb(20 26 43 / 13%); + animation: messages-panel-in .32s cubic-bezier(.32,.72,0,1) both; + backdrop-filter: blur(34px) saturate(190%); + -webkit-backdrop-filter: blur(34px) saturate(190%); +} +.messages-full-emoji-picker > header { height: 38px; padding: 0 12px 0 16px; display: flex; align-items: center; justify-content: space-between; } +.messages-full-emoji-picker > header strong { font-size: 14px; } +.messages-full-emoji-picker > header button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(118 118 128 / 13%); color: #5d5d62; } +.messages-full-emoji-picker__search { height: 31px; margin: 0 10px 4px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border-radius: 16px; background: rgb(118 118 128 / 13%); color: #8e8e93; } +.messages-full-emoji-picker__search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 12px; } +.messages-full-emoji-picker nav { height: 34px; padding: 1px 7px 4px; display: flex; gap: 1px; overflow-x: auto; border-bottom: 1px solid rgb(60 60 67 / 10%); } +.messages-full-emoji-picker nav i { width: 1px; height: 21px; margin: 4px 4px; flex: none; background: rgb(60 60 67 / 16%); } +.messages-full-emoji-picker nav button { min-width: 32px; height: 29px; border: 0; border-radius: 9px; background: transparent; filter: grayscale(.55); } +.messages-full-emoji-picker nav button.active { background: rgb(118 118 128 / 14%); filter: none; } +.messages-full-emoji-picker__grid { height: 211px; padding: 7px 9px 18px; display: grid; grid-template-columns: repeat(7,1fr); grid-auto-rows: 38px; overflow-y: auto; } +.messages-full-emoji-picker__grid button { display: grid; place-items: center; border: 0; background: transparent; font-family: 'Apple Color Emoji','Segoe UI Emoji',sans-serif; font-size: 24px; transition: transform .12s ease; } +.messages-full-emoji-picker__grid button:active { transform: scale(1.35); } +.messages-attachment--image { padding: 0; } +.messages-attachment--image img, +.messages-attachment--gif img, +.messages-attachment--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } +.messages-attachment--video > span, +.messages-attachment--video small { z-index: 2; } +.messages-attachment--gif:has(img) { background: #e9e9ed; } + +/* Konsta's k-app dark state drives the complete iOS Messages palette. */ +.phone-app.dark:has(.messages-page) { + --ios-glass: rgb(28 28 30 / 76%); + --ios-glass-strong: rgb(36 36 38 / 90%); + --ios-glass-border: rgb(255 255 255 / 12%); + color-scheme: dark; +} +.phone-app.dark:has(.messages-page)::before { background: #000; } +.phone-app.dark:has(.messages-page) .phone-status-bar { + color: #fff; + text-shadow: none; +} +.phone-app.dark .messages-page { + background: #000 !important; + color: #f5f5f7; + color-scheme: dark; +} +.phone-app.dark .messages-inbox-header, +.phone-app.dark .messages-chat-header, +.phone-app.dark .messages-contact-details > header { + border-color: rgb(84 84 88 / 55%); + background: linear-gradient(180deg, rgb(28 28 30 / 90%), rgb(0 0 0 / 78%)); + box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%); +} +.phone-app.dark .messages-inbox-header > span, +.phone-app.dark .messages-inbox-header > strong, +.phone-app.dark .messages-conversation, +.phone-app.dark .messages-chat-header__name, +.phone-app.dark .messages-empty-state h2, +.phone-app.dark .messages-contact-details, +.phone-app.dark .messages-contact-details__fields input { + color: #f5f5f7; +} +.phone-app.dark .messages-inbox-header > button:not(.messages-inbox-header__edit), +.phone-app.dark .messages-chat-header__back, +.phone-app.dark .messages-inbox-toolbar > button, +.phone-app.dark .messages-messagebar__tools button, +.phone-app.dark .messages-attachment-menu > button { + border-color: rgb(255 255 255 / 10%); + background: linear-gradient(145deg, rgb(58 58 60 / 92%), rgb(28 28 30 / 78%)); + box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 7px 22px rgb(0 0 0 / 32%); + color: #f5f5f7; +} +.phone-app.dark .messages-conversation::after, +.phone-app.dark .messages-contact-details__fields label, +.phone-app.dark .messages-media-picker > header, +.phone-app.dark .messages-full-emoji-picker nav { + border-color: rgb(84 84 88 / 55%); +} +.phone-app.dark .messages-conversation:active, +.phone-app.dark .messages-conversation--selected { background: #1c1c1e; } +.phone-app.dark .messages-conversation__selection { + border-color: #636366; + background: #1c1c1e; +} +.phone-app.dark .messages-conversation--selected .messages-conversation__selection { + border-color: #0a84ff; + background: #0a84ff; +} +.phone-app.dark .messages-conversation__headline time, +.phone-app.dark .messages-conversation__headline svg, +.phone-app.dark .messages-conversation__preview, +.phone-app.dark .messages-thread-timestamp, +.phone-app.dark .messages-empty-state p, +.phone-app.dark .messages-contact-details__hero small, +.phone-app.dark .messages-contact-details__fields span { + color: #98989f; +} +.phone-app.dark .messages-inbox-toolbar label, +.phone-app.dark .messages-edit-toolbar, +.phone-app.dark .messages-messagebar, +.phone-app.dark .messages-chat-header__name { + border-color: rgb(255 255 255 / 11%); + background: linear-gradient(145deg, rgb(48 48 50 / 92%), rgb(28 28 30 / 80%)); + box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 8px 26px rgb(0 0 0 / 32%); +} +.phone-app.dark .messages-inbox-toolbar input, +.phone-app.dark .messages-messagebar textarea, +.phone-app.dark .messages-gif-search input, +.phone-app.dark .messages-full-emoji-picker__search input { + color: #f5f5f7 !important; +} +.phone-app.dark .messages-bubbles .k-message:not(.self-end) > div > div { + background: #2c2c2e !important; + color: #fff !important; +} +.phone-app.dark .messages-bubbles .k-message:not(.self-end) > div > div::after { background: #2c2c2e; } +.phone-app.dark .messages-media-picker, +.phone-app.dark .messages-full-emoji-picker, +.phone-app.dark .messages-emoji-picker { + border-color: rgb(255 255 255 / 10%); + background: rgb(28 28 30 / 91%); + box-shadow: 0 -10px 34px rgb(0 0 0 / 38%); + color: #f5f5f7; +} +.phone-app.dark .messages-gif-search, +.phone-app.dark .messages-full-emoji-picker__search, +.phone-app.dark .messages-full-emoji-picker > header button, +.phone-app.dark .messages-full-emoji-picker nav button.active { + background: rgb(118 118 128 / 28%); +} +.phone-app.dark .messages-media-picker__gifs button { background: #2c2c2e; } +.phone-app.dark .messages-media-picker__gifs .messages-gif-more, +.phone-app.dark .messages-media-picker__gifs .messages-gif-error button { + background: rgb(10 132 255 / 20%); + color: #0a84ff; +} +.phone-app.dark .messages-recorder { + border-color: rgb(255 255 255 / 11%); + background: rgb(36 36 38 / 94%); + color: #f5f5f7; +} +.phone-app.dark .messages-contact-details { background: #000; } +.phone-app.dark .messages-contact-details__actions button, +.phone-app.dark .messages-contact-details__fields, +.phone-app.dark .messages-contact-details__primary, +.phone-app.dark .messages-contact-details__delete { + background: #1c1c1e; +} +.phone-app.dark .messages-avatar--header { border-color: #2c2c2e; } + +/* Native iOS Messages thread treatment shared by light and dark appearances. */ +.messages-thread-page { + --messages-thread-background: #fff; + --messages-thread-control: #fff; + --messages-thread-control-border: rgb(60 60 67 / 9%); + --messages-thread-control-shadow: 0 8px 24px rgb(0 0 0 / 8%); + --messages-thread-field: #fff; + --messages-thread-field-border: #e5e5ea; + --messages-thread-received: #e9e9eb; + --messages-thread-primary: #111; + --messages-thread-secondary: #8e8e93; + background: var(--messages-thread-background) !important; +} +.messages-thread-page .messages-chat-header { + height: 148px; + border-bottom: 0; + background: var(--messages-thread-background); + box-shadow: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; +} +.messages-thread-page .messages-chat-header__back { + top: 16px; + width: 46px; + height: 46px; + padding: 0; + display: grid; + place-items: center; + border-color: var(--messages-thread-control-border); + background: var(--messages-thread-control); + box-shadow: var(--messages-thread-control-shadow); + color: var(--messages-thread-primary); + line-height: 0; +} +.messages-thread-page .messages-chat-header__back svg { + display: block; + margin: 0; +} +.messages-thread-page .messages-chat-header__contact { top: 4px; } +.messages-thread-page .messages-avatar--header { + width: 64px; + height: 64px; + margin-bottom: 6px; +} +.messages-thread-page .messages-chat-header__name { + min-width: 0; + max-width: 230px; + height: 32px; + padding: 0 11px; + justify-content: center; + border-color: var(--messages-thread-control-border); + border-radius: 18px; + background: var(--messages-thread-control); + box-shadow: var(--messages-thread-control-shadow); + color: var(--messages-thread-primary); + line-height: 1; +} +.messages-thread-page .messages-chat-header__name strong { + font-size: 16px; + line-height: 1; +} +.messages-thread-page .messages-chat-header__name svg { + display: block; + margin: 0; +} +.messages-avatar--unknown { + background: linear-gradient(145deg, #a8bee4, #7e98ca) !important; +} +.messages-avatar__placeholder { + position: relative; + width: 100%; + height: 100%; + display: block; +} +.messages-avatar__placeholder i { + position: absolute; + top: 19%; + left: 50%; + width: 35%; + aspect-ratio: 1; + border-radius: 50%; + background: #fff; + transform: translateX(-50%); +} +.messages-avatar__placeholder b { + position: absolute; + right: 17%; + bottom: 8%; + left: 17%; + height: 37%; + border-radius: 50% 50% 44% 44%; + background: #fff; +} +.messages-thread-page .messages-bubbles { + padding-right: 16px; + padding-left: 16px; +} +.messages-thread-page .messages-bubbles [class*='message-bubble'] { + max-width: 270px; + padding: 9px 13px; + border-radius: 22px; + font-size: 16px; + line-height: 1.28; +} +.messages-thread-page .messages-bubbles .k-message { max-width: 86% !important; } +.messages-thread-page .messages-bubbles .k-message:not(.self-end) > div > div { + background: var(--messages-thread-received) !important; + color: var(--messages-thread-primary) !important; +} +.messages-thread-page .messages-bubbles .k-message:not(.self-end) > div > div::after { + background: var(--messages-thread-received); +} +.messages-thread-page .messages-thread-timestamp { color: var(--messages-thread-secondary); } +.messages-thread-page .messages-message--failed { position: relative; } +.messages-thread-page .messages-message--failed.self-end::after { + content: '!'; + position: absolute; + top: 50%; + right: -29px; + width: 22px; + height: 22px; + display: grid; + place-items: center; + border: 2px solid #ff3b30; + border-radius: 50%; + color: #ff3b30; + font-size: 15px; + font-weight: 750; + line-height: 1; + transform: translateY(-50%); +} +.messages-thread-page .messages-message--failed [class*='message-footer'] { + color: #ff3b30 !important; + font-weight: 650; +} +.messages-thread-page .messages-messagebar { + border-color: var(--messages-thread-field-border); + background: var(--messages-thread-field); + box-shadow: var(--messages-thread-control-shadow); +} +.messages-thread-page .messages-messagebar textarea { color: var(--messages-thread-primary) !important; } +.messages-thread-page .messages-messagebar__tools button { + padding: 0; + display: grid; + place-items: center; + border-color: var(--messages-thread-control-border); + background: var(--messages-thread-control); + box-shadow: var(--messages-thread-control-shadow); + color: var(--messages-thread-primary); +} +.phone-app.dark .messages-thread-page { + --messages-thread-background: #000; + --messages-thread-control: #1c1c1e; + --messages-thread-control-border: #38383a; + --messages-thread-control-shadow: none; + --messages-thread-field: #1c1c1e; + --messages-thread-field-border: #38383a; + --messages-thread-received: #29292c; + --messages-thread-primary: #f5f5f7; + --messages-thread-secondary: #8e8e93; +} +.phone-app.dark .messages-thread-page .messages-chat-header, +.phone-app.dark .messages-thread-page .messages-chat-header__name, +.phone-app.dark .messages-thread-page .messages-chat-header__back, +.phone-app.dark .messages-thread-page .messages-messagebar, +.phone-app.dark .messages-thread-page .messages-messagebar__tools button { + background: var(--messages-thread-control); + box-shadow: none; +} +.phone-app.dark .messages-thread-page .messages-chat-header { background: #000; } +.phone-app.dark .messages-thread-page .messages-avatar--unknown { + border-color: #000; + background: linear-gradient(145deg, #625c79, #3f3a55) !important; +} +.messages-thread-page .messages-messagebar, +.phone-app.dark .messages-thread-page .messages-messagebar { + min-height: 46px; + padding: 0 !important; + border: 0; + background: transparent; + box-shadow: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; +} +.messages-thread-page .messages-messagebar > .k-toolbar { background: transparent; } +.messages-thread-page .messages-messagebar > .k-toolbar > div:nth-child(2) { + position: relative; + width: 100%; + height: 46px !important; + display: grid; + grid-template-columns: 46px minmax(0, 1fr); + align-items: center; + gap: 10px !important; +} +.messages-thread-page .messages-messagebar > .k-toolbar > div:nth-child(2) > div:first-child, +.messages-thread-page .messages-messagebar__tools, +.messages-thread-page .messages-messagebar__tools button { + width: 46px; + height: 46px; +} +.messages-thread-page .messages-messagebar__tools button { + border-color: var(--messages-thread-control-border); + border-radius: 50%; + background: var(--messages-thread-control); + box-shadow: var(--messages-thread-control-shadow); + line-height: 0; +} +.messages-thread-page .messages-messagebar__tools button svg { + display: block; + margin: 0; +} +.messages-thread-page .messages-attachment-menu > button { + padding-right: 8px; + padding-left: 8px; + justify-content: center; + line-height: 1; +} +.messages-thread-page .messages-attachment-menu > button > span { + flex: none; + line-height: 1; +} +.messages-thread-page .messages-attachment-menu > button > span svg { + display: block; + margin: 0; +} +.messages-thread-page .messages-messagebar > .k-toolbar > div:nth-child(2) > .k-glass { + width: 100%; + height: 46px; + grid-column: 2; + border: 1px solid var(--messages-thread-field-border) !important; + border-radius: 24px; + background: var(--messages-thread-field) !important; + box-shadow: var(--messages-thread-control-shadow) !important; +} +.messages-thread-page .messages-messagebar > .k-toolbar > div:nth-child(2) > div:last-child { + position: absolute; + z-index: 2; + top: 50%; + right: 6px; + width: 34px; + height: 34px; + display: grid; + place-items: center; + transform: translateY(-50%); +} +.messages-thread-page .messages-messagebar > .k-toolbar > div:nth-child(2) > div:last-child .k-toolbar-pane, +.messages-thread-page .messages-messagebar > .k-toolbar > div:nth-child(2) > div:last-child .k-link { + width: 34px !important; + height: 34px !important; + padding: 0 !important; + display: grid !important; + place-items: center !important; + line-height: 0; +} +.messages-thread-page .messages-messagebar > .k-toolbar > div:nth-child(2) > div:last-child svg { + display: block; + margin: 0; + transform: none; +} +.messages-thread-page .messages-messagebar textarea { + height: 44px !important; + padding: 13px 42px 7px 15px !important; + border: 0 !important; + background: transparent !important; +} + +/* Native iOS Messages conversation list in matching light and dark palettes. */ +.messages-inbox-page { + --messages-inbox-background: #fff; + --messages-inbox-control: #fff; + --messages-inbox-control-border: rgb(60 60 67 / 9%); + --messages-inbox-control-shadow: 0 8px 24px rgb(0 0 0 / 9%); + --messages-inbox-primary: #111; + --messages-inbox-secondary: #8e8e93; + --messages-inbox-separator: #e5e5ea; + padding: 112px 0 92px !important; + background: var(--messages-inbox-background) !important; + color: var(--messages-inbox-primary); +} +.messages-inbox-page .messages-inbox-header { + height: 68px; + padding: 0 14px; + border: 0; + background: var(--messages-inbox-background); + box-shadow: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; +} +.messages-inbox-page .messages-inbox-header > strong { + color: var(--messages-inbox-primary); + font-size: 19px; + font-weight: 750; + letter-spacing: -0.025em; +} +.messages-inbox-page .messages-inbox-header > button { + width: 46px; + height: 46px; + padding: 0; + display: grid; + place-items: center; + border: 1px solid var(--messages-inbox-control-border); + background: var(--messages-inbox-control); + box-shadow: var(--messages-inbox-control-shadow); + color: var(--messages-inbox-primary); + line-height: 1; +} +.messages-inbox-page .messages-inbox-header > button svg { + display: block; + flex: none; +} +.messages-inbox-page .messages-inbox-header > button.active { + border-color: rgb(10 132 255 / 30%); + background: rgb(10 132 255 / 16%); + color: #0a84ff; +} +.messages-inbox-page .messages-inbox-header__edit { + width: 76px !important; + height: 44px !important; + padding: 0 18px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 22px !important; + color: var(--messages-inbox-primary) !important; + font-size: 15px; + font-weight: 600; + line-height: 1; +} +.messages-inbox-page .messages-inbox-header__edit > span { + display: block; + transform: translateY(1px); +} +.messages-inbox-page .messages-conversation-list { padding: 4px 14px 18px; } +.messages-inbox-page .messages-conversation { + min-height: 88px; + padding: 10px 0 10px 8px; + gap: 13px; + color: var(--messages-inbox-primary); +} +.messages-inbox-page .messages-conversation::after { + left: 65px; + background: var(--messages-inbox-separator); +} +.messages-inbox-page .messages-conversation:active, +.messages-inbox-page .messages-conversation--selected { + background: color-mix(in srgb, var(--messages-inbox-control) 86%, #0a84ff 14%); +} +.messages-inbox-page .messages-conversation__dot { + left: -9px; + width: 9px; + height: 9px; + background: #0a84ff; +} +.messages-inbox-page .messages-avatar { + width: 50px; + height: 50px; +} +.messages-inbox-page .messages-avatar__glyph { + padding-top: 6px; + font-size: 34px; +} +.messages-inbox-page .messages-conversation__body { gap: 3px; } +.messages-inbox-page .messages-conversation__headline { + grid-template-columns: minmax(0, 1fr) auto 16px; + gap: 5px; +} +.messages-inbox-page .messages-conversation__headline strong { + color: var(--messages-inbox-primary); + font-size: 17px; + font-weight: 650; +} +.messages-inbox-page .messages-conversation--unread .messages-conversation__headline strong { + font-weight: 780; +} +.messages-inbox-page .messages-conversation__headline time, +.messages-inbox-page .messages-conversation__headline svg, +.messages-inbox-page .messages-conversation__preview { + color: var(--messages-inbox-secondary); +} +.messages-inbox-page .messages-conversation__headline time { font-size: 13px; } +.messages-inbox-page .messages-conversation__headline svg { + width: 16px; + height: 16px; +} +.messages-inbox-page .messages-conversation__preview { + min-height: 36px; + font-size: 14px; + line-height: 1.32; +} +.messages-inbox-page .messages-inbox-toolbar { + right: 13px; + bottom: 29px; + left: 13px; + height: 50px; + gap: 10px; +} +.messages-inbox-page .messages-inbox-toolbar label { + height: 48px; + padding: 0 14px; + border-color: var(--messages-inbox-control-border); + border-radius: 25px; + background: var(--messages-inbox-control); + box-shadow: var(--messages-inbox-control-shadow); + color: var(--messages-inbox-secondary); +} +.messages-inbox-page .messages-inbox-toolbar label > svg:first-child { + width: 22px; + height: 22px; + color: var(--messages-inbox-primary); +} +.messages-inbox-page .messages-inbox-toolbar label > svg:last-child { + width: 21px; + height: 21px; + color: var(--messages-inbox-primary); +} +.messages-inbox-page .messages-inbox-toolbar input { + color: var(--messages-inbox-primary); + font-size: 16px; +} +.messages-inbox-page .messages-inbox-toolbar > button { + width: 48px; + height: 48px; + padding: 0; + display: grid; + place-items: center; + border-color: var(--messages-inbox-control-border); + background: var(--messages-inbox-control); + box-shadow: var(--messages-inbox-control-shadow); + color: var(--messages-inbox-primary); +} +.messages-inbox-page .messages-inbox-toolbar > button svg { + width: 24px; + height: 24px; + display: block; + flex: none; +} +.messages-inbox-page .messages-inbox-header > button:not(.messages-inbox-header__edit) svg, +.messages-inbox-page .messages-inbox-toolbar > button svg { + transform: translateY(1px); +} +.phone-app.dark .messages-inbox-page { + --messages-inbox-background: #000; + --messages-inbox-control: #1c1c1e; + --messages-inbox-control-border: #38383a; + --messages-inbox-control-shadow: none; + --messages-inbox-primary: #f5f5f7; + --messages-inbox-secondary: #8e8e93; + --messages-inbox-separator: #2c2c2e; +} +.phone-app.dark .messages-inbox-page .messages-inbox-header, +.phone-app.dark .messages-inbox-page .messages-inbox-header > button, +.phone-app.dark .messages-inbox-page .messages-inbox-toolbar label, +.phone-app.dark .messages-inbox-page .messages-inbox-toolbar > button { + background: var(--messages-inbox-control); + box-shadow: none; +} +.phone-app.dark .messages-inbox-page .messages-inbox-header { background: #000; } +.phone-app.dark .messages-inbox-page .messages-avatar--unknown { + border-color: #000; + background: linear-gradient(145deg, #625c79, #3f3a55) !important; +} +@keyframes messages-panel-in { + from { + opacity: 0; + transform: translateY(36px); + } + to { + opacity: 1; + transform: none; + } +} +@keyframes messages-recorder-in { + from { + opacity: 0; + transform: translateY(14px) scale(0.92); + } + to { + opacity: 1; + transform: none; + } +} +@keyframes messages-record-pulse { + 50% { + opacity: 0.45; + transform: scale(0.82); + } +} +@keyframes messages-spin { + to { + transform: rotate(360deg); + } +} @media (prefers-reduced-motion: reduce) { *, *::before, diff --git a/frontend/src/components/FullEmojiPicker.vue b/frontend/src/components/FullEmojiPicker.vue new file mode 100644 index 0000000..725130a --- /dev/null +++ b/frontend/src/components/FullEmojiPicker.vue @@ -0,0 +1,100 @@ + + + diff --git a/frontend/src/components/MessageAttachmentBubble.vue b/frontend/src/components/MessageAttachmentBubble.vue new file mode 100644 index 0000000..a8372f1 --- /dev/null +++ b/frontend/src/components/MessageAttachmentBubble.vue @@ -0,0 +1,98 @@ + + + diff --git a/frontend/src/components/VoiceMessageBubble.vue b/frontend/src/components/VoiceMessageBubble.vue new file mode 100644 index 0000000..11fff5c --- /dev/null +++ b/frontend/src/components/VoiceMessageBubble.vue @@ -0,0 +1,103 @@ + + + diff --git a/frontend/src/config/apps.test.ts b/frontend/src/config/apps.test.ts index 3255ec2..8933988 100644 --- a/frontend/src/config/apps.test.ts +++ b/frontend/src/config/apps.test.ts @@ -26,7 +26,7 @@ describe('app registry', () => { route: '/apps/mail', }) expect(PHONE_APPS.find((app) => app.id === 'weather')).toMatchObject({ - gridOrder: 4, + gridOrder: 5, labelKey: 'Apps.weather.name', route: '/apps/weather', }) @@ -101,6 +101,6 @@ describe('app registry', () => { PHONE_APPS.filter((app) => app.dockOrder !== null) .sort((a, b) => (a.dockOrder ?? 0) - (b.dockOrder ?? 0)) .map((app) => app.id), - ).toEqual(['phone', 'calculator', 'camera', 'clock']) + ).toEqual(['phone', 'messages', 'camera', 'clock']) }) }) diff --git a/frontend/src/config/apps.ts b/frontend/src/config/apps.ts index b237632..633c0a2 100644 --- a/frontend/src/config/apps.ts +++ b/frontend/src/config/apps.ts @@ -12,6 +12,7 @@ import { Layers3, Mail, MapPinned, + MessageCircle, NotebookPen, Phone, Settings, @@ -31,6 +32,7 @@ import clockIcon from '@/assets/img/app-icons/clock.webp' import calendarIcon from '@/assets/img/app-icons/calendar.svg' import mailIcon from '@/assets/img/app-icons/mail.webp' import mapIcon from '@/assets/img/app-icons/map.webp' +import messagesIcon from '@/assets/img/app-icons/sms.webp' import notesIcon from '@/assets/img/app-icons/notes.webp' import photosIcon from '@/assets/img/app-icons/gallery.webp' import phoneIcon from '@/assets/img/app-icons/phone.webp' @@ -92,6 +94,19 @@ export const PHONE_APPS: PhoneAppDefinition[] = [ labelKey: 'Apps.phone.name', route: '/apps/phone', }, + { + component: markRaw( + defineAsyncComponent(() => import('@/views/apps/MessagesApp.vue')), + ), + dockOrder: 1, + gridOrder: 1, + icon: markRaw(MessageCircle), + iconClass: '', + iconImage: messagesIcon, + id: 'messages', + labelKey: 'Apps.messages.name', + route: '/apps/messages', + }, { component: markRaw( defineAsyncComponent(() => import('@/views/apps/MapApp.vue')), @@ -148,8 +163,8 @@ export const PHONE_APPS: PhoneAppDefinition[] = [ component: markRaw( defineAsyncComponent(() => import('@/views/apps/CalculatorApp.vue')), ), - dockOrder: 1, - gridOrder: 1, + dockOrder: null, + gridOrder: 2, icon: markRaw(Calculator), iconClass: 'app-icon--calculator', iconImage: calculatorIcon, @@ -162,7 +177,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [ defineAsyncComponent(() => import('@/views/apps/CameraApp.vue')), ), dockOrder: 2, - gridOrder: 2, + gridOrder: 3, icon: markRaw(Camera), iconClass: 'app-icon--camera', iconImage: cameraIcon, @@ -175,7 +190,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [ defineAsyncComponent(() => import('@/views/apps/ClockApp.vue')), ), dockOrder: 3, - gridOrder: 3, + gridOrder: 4, icon: markRaw(Clock3), iconClass: 'app-icon--clock', iconImage: clockIcon, @@ -188,7 +203,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [ defineAsyncComponent(() => import('@/views/apps/WeatherApp.vue')), ), dockOrder: null, - gridOrder: 4, + gridOrder: 5, icon: markRaw(CloudSun), iconClass: 'app-icon--weather', iconImage: weatherIcon, diff --git a/frontend/src/stores/media.ts b/frontend/src/stores/media.ts index f99c52f..4e5c5b3 100644 --- a/frontend/src/stores/media.ts +++ b/frontend/src/stores/media.ts @@ -3,32 +3,38 @@ import { defineStore } from 'pinia' import { usePhoneStore } from '@/stores/phone' export type PhonePhoto = { + attachmentId: string capturedAt: number gradient: string id: string titleKey: string + url?: string } const samplePhotos: PhonePhoto[] = [ { + attachmentId: 'sunset-drive', capturedAt: Date.now() - 86_400_000, gradient: 'linear-gradient(145deg, #ff9a62, #5f2c82 58%, #141e30)', id: 'sunset-drive', titleKey: 'Apps.photos.samples.sunset', }, { + attachmentId: 'ocean-air', capturedAt: Date.now() - 172_800_000, gradient: 'linear-gradient(160deg, #67d5b5, #26648e 55%, #0b132b)', id: 'ocean-air', titleKey: 'Apps.photos.samples.ocean', }, { + attachmentId: 'city-lights', capturedAt: Date.now() - 259_200_000, gradient: 'linear-gradient(135deg, #fbc2eb, #a6c1ee 48%, #302b63)', id: 'city-lights', titleKey: 'Apps.photos.samples.city', }, { + attachmentId: 'desert-road', capturedAt: Date.now() - 345_600_000, gradient: 'linear-gradient(150deg, #f6d365, #fda085 45%, #512b58)', id: 'desert-road', @@ -55,10 +61,12 @@ export const useMediaStore = defineStore('media', { 'linear-gradient(135deg, #ffc75f, #f96d80 48%, #4b4453)', ] const captureNumber = this.captures.length + const id = `capture-${Date.now()}-${captureNumber + 1}` const photo: PhonePhoto = { + attachmentId: id, capturedAt: Date.now(), gradient: gradients[captureNumber % gradients.length], - id: `capture-${Date.now()}-${captureNumber + 1}`, + id, titleKey: 'Apps.photos.samples.capture', } this.captures.unshift(photo) @@ -76,7 +84,14 @@ export const useMediaStore = defineStore('media', { captures: PhonePhoto[] claimedApps: string[] }> | null - this.captures = Array.isArray(data?.captures) ? data.captures : [] + this.captures = Array.isArray(data?.captures) + ? data.captures.filter( + (photo) => + typeof photo.id === 'string' && + typeof photo.url === 'string' && + photo.url.startsWith('https://'), + ) + : [] this.claimedApps = Array.isArray(data?.claimedApps) ? data.claimedApps.filter((id): id is string => typeof id === 'string') : [] diff --git a/frontend/src/stores/messageMedia.ts b/frontend/src/stores/messageMedia.ts new file mode 100644 index 0000000..3ef4661 --- /dev/null +++ b/frontend/src/stores/messageMedia.ts @@ -0,0 +1,39 @@ +import { defineStore } from 'pinia' + +import type { MediaType, PhoneMedia } from '@/types/media' + +type MessageMediaRequest = { + mediaType: MediaType + phoneNumber: string +} + +type MessageMediaResult = MessageMediaRequest & { + media: PhoneMedia +} + +export const useMessageMediaStore = defineStore('message-media', { + state: () => ({ + request: null as MessageMediaRequest | null, + result: null as MessageMediaResult | null, + }), + actions: { + begin(phoneNumber: string, mediaType: MediaType): void { + this.request = { mediaType, phoneNumber } + this.result = null + }, + cancel(): void { + this.request = null + }, + complete(media: PhoneMedia): void { + if (!this.request || this.request.mediaType !== media.mediaType) return + this.result = { ...this.request, media } + this.request = null + }, + consume(phoneNumber: string): PhoneMedia | null { + if (!this.result || this.result.phoneNumber !== phoneNumber) return null + const media = this.result.media + this.result = null + return media + }, + }, +}) diff --git a/frontend/src/stores/messages.test.ts b/frontend/src/stores/messages.test.ts new file mode 100644 index 0000000..4074b47 --- /dev/null +++ b/frontend/src/stores/messages.test.ts @@ -0,0 +1,116 @@ +import { createPinia, setActivePinia } from 'pinia' +import { beforeEach, describe, expect, it, vi } from 'vitest' + +import { useMessagesStore } from '@/stores/messages' +import type { SmsMessage } from '@/types/messages' +import { nuiCall } from '@/utils/nui' + +vi.mock('@/utils/nui', () => ({ + nuiCall: vi.fn(), +})) + +const mockNuiCall = vi.mocked(nuiCall) + +function sentMessage(id: string): SmsMessage { + return { + body: 'Hello', + created_at: '2026-08-06 15:00:00', + direction: 'sent', + id, + media_duration_ms: null, + media_asset_id: null, + media_mime: null, + media_waveform: null, + message_type: 'text', + read_at: null, + recipient_number: '4205550196', + sender_number: '4205550100', + } +} + +describe('messages store', () => { + beforeEach(() => { + setActivePinia(createPinia()) + mockNuiCall.mockReset() + }) + + it('shows an outgoing message immediately and marks it delivered', async () => { + let resolveSend: ((value: { data: SmsMessage; success: true }) => void) | undefined + const response = new Promise<{ data: SmsMessage; success: true }>((resolve) => { + resolveSend = resolve + }) + mockNuiCall + .mockResolvedValueOnce({ data: [], success: true }) + .mockResolvedValueOnce({ data: [], success: true }) + .mockImplementationOnce(() => response) + .mockResolvedValueOnce({ data: [], success: true }) + + const messages = useMessagesStore() + await messages.openThread('4205550196') + const sending = messages.send({ body: 'Hello', messageType: 'text' }) + + expect(messages.messages).toHaveLength(1) + expect(messages.messages[0]).toMatchObject({ + body: 'Hello', + delivery_status: 'sending', + message_type: 'text', + }) + + resolveSend?.({ data: sentMessage('server-id'), success: true }) + await sending + + expect(messages.messages[0]).toMatchObject({ + delivery_status: 'delivered', + id: 'server-id', + }) + }) + + it('keeps a failed optimistic message visible', async () => { + mockNuiCall + .mockResolvedValueOnce({ data: [], success: true }) + .mockResolvedValueOnce({ data: [], success: true }) + .mockResolvedValueOnce({ error: 'recipient_unavailable', success: false }) + + const messages = useMessagesStore() + await messages.openThread('4205550196') + await messages.send({ body: 'Hello', messageType: 'text' }) + + expect(messages.messages[0].delivery_status).toBe('failed') + }) + + it('normalizes numeric phone data from the NUI boundary', async () => { + mockNuiCall.mockResolvedValueOnce({ + data: [ + { + lastMessage: 'Hello', + lastMessageAt: 1_786_034_600, + lastMessageType: 'text', + phoneNumber: 4_205_550_196, + unread: 0, + }, + ], + success: true, + }) + + const messages = useMessagesStore() + await messages.loadConversations() + + expect(messages.conversations[0].phoneNumber).toBe('4205550196') + }) + + it('loads protected voice media once and caches the data URI', async () => { + mockNuiCall.mockResolvedValueOnce({ + data: { mime: 'audio/webm;codecs=opus', payload: 'ZmFrZQ==' }, + success: true, + }) + + const messages = useMessagesStore() + expect(await messages.loadMedia('voice-id')).toBe(true) + expect(await messages.loadMedia('voice-id')).toBe(true) + + expect(messages.mediaSources['voice-id']).toBe( + 'data:audio/webm;codecs=opus;base64,ZmFrZQ==', + ) + expect(mockNuiCall).toHaveBeenCalledTimes(1) + }) +}) diff --git a/frontend/src/stores/messages.ts b/frontend/src/stores/messages.ts new file mode 100644 index 0000000..fd18982 --- /dev/null +++ b/frontend/src/stores/messages.ts @@ -0,0 +1,165 @@ +import { defineStore } from 'pinia' +import { computed, ref } from 'vue' + +import type { + GifSearchPage, + SmsConversation, + SmsMedia, + SmsMessage, + SmsOutgoingMessage, +} from '@/types/messages' +import { nuiCall, type NuiResponse } from '@/utils/nui' + +export const useMessagesStore = defineStore('messages', () => { + const conversations = ref([]) + const messages = ref([]) + const mediaSources = ref>({}) + const activeNumber = ref(null) + const loading = ref(false) + const unreadCount = computed(() => + conversations.value.reduce((total, item) => total + item.unread, 0), + ) + + async function loadConversations(): Promise { + const response = await nuiCall('messages:conversations') + if (response.success && response.data) { + conversations.value = response.data.map((conversation) => ({ + ...conversation, + phoneNumber: String(conversation.phoneNumber), + })) + } + else if (!response.success) conversations.value = [] + return response.success + } + + async function openThread(phoneNumber: string): Promise { + loading.value = true + const response = await nuiCall('messages:thread', { + phoneNumber, + }) + loading.value = false + if (!response.success || !response.data) return false + activeNumber.value = phoneNumber + messages.value = response.data.map((message) => ({ + ...message, + delivery_status: + message.direction === 'sent' ? 'delivered' : undefined, + recipient_number: String(message.recipient_number), + sender_number: String(message.sender_number), + })) + await loadConversations() + return true + } + + async function send( + outgoing: SmsOutgoingMessage, + ): Promise> { + if (!activeNumber.value) return { success: false, error: 'invalid_number' } + const clientId = `pending-${Date.now()}-${Math.random().toString(36).slice(2, 8)}` + const optimistic: SmsMessage = { + body: outgoing.messageType === 'text' ? outgoing.body.trim() : '', + client_id: clientId, + created_at: new Date().toISOString().slice(0, 19).replace('T', ' '), + delivery_status: 'sending', + direction: 'sent', + id: clientId, + media_asset_id: + outgoing.messageType === 'image' || + outgoing.messageType === 'gif' || + outgoing.messageType === 'video' + ? outgoing.mediaAssetId + : null, + media_duration_ms: + outgoing.messageType === 'voice' || outgoing.messageType === 'video' + ? outgoing.mediaDurationMs ?? null + : null, + media_mime: + outgoing.messageType === 'voice' ? outgoing.mediaMime : null, + media_waveform: + outgoing.messageType === 'voice' ? outgoing.mediaWaveform : null, + message_type: outgoing.messageType, + read_at: null, + recipient_number: activeNumber.value, + sender_number: '', + } + messages.value.push(optimistic) + if (outgoing.messageType === 'voice') { + mediaSources.value[clientId] = + `data:${outgoing.mediaMime};base64,${outgoing.mediaPayload}` + } + + const response = await nuiCall('messages:send', { + ...outgoing, + phoneNumber: activeNumber.value, + }) + const index = messages.value.findIndex( + (message) => message.client_id === clientId, + ) + if (!response.success || !response.data) { + if (index >= 0) messages.value[index].delivery_status = 'failed' + return response + } + + const source = mediaSources.value[clientId] + delete mediaSources.value[clientId] + if (source) mediaSources.value[response.data.id] = source + if (index >= 0) { + messages.value[index] = { + ...response.data, + client_id: clientId, + delivery_status: 'delivered', + } + } + await loadConversations() + return response + } + + async function loadMedia(id: string): Promise { + if (mediaSources.value[id]) return true + const response = await nuiCall('messages:media', { id }) + if (!response.success || !response.data) return false + mediaSources.value[id] = + `data:${response.data.mime};base64,${response.data.payload}` + return true + } + + async function deleteConversations(phoneNumbers: string[]): Promise { + if (!phoneNumbers.length) return false + const response = await nuiCall('messages:delete', { phoneNumbers }) + if (!response.success) return false + if (activeNumber.value && phoneNumbers.includes(activeNumber.value)) { + closeThread() + } + await loadConversations() + return true + } + + async function searchGifs( + query: string, + offset = 0, + ): Promise> { + return nuiCall('messages:gifs', { offset, query }) + } + + function closeThread(): void { + activeNumber.value = null + messages.value = [] + mediaSources.value = {} + } + + return { + activeNumber, + closeThread, + conversations, + deleteConversations, + loadConversations, + loadMedia, + loading, + mediaSources, + messages, + openThread, + searchGifs, + send, + unreadCount, + } +}) diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts index 3de6575..4b699ea 100644 --- a/frontend/src/stores/phone.ts +++ b/frontend/src/stores/phone.ts @@ -29,6 +29,89 @@ const namespaceQueues = new Map>() const defaultLocales: LocaleTree = { Apps: { + messages: { + name: 'Messages', + newMessage: 'New message from {sender}', + compose: 'New Message', + search: 'Search', + to: 'To:', + message: 'Message', + send: 'Send', + details: 'Details', + filterUnread: 'Show Unread Messages', + smsLabel: 'Text Message Β· SMS', + photo: 'Photo', + gif: 'GIF', + video: 'Video', + attachPhoto: 'Attach Photo', + takePhoto: 'Take Photo', + attachGif: 'Attach GIF', + attachVideo: 'Attach Video', + photos: 'Photos', + gifs: 'GIFs', + videos: 'Videos', + noPhotos: 'Take a photo first to attach it here.', + noVideos: 'Record a video in Camera first.', + searchGifs: 'Search GIPHY', + loadMore: 'Load More', + retryGifs: 'Try Again', + moreActions: 'More Actions', + contactDetails: 'Contact Details', + contactName: 'Name', + phoneNumber: 'Phone Number', + call: 'Call', + messageAction: 'Message', + addContact: 'Add Contact', + deleteContact: 'Delete Contact', + selectedCount: '{count} Selected', + deleteSelected: 'Delete', + contactSaveFailed: 'The contact could not be saved.', + contactDeleteFailed: 'The contact could not be deleted.', + callFailed: 'The call could not be started.', + emoji: 'Emoji', + voiceMessage: 'Audio Message', + recordVoice: 'Record Audio', + playAudio: 'Play Audio', + pauseAudio: 'Pause Audio', + recording: 'Recording', + stopAndSend: 'Stop and Send', + cancelRecording: 'Cancel Recording', + sending: 'Sending...', + delivered: 'Delivered', + notDelivered: 'Not Delivered', + microphoneUnavailable: 'The microphone is unavailable.', + recordingTooLarge: 'The recording is too large.', + noSim: 'No SIM', + noSimBody: 'Insert a SIM card in Settings to send and receive messages.', + noMessages: 'No Messages', + noMessagesBody: 'Start a conversation with a phone number.', + noResults: 'No Results', + today: 'Today', + yesterday: 'Yesterday', + errors: { + invalid_number: 'Enter a valid phone number.', + invalid_message: 'Enter a message.', + invalid_voice: 'The audio message is invalid.', + invalid_attachment: 'The attachment is invalid.', + media_provider_unconfigured: 'Photo uploads are not configured.', + capture_provider_unavailable: 'The screenshot resource is unavailable.', + capture_failed: 'The photo could not be captured.', + video_provider_unavailable: 'Video capture requires the screencapture resource.', + video_capture_failed: 'The video could not be recorded.', + recording_in_progress: 'A video is already being recorded.', + recording_not_found: 'No active video recording was found.', + gif_provider_unconfigured: 'GIF search is not configured.', + gif_provider_unauthorized: 'The configured GIPHY API key is invalid.', + gif_provider_rate_limited: 'GIPHY is busy. Try again in a moment.', + gif_provider_failed: 'GIF search is temporarily unavailable.', + self_message: 'You cannot message your own number.', + recipient_not_found: 'That number is unavailable.', + no_sim: 'This phone has no SIM card.', + rate_limited: 'Too many messages. Try again in a minute.', + request_failed: 'Messages are temporarily unavailable.', + default: 'The message could not be sent.', + }, + }, appStore: { name: 'App Store', eyebrow: 'Discover', diff --git a/frontend/src/types/apps.ts b/frontend/src/types/apps.ts index aaea1c7..d77b702 100644 --- a/frontend/src/types/apps.ts +++ b/frontend/src/types/apps.ts @@ -2,6 +2,7 @@ import type { Component } from 'vue' export type PhoneAppId = | 'phone' + | 'messages' | 'calculator' | 'camera' | 'clock' diff --git a/frontend/src/types/messages.ts b/frontend/src/types/messages.ts new file mode 100644 index 0000000..02748d8 --- /dev/null +++ b/frontend/src/types/messages.ts @@ -0,0 +1,66 @@ +import type { DatabaseDateValue } from '@/utils/date' + +export type SmsDirection = 'sent' | 'received' +export type SmsAttachmentType = 'image' | 'gif' | 'video' +export type SmsMessageType = 'text' | 'voice' | SmsAttachmentType +export type SmsDeliveryStatus = 'sending' | 'delivered' | 'failed' + +export type SmsConversation = { + lastMessage: string + lastMessageAt: DatabaseDateValue + lastMessageType: SmsMessageType + phoneNumber: string + unread: number +} + +export type SmsMessage = { + body: string + client_id?: string + created_at: DatabaseDateValue + delivery_status?: SmsDeliveryStatus + direction: SmsDirection + id: string + media_asset_id: string | null + media_duration_ms: number | null + media_mime: string | null + media_waveform: number[] | null + message_type: SmsMessageType + read_at: string | null + recipient_number: string + sender_number: string +} + +export type SmsOutgoingMessage = + | { body: string; messageType: 'text' } + | { + mediaDurationMs: number + mediaMime: string + mediaPayload: string + mediaWaveform: number[] + messageType: 'voice' + } + | { + mediaAssetId: string + mediaDurationMs?: number + messageType: SmsAttachmentType + } + +export type SmsMedia = { + mime: string + payload: string +} + +export type GifSearchResult = { + height: number + id: string + previewUrl: string + title: string + url: string + width: number +} + +export type GifSearchPage = { + hasMore: boolean + nextOffset: number + results: GifSearchResult[] +} diff --git a/frontend/src/utils/date.test.ts b/frontend/src/utils/date.test.ts new file mode 100644 index 0000000..782bf4b --- /dev/null +++ b/frontend/src/utils/date.test.ts @@ -0,0 +1,18 @@ +import { describe, expect, it } from 'vitest' + +import { parseDatabaseDate } from './date' + +describe('database dates', () => { + it('parses SQL date strings', () => { + expect(parseDatabaseDate('2026-08-06 17:30:00').getTime()).toBe( + new Date('2026-08-06T17:30:00').getTime(), + ) + }) + + it('parses Unix timestamps in seconds and milliseconds', () => { + expect(parseDatabaseDate(1_786_034_600).getTime()).toBe(1_786_034_600_000) + expect(parseDatabaseDate(1_786_034_600_000).getTime()).toBe( + 1_786_034_600_000, + ) + }) +}) diff --git a/frontend/src/utils/date.ts b/frontend/src/utils/date.ts new file mode 100644 index 0000000..38a49b9 --- /dev/null +++ b/frontend/src/utils/date.ts @@ -0,0 +1,10 @@ +export type DatabaseDateValue = string | number + +export function parseDatabaseDate(value: DatabaseDateValue): Date { + if (typeof value === 'number') { + const timestamp = Math.abs(value) < 1_000_000_000_000 ? value * 1000 : value + return new Date(timestamp) + } + + return new Date(value.replace(' ', 'T')) +} diff --git a/frontend/src/utils/phone.test.ts b/frontend/src/utils/phone.test.ts index b6647ee..9e93124 100644 --- a/frontend/src/utils/phone.test.ts +++ b/frontend/src/utils/phone.test.ts @@ -11,5 +11,6 @@ describe('phone numbers', () => { it('formats keypad input incrementally', () => { expect(formatPhoneNumber('5551234567')).toBe('555 123 4567') expect(formatPhoneNumber('5551')).toBe('555 1') + expect(formatPhoneNumber(5551234567)).toBe('555 123 4567') }) }) diff --git a/frontend/src/utils/phone.ts b/frontend/src/utils/phone.ts index 1ef0fe3..358a5b5 100644 --- a/frontend/src/utils/phone.ts +++ b/frontend/src/utils/phone.ts @@ -5,8 +5,8 @@ export function normalizePhoneNumber(value: string): string | null { return digits.length === PHONE_NUMBER_LENGTH ? digits : null } -export function formatPhoneNumber(value: string): string { - const digits = value.replace(/\D/g, '').slice(0, PHONE_NUMBER_LENGTH) +export function formatPhoneNumber(value: string | number): string { + const digits = String(value).replace(/\D/g, '').slice(0, PHONE_NUMBER_LENGTH) const groups = [digits.slice(0, 3), digits.slice(3, 6), digits.slice(6, 10)] return groups.filter(Boolean).join(' ') } diff --git a/frontend/src/utils/preferences.test.ts b/frontend/src/utils/preferences.test.ts index bdfc931..d720ddf 100644 --- a/frontend/src/utils/preferences.test.ts +++ b/frontend/src/utils/preferences.test.ts @@ -16,6 +16,7 @@ describe('preferences', () => { notificationVolume: 45, notificationDurationSeconds: 14, notifications: { + messages: { enabled: false, sounds: false }, clock: { enabled: false, sounds: false }, }, phoneScale: 110, @@ -26,6 +27,10 @@ describe('preferences', () => { expect(value.settings.appearanceMode).toBe('light') expect(value.settings.notificationVolume).toBe(45) expect(value.settings.notificationDurationSeconds).toBe(14) + expect(value.settings.notifications.messages).toEqual({ + enabled: false, + sounds: false, + }) expect(value.settings.notifications.clock).toEqual({ enabled: false, sounds: false, diff --git a/frontend/src/utils/preferences.ts b/frontend/src/utils/preferences.ts index 16c0856..3235c68 100644 --- a/frontend/src/utils/preferences.ts +++ b/frontend/src/utils/preferences.ts @@ -49,6 +49,7 @@ const DEFAULT_APP_NOTIFICATIONS: Record< AppNotificationPreferences > = { phone: { enabled: true, sounds: true }, + messages: { enabled: true, sounds: true }, 'app-store': { enabled: true, sounds: true }, calculator: { enabled: true, sounds: true }, snake: { enabled: true, sounds: true }, diff --git a/frontend/src/views/apps/CameraApp.vue b/frontend/src/views/apps/CameraApp.vue index 7b9bdbc..a9ca7d2 100644 --- a/frontend/src/views/apps/CameraApp.vue +++ b/frontend/src/views/apps/CameraApp.vue @@ -15,8 +15,9 @@ import { ZapOff, } from 'lucide-vue-next' import { computed, onBeforeUnmount, onMounted, ref } from 'vue' -import { useRouter } from 'vue-router' +import { useRoute, useRouter } from 'vue-router' +import { useMessageMediaStore } from '@/stores/messageMedia' import { usePhoneStore } from '@/stores/phone' import type { MediaType, PhoneMedia, UploadResult } from '@/types/media' import { createGameView, type GameView } from '@/utils/gameView' @@ -33,8 +34,14 @@ type CaptureItem = { const isDevelopment = import.meta.env.DEV const zoomLevels = [0.5, 1, 2, 3] as const const phone = usePhoneStore() +const messageMedia = useMessageMediaStore() +const route = useRoute() const router = useRouter() -const mode = ref('photo') +const requestedMessageMedia = computed(() => { + const value = route.query.messageAttachment + return value === 'photo' || value === 'video' ? value : null +}) +const mode = ref(requestedMessageMedia.value ?? 'photo') const selectedZoom = ref<(typeof zoomLevels)[number]>(1) const flashEnabled = ref(false) const frontCamera = ref(false) @@ -307,6 +314,11 @@ function onMessage(event: MessageEvent): void { if (result.success && result.media) { latestMedia.value = result.media updateCapture(result.correlationId, { status: 'success' }) + if (requestedMessageMedia.value === result.media.mediaType) { + messageMedia.complete(result.media) + void router.replace('/apps/messages') + return + } showCameraNotice(phone.t('Apps.camera.saved')) window.setTimeout(() => { captures.value = captures.value.filter( @@ -473,7 +485,14 @@ onBeforeUnmount(() => { class="camera-latest" type="button" :aria-label="phone.t('Apps.camera.openGallery')" - @click="router.push('/apps/photos')" + @click=" + router.push({ + path: '/apps/photos', + query: requestedMessageMedia + ? { messageAttachment: requestedMessageMedia } + : undefined, + }) + " > (() => { + const value = route.query.messageAttachment + return value === 'photo' || value === 'video' ? value : null +}) const media = ref([]) -const filter = ref('all') +const filter = ref(requestedMessageMedia.value ?? 'all') const loading = ref(true) const fetching = ref(false) const hasMore = ref(true) @@ -193,6 +202,11 @@ function observeMore(): void { } function openMedia(entry: PhoneMedia): void { + if (requestedMessageMedia.value) { + messageMedia.complete(entry) + void router.replace('/apps/messages') + return + } landscapeViewer.value = false phone.setCameraLandscape(false) selected.value = entry @@ -200,6 +214,11 @@ function openMedia(entry: PhoneMedia): void { imagePan.value = { x: 0, y: 0 } } +function cancelMessageSelection(): void { + messageMedia.cancel() + void router.replace('/apps/messages') +} + function closeMedia(): void { landscapeViewer.value = false phone.setCameraLandscape(false) @@ -326,7 +345,15 @@ onBeforeUnmount(() => { class="gallery-page !pt-[44px]" :aria-label="phone.t('Apps.photos.name')" > - + + +
@@ -385,6 +412,7 @@ onBeforeUnmount(() => {
+import { + kBlock, + kLink, + kList, + kListInput, + kListItem, + kMessage, + kMessagebar, + kMessages, + kMessagesTitle, + kNavbar, + kNavbarBackLink, + kPage, + kPreloader, + kToast, + kToolbarPane, +} from 'konsta/vue' +import { + ArrowUpCircle, + Camera, + Check, + ChevronLeft, + ChevronRight, + ImagePlay, + Images, + ListFilter, + MessageCircle, + Mic, + Pencil, + Phone as PhoneIcon, + Plus, + Search, + SquarePen, + Trash2, + UserPlus, + Video, + X, +} from 'lucide-vue-next' +import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue' +import { useRouter } from 'vue-router' + +import MessageAttachmentBubble from '@/components/MessageAttachmentBubble.vue' +import FullEmojiPicker from '@/components/FullEmojiPicker.vue' +import VoiceMessageBubble from '@/components/VoiceMessageBubble.vue' +import { useCallsStore } from '@/stores/calls' +import { useMessagesStore } from '@/stores/messages' +import { useMessageMediaStore } from '@/stores/messageMedia' +import { usePhoneStore } from '@/stores/phone' +import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date' +import type { + GifSearchResult, + SmsAttachmentType, + SmsConversation, + SmsMessage, +} from '@/types/messages' + +const VOICE_MAX_DURATION_MS = 30_000 +const VOICE_MAX_BYTES = 135_000 +const WAVEFORM_SAMPLES = 48 + +const phone = usePhoneStore() +const calls = useCallsStore() +const messages = useMessagesStore() +const messageMedia = useMessageMediaStore() +const router = useRouter() +const search = ref('') +const showUnreadOnly = ref(false) +const editingList = ref(false) +const selectedNumbers = ref([]) +const composerNumber = ref('') +const draft = ref('') +const composing = ref(false) +const sending = ref(false) +const toastOpened = ref(false) +const toastText = ref('') +const emojiOpen = ref(false) +const attachmentMenuOpen = ref(false) +const attachmentPicker = ref<'gifs' | null>(null) +const contactDetailsOpen = ref(false) +const contactEditing = ref(false) +const contactNameDraft = ref('') +const contactNumberDraft = ref('') +const gifQuery = ref('') +const gifResults = ref([]) +const gifLoading = ref(false) +const gifError = ref(null) +const gifHasMore = ref(true) +const gifNextOffset = ref(0) +const recording = ref(false) +const recordingElapsedMs = ref(0) +const recordingLevels = ref(Array(32).fill(0.16)) +let toastTimer: ReturnType | undefined +let gifSearchTimer: ReturnType | undefined +let recordingTimer: ReturnType | undefined +let mediaRecorder: MediaRecorder | undefined +let mediaStream: MediaStream | undefined +let audioContext: AudioContext | undefined +let analyser: AnalyserNode | undefined +let recordingStartedAt = 0 +let recordingChunks: Blob[] = [] +let recordingSamples: number[] = [] +let recordingBytes = 0 +let discardRecording = false + +const hasSim = computed(() => Boolean(phone.device?.sim)) +const filteredConversations = computed(() => { + const query = search.value.trim().toLocaleLowerCase(phone.lang) + return messages.conversations.filter((conversation) => { + if (showUnreadOnly.value && conversation.unread === 0) return false + if (!query) return true + return `${contactName(conversation.phoneNumber)} ${conversation.phoneNumber} ${conversationPreview(conversation)}` + .toLocaleLowerCase(phone.lang) + .includes(query) + }) +}) +const knownContactNumbers = computed( + () => new Set(calls.contacts.map((contact) => contact.phone_number)), +) +const contactSuggestions = computed(() => { + const query = composerNumber.value.trim().toLocaleLowerCase(phone.lang) + if (!query) return calls.contacts.slice(0, 8) + return calls.contacts + .filter((contact) => + `${contact.name} ${contact.phone_number}` + .toLocaleLowerCase(phone.lang) + .includes(query), + ) + .slice(0, 8) +}) +const activeTitle = computed(() => + messages.activeNumber ? contactName(messages.activeNumber) : '', +) +const activeContact = computed(() => + calls.contacts.find( + (contact) => contact.phone_number === messages.activeNumber, + ), +) +const attachmentPanelOpen = computed( + () => emojiOpen.value || attachmentPicker.value !== null, +) +function contactName(number: string): string { + return ( + calls.contacts.find((contact) => contact.phone_number === number)?.name ?? + number + ) +} + +function conversationPreview(conversation: SmsConversation): string { + if (conversation.lastMessageType === 'image') { + return `πŸ“· ${phone.t('Apps.messages.photo')}` + } + if (conversation.lastMessageType === 'gif') { + return `GIF ${phone.t('Apps.messages.gif')}` + } + if (conversation.lastMessageType === 'video') { + return `▢️ ${phone.t('Apps.messages.video')}` + } + return conversation.lastMessageType === 'voice' + ? `πŸŽ™οΈ ${phone.t('Apps.messages.voiceMessage')}` + : conversation.lastMessage +} + +function avatarStyle(number: string): { background: string } { + let hash = 0 + for (const character of number) { + hash = (hash * 31 + character.charCodeAt(0)) % 360 + } + return { + background: `linear-gradient(145deg, hsl(${hash} 72% 62%), hsl(${(hash + 35) % 360} 68% 48%))`, + } +} + +function avatarGlyph(number: string): string { + const glyphs = ['πŸ‘©πŸ»', 'πŸ§”πŸ»', 'πŸ‘©πŸ½', 'πŸ‘¨πŸΌ', 'πŸ‘©πŸΌ', 'πŸ§‘πŸΎ', 'πŸ‘¨πŸ½', 'πŸ‘©πŸΎ'] + let hash = 0 + for (const character of number) hash += character.charCodeAt(0) + return glyphs[hash % glyphs.length] +} + +function formatConversationDate(value: DatabaseDateValue): string { + const date = parseDatabaseDate(value) + if (Number.isNaN(date.getTime())) return String(value) + const today = new Date() + if (date.toDateString() === today.toDateString()) { + return new Intl.DateTimeFormat(phone.lang, { + hour: '2-digit', + minute: '2-digit', + }).format(date) + } + const yesterday = new Date(today) + yesterday.setDate(today.getDate() - 1) + if (date.toDateString() === yesterday.toDateString()) { + return phone.t('Apps.messages.yesterday') + } + const daysAgo = Math.floor((today.getTime() - date.getTime()) / 86_400_000) + if (daysAgo < 7) { + return new Intl.DateTimeFormat(phone.lang, { weekday: 'long' }).format(date) + } + return new Intl.DateTimeFormat(phone.lang, { + day: 'numeric', + month: 'numeric', + }).format(date) +} + +function dayLabel(value: DatabaseDateValue): string { + const date = parseDatabaseDate(value) + if (Number.isNaN(date.getTime())) return String(value) + const today = new Date() + const yesterday = new Date(today) + yesterday.setDate(today.getDate() - 1) + if (date.toDateString() === today.toDateString()) { + return phone.t('Apps.messages.today') + } + if (date.toDateString() === yesterday.toDateString()) { + return phone.t('Apps.messages.yesterday') + } + return new Intl.DateTimeFormat(phone.lang, { + day: 'numeric', + month: 'long', + year: date.getFullYear() === today.getFullYear() ? undefined : 'numeric', + }).format(date) +} + +function timeLabel(value: DatabaseDateValue): string { + const date = parseDatabaseDate(value) + if (Number.isNaN(date.getTime())) return '' + return new Intl.DateTimeFormat(phone.lang, { + hour: '2-digit', + minute: '2-digit', + }).format(date) +} + +function formatRecordingTime(milliseconds: number): string { + const seconds = Math.floor(milliseconds / 1000) + return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}` +} + +function startsDay(message: SmsMessage, index: number): boolean { + if (index === 0) return true + return ( + parseDatabaseDate( + messages.messages[index - 1].created_at, + ).toDateString() !== parseDatabaseDate(message.created_at).toDateString() + ) +} + +function messageFooter(message: SmsMessage, index: number): string | undefined { + if (message.direction !== 'sent' || index !== messages.messages.length - 1) { + return undefined + } + if (message.delivery_status === 'sending') { + return phone.t('Apps.messages.sending') + } + if (message.delivery_status === 'failed') { + return phone.t('Apps.messages.notDelivered') + } + return phone.t('Apps.messages.delivered') +} + +function eventValue(event: Event): string { + return (event.target as HTMLInputElement).value +} + +function showToast(message: string): void { + if (toastTimer) clearTimeout(toastTimer) + toastText.value = message + toastOpened.value = true + toastTimer = setTimeout(() => (toastOpened.value = false), 2800) +} + +function errorText(error?: string): string { + const known = [ + 'invalid_number', + 'invalid_message', + 'invalid_voice', + 'invalid_attachment', + 'media_provider_unconfigured', + 'capture_provider_unavailable', + 'capture_failed', + 'gif_provider_unconfigured', + 'gif_provider_unauthorized', + 'gif_provider_rate_limited', + 'gif_provider_failed', + 'self_message', + 'recipient_not_found', + 'no_sim', + 'rate_limited', + 'request_failed', + ] + return phone.t( + `Apps.messages.errors.${error && known.includes(error) ? error : 'default'}`, + ) +} + +async function scrollToBottom(animate = true): Promise { + await nextTick() + const page = document.querySelector('.messages-thread-page') + if (!page) return + page.scrollTo({ + behavior: animate ? 'smooth' : 'auto', + top: page.scrollHeight, + }) +} + +async function openConversation(conversation: SmsConversation): Promise { + if (editingList.value) { + const index = selectedNumbers.value.indexOf(conversation.phoneNumber) + if (index >= 0) selectedNumbers.value.splice(index, 1) + else selectedNumbers.value.push(conversation.phoneNumber) + return + } + if (!(await messages.openThread(conversation.phoneNumber))) { + showToast(errorText()) + return + } + composing.value = false + draft.value = '' + await scrollToBottom(false) +} + +function toggleListEditing(): void { + editingList.value = !editingList.value + selectedNumbers.value = [] + showUnreadOnly.value = false +} + +async function deleteSelectedConversations(): Promise { + if (!selectedNumbers.value.length) return + const deleted = await messages.deleteConversations(selectedNumbers.value) + if (!deleted) { + showToast(errorText()) + return + } + editingList.value = false + selectedNumbers.value = [] +} + +function beginCompose(): void { + messages.closeThread() + composing.value = true + composerNumber.value = '' + draft.value = '' +} + +async function chooseRecipient(number: string): Promise { + composerNumber.value = number + if (!(await messages.openThread(number))) { + showToast(errorText('invalid_number')) + return + } + composing.value = false + await scrollToBottom(false) +} + +function goBack(): void { + if (contactDetailsOpen.value) { + contactDetailsOpen.value = false + contactEditing.value = false + return + } + cancelVoiceRecording() + if (messages.activeNumber) messages.closeThread() + composing.value = false + composerNumber.value = '' + draft.value = '' + emojiOpen.value = false + attachmentMenuOpen.value = false + attachmentPicker.value = null +} + +function appendEmoji(emoji: string): void { + draft.value += emoji +} + +function openContactDetails(): void { + if (!messages.activeNumber) return + contactNameDraft.value = activeContact.value?.name ?? '' + contactNumberDraft.value = messages.activeNumber + contactEditing.value = false + contactDetailsOpen.value = true +} + +async function saveContactDetails(): Promise { + if (!contactNameDraft.value.trim() || !contactNumberDraft.value.trim()) return + const response = await calls.saveContact({ + id: activeContact.value?.id, + name: contactNameDraft.value.trim(), + phoneNumber: contactNumberDraft.value, + }) + if (!response.success) { + showToast(phone.t('Apps.messages.contactSaveFailed')) + return + } + contactEditing.value = false + contactNumberDraft.value = response.data?.phone_number ?? contactNumberDraft.value +} + +async function deleteActiveContact(): Promise { + if (!activeContact.value) return + if (!(await calls.deleteContact(activeContact.value.id))) { + showToast(phone.t('Apps.messages.contactDeleteFailed')) + return + } + contactDetailsOpen.value = false + contactEditing.value = false +} + +async function callActiveContact(): Promise { + if (!messages.activeNumber) return + const response = await calls.dial(messages.activeNumber) + if (!response.success) showToast(phone.t('Apps.messages.callFailed')) +} + +function toggleAttachmentMenu(): void { + attachmentMenuOpen.value = !attachmentMenuOpen.value + emojiOpen.value = false + attachmentPicker.value = null +} + +function openGifPicker(): void { + attachmentMenuOpen.value = false + attachmentPicker.value = 'gifs' + emojiOpen.value = false + if (!gifResults.value.length) void loadGifs(true) +} + +function openEmojiPicker(): void { + attachmentMenuOpen.value = false + attachmentPicker.value = null + emojiOpen.value = true +} + +function openMediaApp(app: 'camera' | 'photos', mediaType: 'photo' | 'video'): void { + if (!messages.activeNumber) return + attachmentMenuOpen.value = false + messageMedia.begin(messages.activeNumber, mediaType) + void router.push({ + path: `/apps/${app}`, + query: { messageAttachment: mediaType }, + }) +} + +async function sendAttachment( + messageType: SmsAttachmentType, + mediaAssetId: string, + mediaDurationMs?: number, +): Promise { + if (!messages.activeNumber || sending.value) return + attachmentMenuOpen.value = false + attachmentPicker.value = null + sending.value = true + const response = await messages.send({ + mediaAssetId, + mediaDurationMs, + messageType, + }) + sending.value = false + if (!response.success) showToast(errorText(response.error)) + await scrollToBottom() +} + +async function loadGifs(reset = false): Promise { + if (gifLoading.value || (!reset && !gifHasMore.value)) return + gifError.value = null + gifLoading.value = true + const response = await messages.searchGifs( + gifQuery.value, + reset ? 0 : gifNextOffset.value, + ) + gifLoading.value = false + if (!response.success || !response.data) { + if (reset) gifResults.value = [] + gifError.value = response.error ?? 'gif_provider_failed' + showToast(errorText(response.error)) + return + } + const existingIds = new Set( + reset ? [] : gifResults.value.map((result) => result.id), + ) + const uniqueResults = response.data.results.filter((result) => { + if (existingIds.has(result.id)) return false + existingIds.add(result.id) + return true + }) + gifResults.value = reset + ? uniqueResults + : [...gifResults.value, ...uniqueResults] + gifHasMore.value = response.data.hasMore + gifNextOffset.value = response.data.nextOffset +} + +function queueGifSearch(): void { + if (gifSearchTimer) clearTimeout(gifSearchTimer) + gifSearchTimer = setTimeout(() => void loadGifs(true), 320) +} + +async function sendTextMessage(): Promise { + if (!messages.activeNumber || !draft.value.trim() || sending.value) return + const body = draft.value + draft.value = '' + emojiOpen.value = false + attachmentMenuOpen.value = false + attachmentPicker.value = null + sending.value = true + await scrollToBottom() + const response = await messages.send({ body, messageType: 'text' }) + sending.value = false + if (!response.success) showToast(errorText(response.error)) + await scrollToBottom() +} + +function recordingMime(): string | null { + if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) { + return 'audio/webm;codecs=opus' + } + if (MediaRecorder.isTypeSupported('audio/webm')) return 'audio/webm' + return null +} + +function sampleMicrophone(): void { + if (!analyser) return + const values = new Uint8Array(analyser.fftSize) + analyser.getByteTimeDomainData(values) + let total = 0 + for (const value of values) total += Math.abs(value - 128) / 128 + const level = Math.max(0.08, Math.min(1, (total / values.length) * 4.5)) + recordingSamples.push(level) + recordingLevels.value = [...recordingLevels.value.slice(1), level] + recordingElapsedMs.value = performance.now() - recordingStartedAt + if (recordingElapsedMs.value >= VOICE_MAX_DURATION_MS) { + stopVoiceRecording() + } +} + +async function startVoiceRecording(): Promise { + emojiOpen.value = false + if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') { + showToast(phone.t('Apps.messages.microphoneUnavailable')) + return + } + const mime = recordingMime() + if (!mime) { + showToast(phone.t('Apps.messages.microphoneUnavailable')) + return + } + try { + mediaStream = await navigator.mediaDevices.getUserMedia({ + audio: { + autoGainControl: true, + echoCancellation: true, + noiseSuppression: true, + }, + }) + recordingChunks = [] + recordingSamples = [] + recordingBytes = 0 + discardRecording = false + mediaRecorder = new MediaRecorder(mediaStream, { + audioBitsPerSecond: 24_000, + mimeType: mime, + }) + mediaRecorder.addEventListener('dataavailable', (event) => { + if (!event.data.size) return + recordingChunks.push(event.data) + recordingBytes += event.data.size + if (recordingBytes > VOICE_MAX_BYTES) stopVoiceRecording() + }) + mediaRecorder.addEventListener('stop', () => void finishVoiceRecording()) + audioContext = new AudioContext() + analyser = audioContext.createAnalyser() + analyser.fftSize = 128 + audioContext.createMediaStreamSource(mediaStream).connect(analyser) + recordingStartedAt = performance.now() + recordingElapsedMs.value = 0 + recordingLevels.value = Array(32).fill(0.16) + recording.value = true + mediaRecorder.start(250) + recordingTimer = setInterval(sampleMicrophone, 100) + } catch (error) { + console.error('[Messages] Could not start audio recording:', error) + cleanupRecorder() + showToast(phone.t('Apps.messages.microphoneUnavailable')) + } +} + +function stopVoiceRecording(): void { + if (!mediaRecorder || mediaRecorder.state === 'inactive') return + mediaRecorder.stop() +} + +function cancelVoiceRecording(): void { + discardRecording = true + if (mediaRecorder && mediaRecorder.state !== 'inactive') mediaRecorder.stop() + else cleanupRecorder() +} + +function cleanupRecorder(): void { + if (recordingTimer) clearInterval(recordingTimer) + recordingTimer = undefined + mediaStream?.getTracks().forEach((track) => track.stop()) + void audioContext?.close() + mediaRecorder = undefined + mediaStream = undefined + audioContext = undefined + analyser = undefined + recording.value = false +} + +function compressedWaveform(): number[] { + if (!recordingSamples.length) return Array(16).fill(0.12) + const result: number[] = [] + const bucketSize = recordingSamples.length / WAVEFORM_SAMPLES + const count = Math.min(WAVEFORM_SAMPLES, recordingSamples.length) + for (let index = 0; index < count; index += 1) { + const start = Math.floor(index * bucketSize) + const end = Math.max(start + 1, Math.floor((index + 1) * bucketSize)) + const bucket = recordingSamples.slice(start, end) + result.push( + Math.max(0.08, Math.min(1, bucket.reduce((sum, value) => sum + value, 0) / bucket.length)), + ) + } + return result +} + +async function blobBase64(blob: Blob): Promise { + const buffer = await blob.arrayBuffer() + const bytes = new Uint8Array(buffer) + let binary = '' + for (let offset = 0; offset < bytes.length; offset += 0x8000) { + binary += String.fromCharCode(...bytes.subarray(offset, offset + 0x8000)) + } + return btoa(binary) +} + +async function finishVoiceRecording(): Promise { + const duration = Math.min( + VOICE_MAX_DURATION_MS, + Math.max(300, performance.now() - recordingStartedAt), + ) + const mime = mediaRecorder?.mimeType ?? 'audio/webm' + const chunks = recordingChunks + const waveform = compressedWaveform() + const shouldDiscard = discardRecording + cleanupRecorder() + if (shouldDiscard) return + const blob = new Blob(chunks, { type: mime }) + if (!blob.size || blob.size > VOICE_MAX_BYTES) { + showToast(phone.t('Apps.messages.recordingTooLarge')) + return + } + const payload = await blobBase64(blob) + sending.value = true + const response = await messages.send({ + mediaDurationMs: Math.floor(duration), + mediaMime: mime, + mediaPayload: payload, + mediaWaveform: waveform, + messageType: 'voice', + }) + sending.value = false + if (!response.success) showToast(errorText(response.error)) + await scrollToBottom() +} + +onMounted(() => { + void messages.loadConversations() + void calls.loadContacts() + if (messages.activeNumber) { + const media = messageMedia.consume(messages.activeNumber) + if (media) { + void sendAttachment( + media.mediaType === 'photo' ? 'image' : 'video', + import.meta.env.DEV ? media.url : String(media.id), + ) + } + } +}) + +onBeforeUnmount(() => { + discardRecording = true + cleanupRecorder() + if (toastTimer) clearTimeout(toastTimer) + if (gifSearchTimer) clearTimeout(gifSearchTimer) +}) + + + diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs index 0e1409d..f10d843 100644 --- a/frontend/testserver/index.cjs +++ b/frontend/testserver/index.cjs @@ -31,6 +31,45 @@ const mockBankTransactions = [ { id: 5, kind: 'withdrawal', amount: 300, label: '', reference: 'mock-5', createdAt: Date.now() - 76 * 60 * 60 * 1000 }, { id: 6, kind: 'transfer_in', amount: 950, label: 'Noah Bennett', reference: 'mock-6', createdAt: Date.now() - 120 * 60 * 60 * 1000 }, ] + +let contactSequence = 2 +const contacts = [ + { + created_at: '2026-08-04 12:00:00', + id: 'contact-1', + name: 'Jenica Chong', + phone_number: '5558675309', + updated_at: '2026-08-04 12:00:00', + }, +] +const attachmentAssets = { + gif: new Set(['celebrate', 'hearts', 'party', 'thumbs_up', 'wow']), + image: new Set([ + 'camera-1', 'camera-2', 'camera-3', 'city-lights', 'desert-road', + 'ocean-air', 'sunset-drive', + ]), + video: new Set(['city-loop', 'ocean-loop', 'sunset-loop']), +} +const gifMocks = [ + ['ICOgUNjpvO0PC', 'Cat reaction'], + ['MDJ9IbxxvDUQM', 'Happy dog'], + ['l0HlPystfePnAI3G8', 'Celebrate'], + ['26ufdipQqU2lhNA4g', 'Wow'], + ['3o7abKhOpu0NwenH3O', 'Perfect'], + ['xT0xeJpnrWC4XWblEk', 'Party'], + ['111ebonMs90YLu', 'Thumbs up'], + ['5GoVLqeAOo6PK', 'Excited'], + ['TdfyKrN7HGTIY', 'Happy dance'], + ['14udF3WUwwGMaA', 'Surprised'], + ['3o6Zt6ML6BklcajjsA', 'Applause'], + ['13CoXDiaCcCoyk', 'Let us go'], + ['R6gvnAxj2ISzJdbA63', 'Yes'], + ['xUPGcEliCc7bETyfO8', 'Laughing'], + ['26BRuo6sLetdllPAQ', 'Dancing'], + ['l46CyJmS9KUbokzsI', 'Amazing'], + ['g9582DNuQppxC', 'Celebration'], + ['artj92V8o75VPL7AeQ', 'High five'], +] const accountDevices = [ { created_at: '2026-08-04 12:00:00', @@ -95,6 +134,38 @@ const messages = [ trashed_at: '2026-08-04 08:00:00', }, ] +const smsMessages = [ + { + body: 'Bin gleich am WΓΌrfelpark. Kommst du auch?', + created_at: '2026-08-06 13:04:00', + direction: 'received', + id: 'sms-1', + media_duration_ms: null, + media_mime: null, + media_payload: null, + media_waveform: null, + message_type: 'text', + media_asset_id: null, + read_at: null, + recipient_number: '5551234567', + sender_number: '5558675309', + }, + { + body: 'Ja, gib mir fΓΌnf Minuten.', + created_at: '2026-08-06 13:05:00', + direction: 'sent', + id: 'sms-2', + media_duration_ms: null, + media_mime: null, + media_payload: null, + media_waveform: null, + message_type: 'text', + media_asset_id: null, + read_at: null, + recipient_number: '5558675309', + sender_number: '5551234567', + }, +] const marketplaceListings = [ { id: '81bc9d37-20e1-4d8a-82f8-f4b85f77cf01', @@ -843,6 +914,51 @@ app.post('/api/:endpoint', (request, response) => { }) return } + if (endpoint === 'messages:conversations') { + const grouped = new Map() + for (const message of [...smsMessages].reverse()) { + const phoneNumber = + message.direction === 'sent' + ? message.recipient_number + : message.sender_number + const conversation = grouped.get(phoneNumber) + if (conversation) { + if (message.direction === 'received' && !message.read_at) + conversation.unread += 1 + continue + } + grouped.set(phoneNumber, { + lastMessage: message.body, + lastMessageAt: message.created_at, + lastMessageType: message.message_type, + phoneNumber, + unread: message.direction === 'received' && !message.read_at ? 1 : 0, + }) + } + response.json({ success: true, data: [...grouped.values()] }) + return + } + if (endpoint === 'messages:gifs') { + const offset = Math.max(0, Number(request.body.offset ?? 0)) + const pageSize = 6 + const results = gifMocks.slice(offset, offset + pageSize).map(([id, title]) => ({ + height: 200, + id, + previewUrl: `https://media.giphy.com/media/${id}/200w.gif`, + title, + url: `https://media.giphy.com/media/${id}/giphy.gif`, + width: 200, + })) + response.json({ + success: true, + data: { + hasMore: offset + results.length < gifMocks.length, + nextOffset: offset + results.length, + results, + }, + }) + return + } if (endpoint === 'development:bootstrap') { response.json({ success: true, @@ -865,6 +981,156 @@ app.post('/api/:endpoint', (request, response) => { }) return } + if (endpoint === 'messages:thread') { + const number = String(request.body.phoneNumber) + const thread = smsMessages.filter( + (message) => + message.sender_number === number || message.recipient_number === number, + ) + for (const message of thread) { + if (message.direction === 'received') message.read_at = message.read_at ?? '2026-08-06 13:06:00' + } + response.json({ + success: true, + data: thread.map(({ media_payload, ...message }) => ({ + ...message, + media_asset_id: ['image', 'gif', 'video'].includes(message.message_type) + ? media_payload + : null, + })), + }) + return + } + if (endpoint === 'messages:media') { + const message = smsMessages.find( + (item) => item.id === request.body.id && item.message_type === 'voice', + ) + response.json( + message + ? { + success: true, + data: { + mime: message.media_mime, + payload: message.media_payload, + }, + } + : { success: false, error: 'message_not_found' }, + ) + return + } + if (endpoint === 'messages:send') { + const body = String(request.body.body ?? '').trim() + const phoneNumber = String(request.body.phoneNumber ?? '') + const messageType = request.body.messageType ?? 'text' + const isAttachment = ['image', 'gif', 'video'].includes(messageType) + const requestedAttachmentId = String(request.body.mediaAssetId ?? '') + const selectedMedia = /^\d+$/.test(requestedAttachmentId) + ? mockMedia.find((item) => String(item.id) === requestedAttachmentId) + : null + const attachmentId = selectedMedia?.url ?? requestedAttachmentId + if ( + !phoneNumber || + (messageType === 'text' && !body) || + (messageType === 'voice' && !request.body.mediaPayload) || + (isAttachment && + !attachmentAssets[messageType].has(attachmentId) && + !attachmentId.startsWith('https://') && + !attachmentId.startsWith('data:image/')) + ) { + response.json({ success: false, error: 'invalid_message' }) + return + } + const message = { + body, + created_at: new Date().toISOString().slice(0, 19).replace('T', ' '), + direction: 'sent', + id: `sms-${Date.now()}`, + media_duration_ms: + ['voice', 'video'].includes(messageType) + ? request.body.mediaDurationMs ?? null + : null, + media_mime: + messageType === 'voice' + ? request.body.mediaMime + : messageType === 'image' + ? 'image/jpeg' + : messageType === 'gif' + ? 'image/gif' + : messageType === 'video' + ? 'video/mp4' + : null, + media_payload: + messageType === 'voice' + ? request.body.mediaPayload + : isAttachment + ? attachmentId + : null, + media_waveform: + messageType === 'voice' ? request.body.mediaWaveform : null, + message_type: messageType, + media_asset_id: isAttachment ? attachmentId : null, + read_at: null, + recipient_number: phoneNumber, + sender_number: '5551234567', + } + smsMessages.push(message) + const { media_payload, ...publicMessage } = message + response.json({ success: true, data: publicMessage }) + return + } + if (endpoint === 'messages:delete') { + const phoneNumbers = new Set( + Array.isArray(request.body.phoneNumbers) + ? request.body.phoneNumbers.map(String) + : [], + ) + for (let index = smsMessages.length - 1; index >= 0; index -= 1) { + const message = smsMessages[index] + const otherNumber = + message.direction === 'sent' + ? message.recipient_number + : message.sender_number + if (phoneNumbers.has(otherNumber)) smsMessages.splice(index, 1) + } + response.json({ success: true }) + return + } + if (endpoint === 'contacts:list') { + response.json({ success: true, data: contacts }) + return + } + if (endpoint === 'contacts:save') { + const name = String(request.body.name ?? '').trim() + const phoneNumber = String(request.body.phoneNumber ?? '').trim() + if (!name || !phoneNumber) { + response.json({ success: false, error: 'invalid_contact' }) + return + } + let contact = contacts.find((item) => item.id === request.body.id) + if (contact) { + contact.name = name + contact.phone_number = phoneNumber + contact.updated_at = new Date().toISOString().slice(0, 19).replace('T', ' ') + } else { + const now = new Date().toISOString().slice(0, 19).replace('T', ' ') + contact = { + created_at: now, + id: `contact-${contactSequence++}`, + name, + phone_number: phoneNumber, + updated_at: now, + } + contacts.push(contact) + } + response.json({ success: true, data: contact }) + return + } + if (endpoint === 'contacts:delete') { + const index = contacts.findIndex((item) => item.id === request.body.id) + if (index >= 0) contacts.splice(index, 1) + response.json({ success: true }) + return + } if (endpoint === 'media:config') { response.json({ success: true, data: { videoBitrateKbps: 1500 } }) return diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua index 3e76596..b8a7251 100644 --- a/sky_phone/config/config.lua +++ b/sky_phone/config/config.lua @@ -2,7 +2,7 @@ Config.Bridge = { Framework = "auto", -- auto, esx, qbox, qb Inventory = "auto", -- auto, ox, qb, lj, qs, codem, core, mf, smx Locale = "en", - CallbackTimeout = 5000, + CallbackTimeout = 15000, Debug = false, DebugLevels = { info = true, @@ -34,6 +34,19 @@ Config.Calls = { RecentPageSize = 100, } +Config.Messages = { + BodyMaxLength = 2000, + ConversationScanLimit = 1000, + ThreadPageSize = 200, + SendsPerMinute = 30, + MediaLoadsPerMinute = 120, + VoiceMaxDurationMs = 30000, + VoiceMaxBase64Length = 180000, + VoiceWaveformSamples = 48, + VideoMaxDurationMs = 30000, + DeleteBatchSize = 20, +} + Config.Mail = { Domain = "ifruit.com", LocalPartMinLength = 3, diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua index ca40291..db83eef 100644 --- a/sky_phone/config/locales/en.lua +++ b/sky_phone/config/locales/en.lua @@ -36,6 +36,39 @@ Locales["en"] = { }, }, Apps = { + messages = { + name = "Messages", newMessage = "New message from {sender}", compose = "New Message", + search = "Search", to = "To:", message = "Message", send = "Send", details = "Details", + filterUnread = "Show Unread Messages", smsLabel = "Text Message Β· SMS", + photo = "Photo", gif = "GIF", video = "Video", attachPhoto = "Attach Photo", takePhoto = "Take Photo", + attachGif = "Attach GIF", attachVideo = "Attach Video", photos = "Photos", gifs = "GIFs", videos = "Videos", + noPhotos = "Take a photo first to attach it here.", noVideos = "Record a video in Camera first.", searchGifs = "Search GIPHY", loadMore = "Load More", + moreActions = "More Actions", contactDetails = "Contact Details", contactName = "Name", phoneNumber = "Phone Number", + call = "Call", messageAction = "Message", addContact = "Add Contact", deleteContact = "Delete Contact", + selectedCount = "{count} Selected", deleteSelected = "Delete", + contactSaveFailed = "The contact could not be saved.", contactDeleteFailed = "The contact could not be deleted.", + callFailed = "The call could not be started.", + emoji = "Emoji", voiceMessage = "Audio Message", recordVoice = "Record Audio", + playAudio = "Play Audio", pauseAudio = "Pause Audio", + recording = "Recording", stopAndSend = "Stop and Send", cancelRecording = "Cancel Recording", + sending = "Sending...", delivered = "Delivered", notDelivered = "Not Delivered", + microphoneUnavailable = "The microphone is unavailable.", recordingTooLarge = "The recording is too large.", + noSim = "No SIM", noSimBody = "Insert a SIM card in Settings to send and receive messages.", + noMessages = "No Messages", noMessagesBody = "Start a conversation with a phone number.", + noResults = "No Results", today = "Today", yesterday = "Yesterday", + errors = { + invalid_number = "Enter a valid phone number.", invalid_message = "Enter a message.", invalid_voice = "The audio message is invalid.", + invalid_attachment = "The attachment is invalid.", + media_provider_unconfigured = "Photo uploads are not configured.", + capture_provider_unavailable = "The screenshot resource is unavailable.", capture_failed = "The photo could not be captured.", + video_provider_unavailable = "Video capture requires the screencapture resource.", video_capture_failed = "The video could not be recorded.", + recording_in_progress = "A video is already being recorded.", recording_not_found = "No active video recording was found.", + gif_provider_unconfigured = "GIF search is not configured.", gif_provider_failed = "GIF search is temporarily unavailable.", + self_message = "You cannot message your own number.", recipient_not_found = "That number is unavailable.", + no_sim = "This phone has no SIM card.", rate_limited = "Too many messages. Try again in a minute.", + request_failed = "Messages are temporarily unavailable.", default = "The message could not be sent.", + }, + }, phone = { name = "Phone", recents = "Recents", contacts = "Contacts", keypad = "Keypad", noSim = "No SIM", noSimBody = "Insert a SIM card in Settings to make calls.", diff --git a/sky_phone/config/media.lua b/sky_phone/config/media.lua index 1fa5442..98ced28 100644 --- a/sky_phone/config/media.lua +++ b/sky_phone/config/media.lua @@ -1,4 +1,9 @@ Config.Media = { + GiphyApiKey = "", + GifPageSize = 24, + GifRating = "pg-13", + UrlMaxLength = 2048, + AllowedGifHosts = { "giphy.com" }, FiveManage = { ApiKey = "e4UZ9y39JfkxHoZMAgRUVK6KMQsNCKPJ", -- Dashboard -> Tokens -> create a token with Media access. BaseUrl = "https://api.fivemanage.com/api/v3/file", diff --git a/sky_phone/fxmanifest.lua b/sky_phone/fxmanifest.lua index 817f0f2..3511c0d 100644 --- a/sky_phone/fxmanifest.lua +++ b/sky_phone/fxmanifest.lua @@ -43,12 +43,13 @@ server_scripts { 'source/server/phone.lua', 'source/server/sim.lua', 'source/server/calls.lua', + 'source/server/media.lua', + 'source/server/messages.lua', 'source/server/notes.lua', 'source/server/mail.lua', 'source/server/banking.lua', 'source/server/marketplace.lua', 'source/server/pages.lua', - 'source/server/media.lua', 'source/server/calendar.lua', } diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua index 7a77157..3bb0ce7 100644 --- a/sky_phone/source/client/main.lua +++ b/sky_phone/source/client/main.lua @@ -74,6 +74,12 @@ local server_callbacks = { "banking:deposit", "banking:withdraw", "banking:transfer", + "messages:conversations", + "messages:thread", + "messages:send", + "messages:media", + "messages:delete", + "messages:gifs", "gallery:list", "media:config", } @@ -371,6 +377,17 @@ RegisterNetEvent("sky_phone:banking:changed", function() SendNUIMessage({ type = "banking:changed" }) end) +RegisterNetEvent("sky_phone:messages:changed", function(data) + SendNUIMessage({ type = "messages:changed", data = data }) +end) + +RegisterNetEvent("sky_phone:messages:new", function(data) + local messages_locale = get_locale().Nui.Apps.messages + data.title = messages_locale.name + data.text = messages_locale.newMessage:gsub("{sender}", tostring(data.sender)) + SendNUIMessage({ type = "messages:new", data = data }) +end) + RegisterNetEvent("sky_phone:call:incoming", function(data) notification_focus = true SetNuiFocus(true, true) diff --git a/sky_phone/source/html/assets/sky-camera-DcGF6SMx.webp b/sky_phone/source/html/assets/sky-camera-DcGF6SMx.webp deleted file mode 100644 index 2692878..0000000 Binary files a/sky_phone/source/html/assets/sky-camera-DcGF6SMx.webp and /dev/null differ diff --git a/sky_phone/source/html/index.html b/sky_phone/source/html/index.html index 6bc38b4..64f5a55 100644 --- a/sky_phone/source/html/index.html +++ b/sky_phone/source/html/index.html @@ -4,8 +4,8 @@ Sky Phone - - + +
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua index e95f6ae..b2b6acc 100644 --- a/sky_phone/source/server/db_migrate.lua +++ b/sky_phone/source/server/db_migrate.lua @@ -369,6 +369,34 @@ local schema = { }, tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci", }, + { + name = "sky_phone_sms_messages", + columns = { + { name = "id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" }, + { name = "sender_sim_id", type = "CHAR(36) NULL", characterSet = "ascii", collation = "ascii_bin" }, + { name = "recipient_sim_id", type = "CHAR(36) NULL", characterSet = "ascii", collation = "ascii_bin" }, + { name = "sender_number", type = "VARCHAR(24) NOT NULL", characterSet = "ascii", collation = "ascii_bin" }, + { name = "recipient_number", type = "VARCHAR(24) NOT NULL", characterSet = "ascii", collation = "ascii_bin" }, + { name = "message_type", type = "ENUM('text', 'voice', 'image', 'gif', 'video') NOT NULL DEFAULT 'text'" }, + { name = "body", type = "VARCHAR(2000) NOT NULL" }, + { name = "media_payload", type = "MEDIUMTEXT NULL" }, + { name = "media_mime", type = "VARCHAR(64) NULL", characterSet = "ascii", collation = "ascii_general_ci" }, + { name = "media_duration_ms", type = "INT UNSIGNED NULL" }, + { name = "media_waveform", type = "TEXT NULL" }, + { name = "read_at", type = "DATETIME NULL" }, + { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" }, + }, + primaryKey = "id", + indexes = { + { name = "idx_sky_phone_sms_sender", columns = "(`sender_sim_id`, `created_at`)" }, + { name = "idx_sky_phone_sms_recipient", columns = "(`recipient_sim_id`, `created_at`)" }, + }, + foreignKeys = { + { column = "sender_sim_id", references = "`sky_phone_sims` (`id`) ON DELETE SET NULL" }, + { column = "recipient_sim_id", references = "`sky_phone_sims` (`id`) ON DELETE SET NULL" }, + }, + tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci", + }, { name = "sky_phone_marketplace_listings", columns = { @@ -650,6 +678,10 @@ local schema = { } Bridge.Database.Migrate("sky_phone", schema) +Bridge.Database.Query([[ + ALTER TABLE `sky_phone_sms_messages` + MODIFY COLUMN `message_type` ENUM('text', 'voice', 'image', 'gif', 'video') NOT NULL DEFAULT 'text' +]], {}) Bridge.Database.EnsureIndex("sky_phone_devices", "uniq_sky_phone_devices_sim", "(`sim_id`)", { unique = true }) Bridge.Database.Query("UPDATE `sky_phone_contacts` SET `contact_id` = `id` WHERE `contact_id` IS NULL", {}) Bridge.Database.EnsureIndex("sky_phone_contacts", "uniq_sky_phone_contacts_account_contact", "(`account_id`, `contact_id`)", { unique = true }) diff --git a/sky_phone/source/server/media.lua b/sky_phone/source/server/media.lua index c05558c..ffdbb05 100644 --- a/sky_phone/source/server/media.lua +++ b/sky_phone/source/server/media.lua @@ -34,7 +34,7 @@ local function http_request(url, method, body, headers, timeout_ms) settled = true request:resolve({ status = 0, body = "request_timeout" }) end) - return Citizen.Await(request) + return Await(request) end local function decode_response(response) @@ -245,6 +245,127 @@ Bridge.Callbacks.Register("sky_phone:gallery:list", function(source, data) return { success = true, data = rows } end) +local function current_messaging_device(source) + local session, error_response = SkyPhone.RequireSession(source) + if not session then + return nil, error_response + end + local device = SkyPhone.LoadDevice(session.imei) + if not device then + return nil, { success = false, error = "device_not_found" } + end + if not device.sim_id then + return nil, { success = false, error = "no_sim" } + end + return device +end + +local function await_giphy_http(url) + local request = promise.new() + PerformHttpRequest(url, function(status, response_body) + request:resolve({ + body = response_body, + status = status, + }) + end, "GET", "", {}) + return Await(request) +end + +local function parse_giphy_json(value) + if type(value) == "table" then + return value + end + if type(value) ~= "string" or value == "" then + return nil + end + return json.decode(value) +end + +local function url_encode(value) + return tostring(value):gsub("\n", "\r\n"):gsub("([^%w%-_%.~])", function(character) + return ("%%%02X"):format(character:byte()) + end) +end + +Bridge.Callbacks.Register("sky_phone:messages:gifs", function(source, data) + if not SkyPhone.AllowOperation(source, "gif_search", 30, 60) then + return { success = false, error = "rate_limited" } + end + if type(data) ~= "table" then + return { success = false, error = "invalid_request" } + end + local device, error_response = current_messaging_device(source) + if not device then + return error_response + end + local query = type(data.query) == "string" and data.query:match("^%s*(.-)%s*$") or "" + local offset = math.floor(tonumber(data.offset) or 0) + if #query > 60 or offset < 0 or offset > 500 then + return { success = false, error = "invalid_request" } + end + local api_key = Config.Media.GiphyApiKey + if api_key == "" then + return { success = false, error = "gif_provider_unconfigured" } + end + local endpoint = query == "" and "trending" or "search" + local url = ("https://api.giphy.com/v1/gifs/%s?api_key=%s&limit=%s&offset=%s&rating=%s"):format( + endpoint, + url_encode(api_key), + Config.Media.GifPageSize, + offset, + url_encode(Config.Media.GifRating) + ) + if query ~= "" then + url = url .. "&q=" .. url_encode(query) + end + local response = await_giphy_http(url) + if response.status == 401 or response.status == 403 then + Bridge.Debug("error", "[sky_phone] GIPHY rejected the configured API key with HTTP %s.", tostring(response.status)) + return { success = false, error = "gif_provider_unauthorized" } + end + if response.status == 429 then + Bridge.Debug("error", "[sky_phone] GIPHY rate limit reached.") + return { success = false, error = "gif_provider_rate_limited" } + end + if response.status < 200 or response.status >= 300 then + Bridge.Debug("error", "[sky_phone] GIPHY request failed with HTTP %s.", tostring(response.status)) + return { success = false, error = "gif_provider_failed" } + end + local payload = parse_giphy_json(response.body) + if type(payload) ~= "table" or type(payload.data) ~= "table" then + return { success = false, error = "gif_provider_failed" } + end + local results = {} + for _, item in ipairs(payload.data) do + local preview = item.images and (item.images.fixed_width or item.images.downsized) + local original = item.images and item.images.original + if type(item.id) == "string" and type(preview) == "table" and type(preview.url) == "string" + and type(original) == "table" and type(original.url) == "string" then + results[#results + 1] = { + height = tonumber(preview.height) or 200, + id = item.id, + previewUrl = preview.url, + title = type(item.title) == "string" and item.title or "GIF", + url = original.url, + width = tonumber(preview.width) or 200, + } + end + end + local pagination = type(payload.pagination) == "table" and payload.pagination or {} + local page_offset = math.floor(tonumber(pagination.offset) or offset) + local page_count = math.floor(tonumber(pagination.count) or #payload.data) + local total_count = math.floor(tonumber(pagination.total_count) or (page_offset + page_count)) + local next_offset = page_offset + page_count + return { + success = true, + data = { + hasMore = page_count > 0 and next_offset < total_count, + nextOffset = next_offset, + results = results, + }, + } +end) + Bridge.Callbacks.Register("sky_phone:media:config", function(source) local owner, error_response = session_owner(source) if not owner then diff --git a/sky_phone/source/server/messages.lua b/sky_phone/source/server/messages.lua new file mode 100644 index 0000000..b0835d0 --- /dev/null +++ b/sky_phone/source/server/messages.lua @@ -0,0 +1,479 @@ +Bridge.Database.AfterMigration("sky_phone", function() + +local allowed_voice_mimes = { + ["audio/webm"] = true, + ["audio/webm;codecs=opus"] = true, +} + +local attachment_assets = { + gif = { + celebrate = true, + hearts = true, + party = true, + thumbs_up = true, + wow = true, + }, + image = { + ["camera-1"] = true, + ["camera-2"] = true, + ["camera-3"] = true, + ["city-lights"] = true, + ["desert-road"] = true, + ["ocean-air"] = true, + ["sunset-drive"] = true, + }, + video = { + ["city-loop"] = true, + ["ocean-loop"] = true, + ["sunset-loop"] = true, + }, +} + +local attachment_mimes = { + gif = "image/gif", + image = "image/jpeg", + video = "video/mp4", +} + +local function allowed_media_url(value) + if type(value) ~= "string" or #value == 0 or #value > Config.Media.UrlMaxLength then + return false + end + local host = value:lower():match("^https://([^/:?#]+)") + if not host then + return false + end + for _, allowed_host in ipairs(Config.Media.AllowedGifHosts) do + local suffix = "." .. allowed_host + if host == allowed_host or host:sub(-#suffix) == suffix then + return true + end + end + return false +end + +local function valid_attachment_asset(message_type, value) + return attachment_assets[message_type][value] + or message_type == "gif" and allowed_media_url(value) +end + +local function valid_stored_attachment(message_type, value) + if valid_attachment_asset(message_type, value) then + return true + end + return (message_type == "image" or message_type == "video") + and type(value) == "string" + and #value <= Config.Media.UrlMaxLength + and value:match("^https://") ~= nil +end + +local function uuid() + local rows = Bridge.Database.Query("SELECT UUID() AS `id`", {}) + if not rows[1] or type(rows[1].id) ~= "string" then + error("[sky_phone] Database did not generate an SMS UUID.") + end + return rows[1].id +end + +local function trim(value) + if type(value) ~= "string" then + return nil + end + return value:match("^%s*(.-)%s*$") +end + +local function current_device(source) + local session, error_response = SkyPhone.RequireSession(source) + if not session then + return nil, error_response + end + local device = SkyPhone.LoadDevice(session.imei) + if not device then + return nil, { success = false, error = "device_not_found" } + end + if not device.sim_id then + return nil, { success = false, error = "no_sim" } + end + return device +end + +local function format_message(row) + row.media_duration_ms = tonumber(row.media_duration_ms) + row.media_asset_id = nil + if row.message_type == "voice" then + local waveform = row.media_waveform and json.decode(row.media_waveform) or nil + if type(waveform) ~= "table" then + error(("[sky_phone] Voice message %s has an invalid waveform payload."):format(tostring(row.id))) + end + row.media_waveform = waveform + row.media_payload = nil + elseif attachment_assets[row.message_type] then + if not valid_stored_attachment(row.message_type, row.media_payload) then + error(("[sky_phone] Message %s has an invalid attachment asset."):format(tostring(row.id))) + end + row.media_asset_id = row.media_payload + row.media_payload = nil + row.media_waveform = nil + if row.message_type ~= "video" then + row.media_duration_ms = nil + end + else + row.media_payload = nil + row.media_duration_ms = nil + row.media_mime = nil + row.media_waveform = nil + end + return row +end + +local function validate_attachment(source, device, message_type, data) + if type(data.mediaAssetId) ~= "string" then + return nil + end + local payload = data.mediaAssetId + if not valid_attachment_asset(message_type, payload) then + if message_type == "gif" then + return nil + end + local media_id = tonumber(payload) + if not media_id or media_id < 1 or media_id ~= math.floor(media_id) then + return nil + end + local condition + local params + if device.account_id then + condition = "`account_id` = ?" + params = { media_id, tonumber(device.account_id) } + else + condition = "`account_id` IS NULL AND `device_imei` = ?" + params = { media_id, device.imei } + end + local rows = Bridge.Database.Query(([[ + SELECT `url`, `media_type` FROM `sky_phone_media` + WHERE `id` = ? AND %s + LIMIT 1 + ]]):format(condition), params) + local media = rows[1] + local expected_type = message_type == "image" and "photo" or "video" + if not media or media.media_type ~= expected_type + or type(media.url) ~= "string" + or #media.url > Config.Media.UrlMaxLength + or not media.url:match("^https://") + then + Bridge.Debug("warn", ("[sky_phone] Rejected unowned SMS media from source %s."):format(tostring(source))) + return nil + end + payload = media.url + end + local duration = nil + if message_type == "video" and data.mediaDurationMs ~= nil then + duration = tonumber(data.mediaDurationMs) + if not duration or duration < 1000 or duration > Config.Messages.VideoMaxDurationMs then + return nil + end + duration = math.floor(duration) + end + return { + duration = duration, + mime = attachment_mimes[message_type], + payload = payload, + } +end + +local function validate_voice(data) + if type(data.mediaPayload) ~= "string" + or #data.mediaPayload == 0 + or #data.mediaPayload > Config.Messages.VoiceMaxBase64Length + or data.mediaPayload:find("[^A-Za-z0-9+/=]") then + return nil + end + if type(data.mediaMime) ~= "string" or not allowed_voice_mimes[data.mediaMime] then + return nil + end + local duration = tonumber(data.mediaDurationMs) + if not duration or duration < 300 or duration > Config.Messages.VoiceMaxDurationMs then + return nil + end + if type(data.mediaWaveform) ~= "table" + or #data.mediaWaveform < 8 + or #data.mediaWaveform > Config.Messages.VoiceWaveformSamples then + return nil + end + local waveform = {} + for index = 1, #data.mediaWaveform do + local sample = tonumber(data.mediaWaveform[index]) + if not sample or sample < 0 or sample > 1 then + return nil + end + waveform[index] = math.floor(sample * 1000 + 0.5) / 1000 + end + return { + duration = math.floor(duration), + mime = data.mediaMime, + payload = data.mediaPayload, + waveform = json.encode(waveform), + } +end + +local function notify_sim(sim_id, event_name, data) + local devices = Bridge.Database.Query([[ + SELECT d.`imei`, d.`device_name`, settings.`payload` AS `settings` + FROM `sky_phone_devices` d + LEFT JOIN `sky_phone_device_data` settings + ON settings.`device_imei` = d.`imei` AND settings.`namespace` = 'settings' + WHERE d.`sim_id` = ? + ]], { sim_id }) + for _, device in ipairs(devices) do + for _, player_source in ipairs(Bridge.Framework.GetPlayers()) do + local source = tonumber(player_source) or player_source + if SkyPhone.FindDeviceSlots(source, device.imei)[1] then + local payload = {} + for key, value in pairs(data) do + payload[key] = value + end + payload.device = { + imei = device.imei, + name = device.device_name, + settings = device.settings, + } + TriggerClientEvent(event_name, source, payload) + end + end + end +end + +Bridge.Callbacks.Register("sky_phone:messages:conversations", function(source) + local device, error_response = current_device(source) + if not device then + return error_response + end + local rows = Bridge.Database.Query([[ + SELECT `id`, `sender_sim_id`, `recipient_sim_id`, `sender_number`, `recipient_number`, + `message_type`, `body`, `read_at`, `created_at` + FROM `sky_phone_sms_messages` + WHERE `sender_sim_id` = ? OR `recipient_sim_id` = ? + ORDER BY `created_at` DESC, `id` DESC LIMIT ? + ]], { device.sim_id, device.sim_id, Config.Messages.ConversationScanLimit }) + local conversations = {} + local ordered = {} + for _, row in ipairs(rows) do + local received = row.recipient_sim_id == device.sim_id + local number = received and row.sender_number or row.recipient_number + local conversation = conversations[number] + if not conversation then + conversation = { + phoneNumber = number, + lastMessage = row.body, + lastMessageAt = row.created_at, + lastMessageType = row.message_type, + unread = 0, + } + conversations[number] = conversation + ordered[#ordered + 1] = conversation + end + if received and not row.read_at then + conversation.unread = conversation.unread + 1 + end + end + return { success = true, data = ordered } +end) + +Bridge.Callbacks.Register("sky_phone:messages:thread", function(source, data) + if type(data) ~= "table" then + return { success = false, error = "invalid_request" } + end + local device, error_response = current_device(source) + if not device then + return error_response + end + local number = SkyPhoneSimNumber.Normalize(data.phoneNumber, Config.Sim.NumberLength, Config.Sim.NumberPrefix) + if not number then + return { success = false, error = "invalid_number" } + end + local rows = Bridge.Database.Query([[ + SELECT * FROM ( + SELECT `id`, `sender_number`, `recipient_number`, `message_type`, `body`, `media_payload`, `media_mime`, + `media_duration_ms`, `media_waveform`, `read_at`, `created_at`, + CASE WHEN `sender_sim_id` = ? THEN 'sent' ELSE 'received' END AS `direction` + FROM `sky_phone_sms_messages` + WHERE (`sender_sim_id` = ? AND `recipient_number` = ?) + OR (`recipient_sim_id` = ? AND `sender_number` = ?) + ORDER BY `created_at` DESC, `id` DESC LIMIT ? + ) recent_messages + ORDER BY `created_at` ASC, `id` ASC + ]], { device.sim_id, device.sim_id, number, device.sim_id, number, Config.Messages.ThreadPageSize }) + for index = 1, #rows do + rows[index] = format_message(rows[index]) + end + Bridge.Database.Query([[ + UPDATE `sky_phone_sms_messages` SET `read_at` = CURRENT_TIMESTAMP + WHERE `recipient_sim_id` = ? AND `sender_number` = ? AND `read_at` IS NULL + ]], { device.sim_id, number }) + return { success = true, data = rows } +end) + +Bridge.Callbacks.Register("sky_phone:messages:delete", function(source, data) + if not SkyPhone.AllowOperation(source, "message_delete", 10, 60) then + return { success = false, error = "rate_limited" } + end + if type(data) ~= "table" or type(data.phoneNumbers) ~= "table" + or #data.phoneNumbers == 0 or #data.phoneNumbers > Config.Messages.DeleteBatchSize then + return { success = false, error = "invalid_request" } + end + local device, error_response = current_device(source) + if not device then + return error_response + end + local numbers = {} + local seen = {} + for index = 1, #data.phoneNumbers do + local number = SkyPhoneSimNumber.Normalize( + data.phoneNumbers[index], + Config.Sim.NumberLength, + Config.Sim.NumberPrefix + ) + if not number then + return { success = false, error = "invalid_number" } + end + if not seen[number] then + seen[number] = true + numbers[#numbers + 1] = number + end + end + local placeholders = {} + for index = 1, #numbers do + placeholders[index] = "?" + end + local values = { device.sim_id } + for _, number in ipairs(numbers) do + values[#values + 1] = number + end + values[#values + 1] = device.sim_id + for _, number in ipairs(numbers) do + values[#values + 1] = number + end + local list = table.concat(placeholders, ", ") + Bridge.Database.Query(([[ + DELETE FROM `sky_phone_sms_messages` + WHERE (`sender_sim_id` = ? AND `recipient_number` IN (%s)) + OR (`recipient_sim_id` = ? AND `sender_number` IN (%s)) + ]]):format(list, list), values) + TriggerClientEvent("sky_phone:messages:changed", source, {}) + return { success = true } +end) + +Bridge.Callbacks.Register("sky_phone:messages:media", function(source, data) + if not SkyPhone.AllowOperation(source, "message_media", Config.Messages.MediaLoadsPerMinute, 60) then + return { success = false, error = "rate_limited" } + end + if type(data) ~= "table" or type(data.id) ~= "string" then + return { success = false, error = "invalid_request" } + end + local device, error_response = current_device(source) + if not device then + return error_response + end + local rows = Bridge.Database.Query([[ + SELECT `media_payload`, `media_mime` + FROM `sky_phone_sms_messages` + WHERE `id` = ? AND `message_type` = 'voice' + AND (`sender_sim_id` = ? OR `recipient_sim_id` = ?) + LIMIT 1 + ]], { data.id, device.sim_id, device.sim_id }) + if not rows[1] or type(rows[1].media_payload) ~= "string" then + return { success = false, error = "message_not_found" } + end + return { + success = true, + data = { + mime = rows[1].media_mime, + payload = rows[1].media_payload, + }, + } +end) + +Bridge.Callbacks.Register("sky_phone:messages:send", function(source, data) + if not SkyPhone.AllowOperation(source, "message_send", Config.Messages.SendsPerMinute, 60) then + return { success = false, error = "rate_limited" } + end + if type(data) ~= "table" then + return { success = false, error = "invalid_request" } + end + local device, error_response = current_device(source) + if not device then + return error_response + end + local number = SkyPhoneSimNumber.Normalize(data.phoneNumber, Config.Sim.NumberLength, Config.Sim.NumberPrefix) + if not number then + return { success = false, error = "invalid_number" } + end + if number == device.phone_number then + return { success = false, error = "self_message" } + end + local message_type = data.messageType or "text" + local body = trim(data.body) or "" + local voice = nil + local attachment = nil + if message_type == "text" then + if body == "" or #body > Config.Messages.BodyMaxLength then + return { success = false, error = "invalid_message" } + end + elseif message_type == "voice" then + voice = validate_voice(data) + if not voice then + return { success = false, error = "invalid_voice" } + end + body = "" + elseif attachment_assets[message_type] then + attachment = validate_attachment(source, device, message_type, data) + if not attachment then + return { success = false, error = "invalid_attachment" } + end + body = "" + else + return { success = false, error = "invalid_request" } + end + local recipients = Bridge.Database.Query( + "SELECT `id`, `phone_number` FROM `sky_phone_sims` WHERE `phone_number` = ? LIMIT 1", + { number } + ) + local recipient = recipients[1] + if not recipient then + return { success = false, error = "recipient_not_found" } + end + local id = uuid() + Bridge.Database.Query([[ + INSERT INTO `sky_phone_sms_messages` + (`id`, `sender_sim_id`, `recipient_sim_id`, `sender_number`, `recipient_number`, `message_type`, + `body`, `media_payload`, `media_mime`, `media_duration_ms`, `media_waveform`) + VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) + ]], { + id, + device.sim_id, + recipient.id, + device.phone_number, + number, + message_type, + body, + voice and voice.payload or attachment and attachment.payload or nil, + voice and voice.mime or attachment and attachment.mime or nil, + voice and voice.duration or attachment and attachment.duration or nil, + voice and voice.waveform or nil, + }) + local rows = Bridge.Database.Query([[ + SELECT `id`, `sender_number`, `recipient_number`, `message_type`, `body`, `media_payload`, `media_mime`, + `media_duration_ms`, `media_waveform`, `read_at`, `created_at`, 'sent' AS `direction` + FROM `sky_phone_sms_messages` WHERE `id` = ? LIMIT 1 + ]], { id }) + local message = format_message(rows[1]) + TriggerClientEvent("sky_phone:messages:changed", source, { phoneNumber = number }) + notify_sim(recipient.id, "sky_phone:messages:new", { + message = message, + phoneNumber = device.phone_number, + sender = device.phone_number, + voice = message_type == "voice", + }) + return { success = true, data = message } +end) + +end) diff --git a/sky_phone/sql/install.sql b/sky_phone/sql/install.sql index 2bf48d3..fdb12b0 100644 --- a/sky_phone/sql/install.sql +++ b/sky_phone/sql/install.sql @@ -190,6 +190,27 @@ CREATE TABLE IF NOT EXISTS `sky_phone_bank_transactions` ( KEY `idx_sky_phone_bank_reference` (`reference`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; +CREATE TABLE IF NOT EXISTS `sky_phone_sms_messages` ( + `id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL, + `sender_sim_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NULL, + `recipient_sim_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NULL, + `sender_number` VARCHAR(24) CHARACTER SET ascii COLLATE ascii_bin NOT NULL, + `recipient_number` VARCHAR(24) CHARACTER SET ascii COLLATE ascii_bin NOT NULL, + `message_type` ENUM('text', 'voice', 'image', 'gif', 'video') NOT NULL DEFAULT 'text', + `body` VARCHAR(2000) NOT NULL, + `media_payload` MEDIUMTEXT NULL, + `media_mime` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_general_ci NULL, + `media_duration_ms` INT UNSIGNED NULL, + `media_waveform` TEXT NULL, + `read_at` DATETIME NULL, + `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, + PRIMARY KEY (`id`), + KEY `idx_sky_phone_sms_sender` (`sender_sim_id`, `created_at`), + KEY `idx_sky_phone_sms_recipient` (`recipient_sim_id`, `created_at`), + FOREIGN KEY (`sender_sim_id`) REFERENCES `sky_phone_sims` (`id`) ON DELETE SET NULL, + FOREIGN KEY (`recipient_sim_id`) REFERENCES `sky_phone_sims` (`id`) ON DELETE SET NULL +) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; + CREATE TABLE IF NOT EXISTS `sky_phone_calendar_events` ( `id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL, `account_id` BIGINT UNSIGNED NOT NULL,