- {isTauriEnv ? (
+
+ {isTauri() ? (
<>
{
if (!data.startsWith("tensamin://tu::")) {
toast("error", "Invalid QR code");
return;
- } else {
- const decoded = data.replace("tensamin://tu::", "");
+ }
- try {
- const { userId, privateKey, domain } =
- parseTuFileContent(decoded);
- await save("session_id", Date.now());
- await save("user_id", userId);
- await save("private_key", privateKey);
- if (domain) {
- await save("ttp_url", `https://${domain}/`);
- }
- location.href = "/";
- } catch (error) {
- log(0, "login", "red", error);
- toast("error", "Failed to parse QR code data");
+ const decoded = data.replace("tensamin://tu::", "");
+
+ try {
+ const { userId, privateKey, domain } =
+ parseTuFileContent(decoded);
+
+ await save("session_id", Date.now());
+ await save("user_id", userId);
+ await save("private_key", privateKey);
+
+ if (domain) {
+ await save("ttp_url", `https://${domain}/`);
}
+
+ location.href = "/";
+ } catch (error) {
+ log(0, "login", "red", error);
+ toast("error", "Failed to parse QR code data");
}
}}
/>
@@ -228,10 +303,30 @@ export default function Form() {
) : (
uploadRef.current?.click()}
- className="flex flex-col gap-3 cursor-pointer w-55 aspect-square bg-input/13 hover:bg-input/30 transition-all duration-300 ease-in-out border-3 items-center justify-center rounded-lg"
+ className={cn(
+ "flex flex-col gap-3 cursor-pointer w-55 aspect-square",
+ "border-3 items-center justify-center rounded-lg",
+ "transition-all duration-300 ease-in-out",
+ "border-input",
+ "bg-input/13 hover:bg-input/30",
+ isDragging ? "animate-wiggle" : "",
+ )}
>
-
-
Select .tu file
+
+
+
+ Select .tu file
+
+ Change Enter behavior to Shift +{" "}
+ Enter
+
+ }
id="settings.reverse_enter_behavior"
/>
+
+
+
);
}
diff --git a/apps/web/src/routes/settings/security.tsx b/apps/web/src/routes/settings/security.tsx
index 15a6155..86c580e 100644
--- a/apps/web/src/routes/settings/security.tsx
+++ b/apps/web/src/routes/settings/security.tsx
@@ -46,6 +46,7 @@ function QrCodeLogin() {
const [qrCodeBase64, setQrCodeBase64] = useState(
undefined,
);
+ const [connectionString, setConnectionString] = useState(null);
useEffect(() => {
load("private_key").then((value) => {
@@ -58,15 +59,25 @@ function QrCodeLogin() {
setUserId(value);
}
});
+ load("ttp_url")
+ .then((value) => {
+ if (value) {
+ const url = new URL(value);
+ setConnectionString(`@${url.host}`);
+ } else {
+ setConnectionString("");
+ }
+ })
+ .catch(() => setConnectionString(""));
}, [load]);
useEffect(() => {
- if (userId && privateKey) {
- generateQR(`tensamin://tu::${userId}::${privateKey}`).then(
- setQrCodeBase64,
- );
+ if (userId && privateKey && connectionString !== null) {
+ generateQR(
+ `tensamin://tu::${userId}${connectionString}::${privateKey}`,
+ ).then(setQrCodeBase64);
}
- }, [userId, privateKey]);
+ }, [userId, privateKey, connectionString]);
const [qrCodeVisible, setQrCodeVisible] = useState(false);
diff --git a/bun.lock b/bun.lock
index ff51499..1f1b34a 100644
--- a/bun.lock
+++ b/bun.lock
@@ -40,6 +40,7 @@
},
"devDependencies": {
"@tauri-apps/cli": "^2",
+ "@types/node": "^25.9.1",
},
},
"apps/web": {
@@ -170,6 +171,7 @@
"name": "@tensamin/notifications",
"version": "0.0.0",
"dependencies": {
+ "@tanstack/react-router": "^1.169.1",
"@tauri-apps/api": "^2.11.0",
"@tensamin/chat": "workspace:*",
"@tensamin/crypto": "workspace:*",
@@ -1661,6 +1663,8 @@
"@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+ "@tensamin/tauri/@types/node": ["@types/node@25.9.1", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg=="],
+
"@tensamin/ui/recharts": ["recharts@3.8.0", "", { "dependencies": { "@reduxjs/toolkit": "^1.9.0 || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ=="],
"@tensamin/ui/shadcn": ["shadcn@3.8.5", "", { "dependencies": { "@antfu/ni": "^25.0.0", "@babel/core": "^7.28.0", "@babel/parser": "^7.28.0", "@babel/plugin-transform-typescript": "^7.28.0", "@babel/preset-typescript": "^7.27.1", "@dotenvx/dotenvx": "^1.48.4", "@modelcontextprotocol/sdk": "^1.26.0", "@types/validate-npm-package-name": "^4.0.2", "browserslist": "^4.26.2", "commander": "^14.0.0", "cosmiconfig": "^9.0.0", "dedent": "^1.6.0", "deepmerge": "^4.3.1", "diff": "^8.0.2", "execa": "^9.6.0", "fast-glob": "^3.3.3", "fs-extra": "^11.3.1", "fuzzysort": "^3.1.0", "https-proxy-agent": "^7.0.6", "kleur": "^4.1.5", "msw": "^2.10.4", "node-fetch": "^3.3.2", "open": "^11.0.0", "ora": "^8.2.0", "postcss": "^8.5.6", "postcss-selector-parser": "^7.1.0", "prompts": "^2.4.2", "recast": "^0.23.11", "stringify-object": "^5.0.0", "tailwind-merge": "^3.0.1", "ts-morph": "^26.0.0", "tsconfig-paths": "^4.2.0", "validate-npm-package-name": "^7.0.1", "zod": "^3.24.1", "zod-to-json-schema": "^3.24.6" }, "bin": { "shadcn": "dist/index.js" } }, "sha512-jPRx44e+eyeV7xwY3BLJXcfrks00+M0h5BGB9l6DdcBW4BpAj4x3lVmVy0TXPEs2iHEisxejr62sZAAw6B1EVA=="],
@@ -1721,6 +1725,8 @@
"@modelcontextprotocol/sdk/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
+ "@tensamin/tauri/@types/node/undici-types": ["undici-types@7.24.6", "", {}, "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg=="],
+
"@tensamin/ui/shadcn/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
"ajv-formats/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
diff --git a/package.json b/package.json
index b0dfc08..d408353 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "tensamin",
- "version": "0.0.2",
+ "version": "0.0.3",
"private": true,
"workspaces": [
"packages/*",
diff --git a/packages/call/src/components/sidebarBox.tsx b/packages/call/src/components/sidebarBox.tsx
index 6a850f0..ac715e9 100644
--- a/packages/call/src/components/sidebarBox.tsx
+++ b/packages/call/src/components/sidebarBox.tsx
@@ -1,5 +1,5 @@
import { Lock, LockOpen } from "lucide-react";
-import { openCallPage, useCall } from "../store";
+import { openCallPage, useCall, getRoom } from "../store";
import {
Button,
Card,
@@ -78,7 +78,7 @@ function ConnectionBar() {
}
export function TinyPingGraph() {
- const room = useCall((store) => store.room);
+ const room = getRoom();
const [mapData, setMapData] = useState>(() => new Map());
diff --git a/packages/call/src/components/top.tsx b/packages/call/src/components/top.tsx
index 62e8bfc..610493a 100644
--- a/packages/call/src/components/top.tsx
+++ b/packages/call/src/components/top.tsx
@@ -1,5 +1,5 @@
import { useUser, type User } from "@tensamin/user/context";
-import { useCall } from "../store";
+import { useCall, getRoom } from "../store";
import { useEffect, useState } from "react";
import { useStorage } from "@tensamin/storage/context";
import {
@@ -14,7 +14,7 @@ import {
export default function TopBar() {
const { get } = useUser();
const { load } = useStorage();
- const room = useCall((state) => state.room);
+ const room = getRoom();
const screenRef = useCall((state) => state.screenRef);
const [portalContainer, setPortalContainer] = useState();
diff --git a/packages/call/src/components/videoViewer.tsx b/packages/call/src/components/videoViewer.tsx
index 40cf6ac..1268b22 100644
--- a/packages/call/src/components/videoViewer.tsx
+++ b/packages/call/src/components/videoViewer.tsx
@@ -1,6 +1,6 @@
import { VideoTrack, useParticipantTracks } from "@livekit/components-react";
import { TrackPublication } from "livekit-client";
-import { useCall } from "../store";
+import { getRoom } from "../store";
import { cn } from "@tensamin/ui";
import { Loader2 } from "lucide-react";
@@ -17,7 +17,7 @@ export default function VideoViewer({
publication: TrackPublication;
participantId: string;
}) {
- const room = useCall((state) => state.room);
+ const room = getRoom();
const tracks = useParticipantTracks([publication.source], {
participantIdentity: participantId,
room,
diff --git a/packages/call/src/store.tsx b/packages/call/src/store.tsx
index 3d63963..5398e70 100644
--- a/packages/call/src/store.tsx
+++ b/packages/call/src/store.tsx
@@ -101,27 +101,46 @@ type CallStore = {
callIsPopout: boolean;
layoutVersion: number;
screenRef: React.RefObject | null;
- room: Room;
- keyProvider: ExternalE2EEKeyProvider;
- e2eeWorker: Worker;
runtime: Runtime | null;
speakingParticipantIds: Set;
micGated: boolean;
};
-const keyProvider = new ExternalE2EEKeyProvider();
-const e2eeWorker = new Worker(
- new URL("livekit-client/e2ee-worker", import.meta.url),
-);
-const room = new Room({
- dynacast: true,
- adaptiveStream: true,
- loggerName: "tensamin",
- encryption: {
- keyProvider,
- worker: e2eeWorker,
- },
-});
+let _keyProvider: ExternalE2EEKeyProvider | null = null;
+let _e2eeWorker: Worker | null = null;
+let _room: Room | null = null;
+
+function getKeyProvider(): ExternalE2EEKeyProvider {
+ if (!_keyProvider) {
+ _keyProvider = new ExternalE2EEKeyProvider();
+ }
+ return _keyProvider;
+}
+
+function getE2EEWorker(): Worker {
+ if (!_e2eeWorker) {
+ _e2eeWorker = new Worker(
+ new URL("livekit-client/e2ee-worker", import.meta.url),
+ );
+ }
+ return _e2eeWorker;
+}
+
+export function getRoom(): Room {
+ if (!_room) {
+ _room = new Room({
+ dynacast: true,
+ adaptiveStream: true,
+ loggerName: "tensamin",
+ encryption: {
+ keyProvider: getKeyProvider(),
+ worker: getE2EEWorker(),
+ },
+ });
+ }
+ return _room;
+}
+
const remoteAudioElements = new Map();
const SCREEN_SHARE_PREVIEW_MAX_WIDTH = 320;
@@ -170,6 +189,7 @@ export function getParticipantId(identity: string | undefined): number | null {
}
function getAllParticipants(): Participant[] {
+ const room = getRoom();
return [...room.remoteParticipants.values(), room.localParticipant];
}
@@ -187,7 +207,7 @@ function getTrackPublicationBySource(
}
function getRemoteParticipant(participantId: number) {
- return [...room.remoteParticipants.values()].find(
+ return [...getRoom().remoteParticipants.values()].find(
(participant) => getParticipantId(participant.identity) === participantId,
);
}
@@ -215,7 +235,7 @@ function syncRemoteParticipantTrackSubscriptions(participantId: number) {
}
function syncAllRemoteTrackSubscriptions() {
- for (const participant of room.remoteParticipants.values()) {
+ for (const participant of getRoom().remoteParticipants.values()) {
const participantId = getParticipantId(participant.identity);
if (participantId != null) {
@@ -256,7 +276,7 @@ function hasParticipant(participantId: number) {
function getLocalScreenShareTrack(): MediaStreamTrack | null {
const track = getTrackPublicationBySource(
- room.localParticipant,
+ getRoom().localParticipant,
Track.Source.ScreenShare,
)?.track;
@@ -275,13 +295,15 @@ async function updateLocalParticipantAttributes(
screenSharePreviewLength: attributes.screenSharePreview?.length ?? 0,
});
- await room.localParticipant.setAttributes(attributes).catch((error) => {
- log(1, "call", "red", "Failed to update local participant attributes", {
- attributes: Object.keys(attributes),
- error,
+ await getRoom()
+ .localParticipant.setAttributes(attributes)
+ .catch((error) => {
+ log(1, "call", "red", "Failed to update local participant attributes", {
+ attributes: Object.keys(attributes),
+ error,
+ });
+ throw error;
});
- throw error;
- });
log(2, "call", "purple", "Updated local participant attributes", {
attributeKeys: Object.keys(attributes),
@@ -487,7 +509,7 @@ function requireRuntime(runtime: Runtime | null): Runtime {
}
export function getRoomMetadata() {
- const roomMetadata = room.metadata;
+ const roomMetadata = getRoom().metadata;
try {
const data = JSON.parse(roomMetadata || '{"admins": []}');
return data as { admins: number[] };
@@ -498,7 +520,8 @@ export function getRoomMetadata() {
// Sync local participant flags and screen-share derived state for the active call UI.
export function syncParticipantState() {
- const { room, screenShareSession } = useCall.getState();
+ const { screenShareSession } = useCall.getState();
+ const room = getRoom();
useCall.setState({
micEnabled: room.localParticipant.isMicrophoneEnabled,
@@ -721,7 +744,7 @@ let screenShareController: ReturnType<
function getScreenShareController() {
if (!screenShareController) {
screenShareController = createScreenShareController({
- room,
+ room: getRoom(),
getState: () => ({
screenShareSession: useCall.getState().screenShareSession,
}),
@@ -733,7 +756,7 @@ function getScreenShareController() {
);
},
getLocalParticipantId: () =>
- getParticipantId(room.localParticipant.identity),
+ getParticipantId(getRoom().localParticipant.identity),
startWatching: startWatchingStream,
stopWatching: stopWatchingStream,
syncParticipantState,
@@ -758,7 +781,7 @@ export async function connect(callId: string) {
callSecret: useCall.getState().callSecret,
});
- await room
+ await getRoom()
.connect("wss://call.tensamin.net", token, {
autoSubscribe: false,
})
@@ -774,11 +797,13 @@ export async function connect(callId: string) {
syncAllRemoteTrackSubscriptions();
- await room.localParticipant.setMicrophoneEnabled(true).catch((error) => {
- log(1, "call", "red", "Failed to enable microphone", error);
- toast("error", "Failed to enable microphone.");
- throw error;
- });
+ await getRoom()
+ .localParticipant.setMicrophoneEnabled(true)
+ .catch((error) => {
+ log(1, "call", "red", "Failed to enable microphone", error);
+ toast("error", "Failed to enable microphone.");
+ throw error;
+ });
syncParticipantState();
}
@@ -819,12 +844,12 @@ export async function disconnect() {
micGated: false,
});
- room.remoteParticipants.forEach((participant) => {
+ getRoom().remoteParticipants.forEach((participant) => {
participant.setVolume(1);
});
try {
- await room.disconnect();
+ await getRoom().disconnect();
} catch (error) {
log(1, "call", "red", "Failed to disconnect from room", error);
} finally {
@@ -867,8 +892,8 @@ export async function joinCall(
callSecret,
);
- await keyProvider.setKey(decryptedSecret);
- await room.setE2EEEnabled(true);
+ await getKeyProvider().setKey(decryptedSecret);
+ await getRoom().setE2EEEnabled(true);
useCall.setState({ callSecret: decryptedSecret });
} catch (err) {
log(1, "call", "red", "Failed getting call secret", err);
@@ -878,8 +903,8 @@ export async function joinCall(
} else {
const random = crypto.randomUUID();
- await keyProvider.setKey(random);
- await room.setE2EEEnabled(true);
+ await getKeyProvider().setKey(random);
+ await getRoom().setE2EEEnabled(true);
useCall.setState({ callSecret: random });
}
@@ -898,11 +923,11 @@ export async function joinCall(
export async function toggleDeaf() {
const nextDeaf = !useCall.getState().deaf;
- room.remoteParticipants.forEach((participant) => {
+ getRoom().remoteParticipants.forEach((participant) => {
participant.setVolume(nextDeaf ? 0 : 1);
});
- if (nextDeaf && room.localParticipant.isMicrophoneEnabled) {
+ if (nextDeaf && getRoom().localParticipant.isMicrophoneEnabled) {
await toggleMute();
}
@@ -922,7 +947,7 @@ export async function toggleMute() {
await toggleDeaf();
}
- await room.localParticipant.setMicrophoneEnabled(!micEnabled);
+ await getRoom().localParticipant.setMicrophoneEnabled(!micEnabled);
syncParticipantState();
}
@@ -986,7 +1011,7 @@ export function resetCallState() {
async function ensureNoiseFilter(
noiseFilter: DeepFilterNoiseFilterProcessor,
): Promise {
- const microphoneTrack = room.localParticipant.getTrackPublication(
+ const microphoneTrack = getRoom().localParticipant.getTrackPublication(
Track.Source.Microphone,
)?.track;
@@ -1001,7 +1026,7 @@ async function ensureNoiseFilter(
log(1, "call", "red", "Failed to enable noise filter", err);
});
- const participantId = getParticipantId(room.localParticipant.identity);
+ const participantId = getParticipantId(getRoom().localParticipant.identity);
if (participantId != null) {
const processedTrack = microphoneTrack.mediaStreamTrack;
getSpeakingDetector().addTrack(
@@ -1021,8 +1046,8 @@ export const useCall = create(() => ({
livekitToken: null,
currentCallData: null,
deaf: false,
- micEnabled: room.localParticipant.isMicrophoneEnabled,
- screenShareEnabled: room.localParticipant.isScreenShareEnabled,
+ micEnabled: false,
+ screenShareEnabled: false,
screenShareSession: null,
focusedParticipantId: null,
focusedParticipantType: null,
@@ -1030,15 +1055,11 @@ export const useCall = create(() => ({
watchedStreamParticipantIds: [],
pendingWatchedParticipantIds: [],
activeScreenShareParticipantIds: [],
- isEncrypted:
- room.localParticipant.isE2EEEnabled && room.localParticipant.isEncrypted,
+ isEncrypted: false,
callIsFullscreen: false,
callIsPopout: false,
layoutVersion: 0,
screenRef: null,
- room,
- keyProvider,
- e2eeWorker,
runtime: null,
speakingParticipantIds: new Set(),
micGated: false,
@@ -1384,6 +1405,7 @@ export function useInitializeCall() {
syncParticipantState();
};
+ const room = getRoom();
room.on(RoomEvent.Connected, onConnected);
room.on(RoomEvent.Reconnected, onConnected);
room.on(RoomEvent.Disconnected, onDisconnected);
@@ -1424,7 +1446,7 @@ export function useInitializeCall() {
clearRemoteAudio();
listenersRegistered.current = false;
room.disconnect();
- e2eeWorker.terminate();
+ if (_e2eeWorker) _e2eeWorker.terminate();
};
}, [noiseFilter, load]);
diff --git a/packages/call/src/views/main/focused.tsx b/packages/call/src/views/main/focused.tsx
index 78d1740..f8239c5 100644
--- a/packages/call/src/views/main/focused.tsx
+++ b/packages/call/src/views/main/focused.tsx
@@ -1,13 +1,13 @@
import { RoomEvent } from "livekit-client";
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { useCall } from "../../store";
+import { useCall, getRoom } from "../../store";
import Base from "../../components/modals/base";
const SECONDARY_ROW_HEIGHT_PX = 180;
const STACK_GAP_PX = 12;
export default function View() {
- const room = useCall((state) => state.room);
+ const room = getRoom();
const layoutVersion = useCall((state) => state.layoutVersion);
const usersInFocusedViewHidden = useCall(
diff --git a/packages/call/src/views/main/grid.tsx b/packages/call/src/views/main/grid.tsx
index 833d7b5..956842d 100644
--- a/packages/call/src/views/main/grid.tsx
+++ b/packages/call/src/views/main/grid.tsx
@@ -1,6 +1,6 @@
import { RoomEvent } from "livekit-client";
import { useEffect, useMemo, useRef, useState } from "react";
-import { useCall } from "../../store";
+import { useCall, getRoom } from "../../store";
import Base from "../../components/modals/base";
const TILE_ASPECT_RATIO = 16 / 9;
@@ -82,7 +82,7 @@ function calculateOptimalGridLayout(
}
export default function View() {
- const room = useCall((state) => state.room);
+ const room = getRoom();
const layoutVersion = useCall((state) => state.layoutVersion);
const activeScreenShareParticipantIds = useCall(
(state) => state.activeScreenShareParticipantIds,
diff --git a/packages/call/todo.md b/packages/call/todo.md
index 61d70ed..4db4db0 100644
--- a/packages/call/todo.md
+++ b/packages/call/todo.md
@@ -11,4 +11,3 @@
- Desktop-App screenshares
- Context menus
- Popout Window
-- If micGated=true & isSpeaking=false for 5 seconds show banner with mic detection
diff --git a/packages/chat/src/components/input.tsx b/packages/chat/src/components/input.tsx
index b2aef9e..cf74848 100644
--- a/packages/chat/src/components/input.tsx
+++ b/packages/chat/src/components/input.tsx
@@ -97,6 +97,7 @@ export default function InputComponent({
>
- {message.failed && message.message_state === "awaiting" && (
-
-
- Failed to send message
-
- } />
-
- )}
-
+ (
+ <>
+ {grouped ? (
+
+ {new Date(message.send_time).toLocaleString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ })}
+
+ ) : (
+
+
+
+ {user.display.slice(0, 2).toUpperCase()}
+
+
+ )}
+ {message.failed && message.message_state === "awaiting" && (
+
+
+ Failed to send message
+
+ } />
+
+ )}
+
+ {!grouped && (
+
+
{user.display}
+
+ {new Date(message.send_time).toLocaleString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ })}
+
+
+ )}
+
+
}
/>
diff --git a/packages/chat/src/screen.tsx b/packages/chat/src/screen.tsx
index a23760d..f72580d 100644
--- a/packages/chat/src/screen.tsx
+++ b/packages/chat/src/screen.tsx
@@ -8,6 +8,7 @@ import Message from "./components/message";
import { PAGE_SIZE } from "./values";
import { useIsMobile } from "@tensamin/ui";
+import { Loader2 } from "lucide-react";
function getDistanceFromBottom(element: HTMLDivElement) {
return element.scrollHeight - (element.scrollTop + element.clientHeight);
@@ -360,9 +361,38 @@ export default function Screen() {
return;
}
- scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
- isAtBottomRef.current = true;
- setHasScrolledToBottomInitially(true);
+ let rafId: number;
+ let stableFrames = 0;
+ let lastScrollHeight = 0;
+
+ const settleToBottom = () => {
+ if (!scrollRef.current || hasScrolledToBottomInitially) {
+ return;
+ }
+
+ scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+ const currentScrollHeight = scrollRef.current.scrollHeight;
+
+ if (currentScrollHeight === lastScrollHeight) {
+ stableFrames++;
+ } else {
+ stableFrames = 0;
+ lastScrollHeight = currentScrollHeight;
+ }
+
+ if (stableFrames >= 2) {
+ isAtBottomRef.current = true;
+ setHasScrolledToBottomInitially(true);
+ } else {
+ rafId = requestAnimationFrame(settleToBottom);
+ }
+ };
+
+ settleToBottom();
+
+ return () => {
+ cancelAnimationFrame(rafId);
+ };
}, [hasScrolledToBottomInitially, virtualRowCount]);
React.useLayoutEffect(() => {
@@ -435,13 +465,26 @@ export default function Screen() {
+ {messagesQuery.isPending && (
+
+ )}
+ {messagesQuery.isFetchingNextPage && (
+
+
+
+ )}
-
- This is the start of your conversation with{" "}
+
+ Conversation start
@@ -481,6 +523,13 @@ export default function Screen() {
return null;
}
+ const lastMessage = messages[messageIndex - 1];
+ const isGrouped =
+ lastMessage &&
+ lastMessage.sent_by_self === message.sent_by_self &&
+ Math.round(lastMessage.send_time / 10000) ===
+ Math.round(message.send_time / 10000);
+
return (
-
+
);
})}
@@ -509,17 +557,25 @@ export default function Screen() {
className="pointer-events-none absolute left-0 top-0 -z-10 overflow-hidden opacity-0"
style={{ width: scrollWidth > 0 ? `${scrollWidth}px` : "100%" }}
>
- {messages.map((message) => (
-
{
- setMeasurementRef(message.send_time, element);
- }}
- style={{ padding: "4px 0" }}
- >
-
-
- ))}
+ {messages.map((message, messageIndex) => {
+ const lastMessage = messages[messageIndex - 1];
+ const isGrouped =
+ lastMessage &&
+ lastMessage.sent_by_self === message.sent_by_self &&
+ Math.round(lastMessage.send_time / 10000) ===
+ Math.round(message.send_time / 10000);
+
+ return (
+
{
+ setMeasurementRef(message.send_time, element);
+ }}
+ >
+
+
+ );
+ })}
);
diff --git a/packages/chat/todo.md b/packages/chat/todo.md
new file mode 100644
index 0000000..122f14e
--- /dev/null
+++ b/packages/chat/todo.md
@@ -0,0 +1 @@
+- Add context menu to messages
diff --git a/packages/markdown/src/markdown.tsx b/packages/markdown/src/markdown.tsx
index 59d0a6a..46ebb92 100644
--- a/packages/markdown/src/markdown.tsx
+++ b/packages/markdown/src/markdown.tsx
@@ -560,7 +560,7 @@ export function renderBlocks(blocks: MarkdownBlock[]): React.ReactElement {
}
return (
-
+
{block.text.split("\n").map((line, lineIndex) => (
{lineIndex > 0 ?
: null}
@@ -645,7 +645,6 @@ export const markdownStyles = `
.tm-md-h4 { font-size: 1.1rem; }
.tm-md-h5 { font-size: 1rem; }
.tm-md-h6 { font-size: 0.95rem; opacity: 0.9; }
-.tm-md-p { margin: 0.25rem 0; }
.tm-md-blockquote { margin: 0.45rem 0; padding-left: 0.75rem; opacity: 0.95; }
.tm-md-blockquote p { margin: 0.2rem 0; }
.tm-md-pre { margin: 0.45rem 0; padding: 0.65rem 0.75rem; border-radius: 0.5rem; background: hsl(var(--muted)); overflow-x: auto; }
diff --git a/packages/notifications/package.json b/packages/notifications/package.json
index af90c45..a6b06be 100644
--- a/packages/notifications/package.json
+++ b/packages/notifications/package.json
@@ -12,6 +12,7 @@
"build": "tsc -p tsconfig.json --noEmit"
},
"dependencies": {
+ "@tanstack/react-router": "^1.169.1",
"@tauri-apps/api": "^2.11.0",
"@tensamin/crypto": "workspace:*",
"@tensamin/shared": "workspace:*",
diff --git a/packages/notifications/src/context.tsx b/packages/notifications/src/context.tsx
index 4e433a3..8da45f4 100644
--- a/packages/notifications/src/context.tsx
+++ b/packages/notifications/src/context.tsx
@@ -10,25 +10,27 @@ import { message as messageSchema } from "@tensamin/shared/data";
import { Avatar, AvatarFallback, AvatarImage } from "@tensamin/ui";
import { isTauri } from "@tauri-apps/api/core";
import { useSession } from "@tensamin/storage/session";
+import { useNavigate } from "@tanstack/react-router";
export const context = createContext(undefined);
-function reduceDisplay(display: string) {
- const words = display.split(" ");
- if (words.length === 1) {
- return display.slice(0, 2).toUpperCase();
- } else {
- return words[0].charAt(0).toUpperCase() + words[1].charAt(0).toUpperCase();
- }
+async function requestNotificationPermission() {
+ if (!("Notification" in window)) return false;
+
+ if (Notification.permission === "granted") return true;
+
+ const permission = await Notification.requestPermission();
+ return permission === "granted";
}
export default function Provider(props: { children: React.ReactNode }) {
- const { subscribePush } = useTTP();
+ const { subscribePush, send } = useTTP();
const { load } = useStorage();
const { get } = useUser();
const { decryptText, getSharedSecret } = useCrypto();
const { addLiveMessage, userId } = useChat();
const { moveUserIdToTop } = useSession();
+ const navigate = useNavigate();
useEffect(() => {
return subscribePush(async (ttpMessage) => {
@@ -49,7 +51,32 @@ export default function Provider(props: { children: React.ReactNode }) {
message.content,
);
- console.log(userId, sender_id, userId === sender_id);
+ // Update message state
+ if (
+ (await load("settings.read_confirmations")) &&
+ userId === sender_id
+ ) {
+ void send(
+ "message_state",
+ {
+ message_state: "read",
+ },
+ {
+ id: ttpMessage.id,
+ },
+ );
+ } else {
+ void send(
+ "message_state",
+ {
+ message_state: "received",
+ },
+ {
+ id: ttpMessage.id,
+ },
+ );
+ }
+
if (userId === sender_id) {
addLiveMessage({
...message,
@@ -60,25 +87,48 @@ export default function Provider(props: { children: React.ReactNode }) {
return;
}
- // add notification symbol to conversation cards
+ // todo: add notification symbol to conversation cards (incl. message start)
moveUserIdToTop(sender_id);
if (isTauri()) {
console.log("weewoo");
} else {
- sonnerToast(user.display, {
- classNames: {
- content: "pl-4",
- },
- description: decryptedContent,
- icon: (
-
-
- {reduceDisplay(user.display)}
-
- ),
- });
+ const hasPermissions = await requestNotificationPermission();
+
+ if (hasPermissions) {
+ const notification = new Notification(user.display, {
+ body: decryptedContent,
+ icon: user.avatar || user.display.slice(0, 2).toUpperCase(),
+ badge: user.avatar || user.display.slice(0, 2).toUpperCase(),
+ tag: `message-${user.user_id}`,
+ silent: true,
+ });
+
+ notification.onclick = () => {
+ window.focus();
+ navigate({
+ to: `/chat?id=${user.user_id}`,
+ });
+
+ notification.close();
+ };
+ } else {
+ sonnerToast(user.display, {
+ classNames: {
+ content: "pl-4",
+ },
+ description: decryptedContent,
+ icon: (
+
+
+
+ {user.display.slice(0, 2).toUpperCase()}
+
+
+ ),
+ });
+ }
}
}
});
@@ -91,6 +141,8 @@ export default function Provider(props: { children: React.ReactNode }) {
addLiveMessage,
userId,
moveUserIdToTop,
+ send,
+ navigate,
]);
return (
diff --git a/packages/shared/src/data.ts b/packages/shared/src/data.ts
index 58851ce..2210192 100644
--- a/packages/shared/src/data.ts
+++ b/packages/shared/src/data.ts
@@ -167,11 +167,17 @@ export const ttp = {
response: z.object({}),
},
message_state: {
- request: z.object({
- chat_partner_id: z.number(),
- send_time: z.number(),
- message_state: message.shape.message_state,
- }),
+ request: z
+ .object({
+ chat_partner_id: z.number(),
+ send_time: z.number(),
+ message_state: message.shape.message_state,
+ })
+ .or(
+ z.object({
+ message_state: message.shape.message_state,
+ }),
+ ),
response: z.object({
chat_partner_id: z.number(),
message_state: message.shape.message_state,
diff --git a/packages/shared/src/settings.ts b/packages/shared/src/settings.ts
index 0099f64..aacc162 100644
--- a/packages/shared/src/settings.ts
+++ b/packages/shared/src/settings.ts
@@ -28,6 +28,21 @@ const settings = {
type: "boolean",
default: false,
},
+ read_confirmations: {
+ display: "Enable Read Confirmations",
+ type: "boolean",
+ default: true,
+ },
+ receive_confirmations: {
+ display: "Enable Receive Confirmations",
+ type: "boolean",
+ default: true,
+ },
+ show_start_of_last_message_in_sidebar: {
+ display: "Show Start of Last Message in Sidebar",
+ type: "boolean",
+ default: true,
+ },
},
},
application: {
@@ -35,6 +50,7 @@ const settings = {
},
} as const satisfies SettingsSchema;
+// Assemble storage defaults
export default settings;
type BooleanSettingNames = {
diff --git a/packages/ttp/src/context.tsx b/packages/ttp/src/context.tsx
index 0a2ea2c..d33313d 100644
--- a/packages/ttp/src/context.tsx
+++ b/packages/ttp/src/context.tsx
@@ -191,6 +191,7 @@ export function Provider(props: {
typeof createTransportClient
> | null>(null);
const identificationStartedRef = useRef(false);
+ const identificationCancelRef = useRef(false);
// Load ttp url
const [ttpUrl, setTtpUrl] = useState(null);
@@ -242,6 +243,23 @@ export function Provider(props: {
return client.subscribePush(handler);
}, []);
+ // Check for error_no_iota
+ useEffect(() => {
+ if (!connected) return;
+
+ return subscribePush((message) => {
+ if (message.type !== "error_no_iota") return;
+
+ identificationCancelRef.current = true;
+ setIdentified(false);
+ setIdentifying(false);
+ setError("We couldn't reach your Iota");
+ setErrorDescription(
+ "You could try to restart your Iota, check for updates or check your network connection.",
+ );
+ });
+ }, [connected, subscribePush]);
+
useEffect(() => {
if (!connected || !identified) {
return;
@@ -363,6 +381,7 @@ export function Provider(props: {
clearReconnectTimer();
scheduleReconnectReset();
identificationStartedRef.current = false;
+ identificationCancelRef.current = false;
setConnected(true);
setIdentified(false);
setError("");
@@ -483,6 +502,11 @@ export function Provider(props: {
return;
}
+ if (identificationCancelRef.current) {
+ identificationStartedRef.current = false;
+ return;
+ }
+
if (identificationStartedRef.current) {
return;
}
@@ -551,10 +575,12 @@ export function Provider(props: {
const finalResponse = await send("challenge_response", {
challenge: decryptedChallenge,
}).catch((error) => {
- setError("Identification Failed");
- setErrorDescription(
- "Unable to complete secure identification. Please verify your credentials and try again.",
- );
+ if (!identificationCancelRef.current) {
+ setError("Identification Failed");
+ setErrorDescription(
+ "Unable to complete secure identification. Please verify your credentials and try again.",
+ );
+ }
throw error;
});
@@ -562,7 +588,7 @@ export function Provider(props: {
setFreshContacts(finalResponse.data.contacts);
setFreshCommunities(finalResponse.data.communities);
setFreshCalls(finalResponse.data.calls);
- if (cancelled) {
+ if (cancelled || identificationCancelRef.current) {
return;
}
@@ -574,6 +600,10 @@ export function Provider(props: {
return;
}
+ if (identificationCancelRef.current) {
+ return;
+ }
+
if (isStopSendingError(identificationError)) {
setError("Connection closed");
setErrorDescription(
@@ -604,7 +634,7 @@ export function Provider(props: {
: "Unable to complete secure identification because the transport request failed.",
);
} finally {
- if (!cancelled) {
+ if (!cancelled && !identificationCancelRef.current) {
setIdentifying(false);
}
}