FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve code and type safety

Browse Source
This commit is contained in:
denis0001-dev
2025-09-25 22:40:45 +03:00
Unverified
parent 0fbdcd04c9
commit f0925564c6
14 changed files with 156 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/electron.d.ts
Vendored
+8 -6
View File
@@ -1,13 +1,15 @@
export type Platform = "win32" | "darwin" | "linux"
export interface NotificationShowOptions {
title: string;
body: string;
icon?: string;
tag?: string;
}
export interface ElectronNotifications {
requestPermission: () => Promise<NotificationPermission>;
show: (options: {
title: string;
body: string;
icon?: string;
tag?: string;
}) => Promise<boolean>;
show: (options: NotificationShowOptions) => Promise<boolean>;
}
export interface ElectronInterface {
frontend/electron/main.ts
+2 -1
View File
@@ -1,5 +1,6 @@
import { app, BrowserWindow, Notification, ipcMain } from 'electron';
import path from "node:path";
import { NotificationShowOptions } from '../electron';
let mainWindow: BrowserWindow | null = null;
@@ -35,7 +36,7 @@ app.whenReady().then(() => {
});
// Handle showing notifications
ipcMain.handle('show-notification', async (event, options) => {
ipcMain.handle('show-notification', async (event, options: NotificationShowOptions) => {
if (Notification.isSupported()) {
try {
const notification = new Notification({
frontend/electron/preload.ts
+3 -5
View File
@@ -1,13 +1,11 @@
import { contextBridge, ipcRenderer } from "electron";
import type { ElectronInterface, Platform } from "../electron";
const electronInterface: ElectronInterface = {
contextBridge.exposeInMainWorld("electronInterface", {
desktop: true,
platform: process.platform as Platform,
notifications: {
requestPermission: () => ipcRenderer.invoke('request-notification-permission'),
show: (options: any) => ipcRenderer.invoke('show-notification', options)
show: (options) => ipcRenderer.invoke('show-notification', options)
}
}
contextBridge.exposeInMainWorld("electronInterface", electronInterface);
} satisfies ElectronInterface);
frontend/src/api/dmApi.ts
+2 -2
View File
@@ -5,7 +5,7 @@ import { importAesGcmKey, aesGcmEncrypt, aesGcmDecrypt } from "../utils/crypto/s
import { randomBytes } from "../utils/crypto/kdf";
import { getCurrentKeys } from "../auth/crypto";
import { request } from "../core/websocket";
import type { SendDMRequest, DmEnvelope, User, DMEditWebSocketMessage, DmEncryptedJSON, BaseDmEnvelope } from "../core/types";
import type { SendDMRequest, DmEnvelope, User, DMEditRequest, DmEncryptedJSON, BaseDmEnvelope } from "../core/types";
import { b64, ub64 } from "../utils/utils";
export async function decryptDm(envelope: DmEnvelope, senderPublicKeyB64: string): Promise<string> {
@@ -159,7 +159,7 @@ export async function editDmEnvelope(id: number, recipientPublicKeyB64: string,
wrappedMk: b64(wrap.ciphertext),
salt: b64(wkSalt)
}
} as DMEditWebSocketMessage);
} as DMEditRequest);
}
export async function deleteDmEnvelope(id: number, recipientId: number, authToken: string): Promise<void> {
frontend/src/core/types.d.ts
Vendored
+72 -17
View File
@@ -235,10 +235,10 @@ export interface DmEncryptedJSON {
* @property {any} [data] - Message payload data
* @property {WebSocketError} [error] - Error information if applicable
*/
export interface WebSocketMessage {
export interface WebSocketMessage<T> {
type: string;
credentials?: WebSocketCredentials;
data?: any;
data?: T;
error?: WebSocketError;
}
@@ -264,26 +264,81 @@ export interface WebSocketCredentials {
credentials: string;
}
export interface DMEditWebSocketMessage extends WebSocketMessage {
type: "dmEdit",
data: {
id: number;
iv: string;
ciphertext: string;
iv2: string;
wrappedMk: string;
salt: string;
}
}
export interface Attachment {
path: string;
encrypted: boolean;
filename?: string;
content_type?: string;
size?: number;
name: string;
}
// -----------------------
// WebSocket message types
// -----------------------
// Utils
export interface DMEditPayload {
id: number;
iv: string;
ciphertext: string;
iv2: string;
wrappedMk: string;
salt: string;
}
// Requests
export interface DMEditRequest extends WebSocketMessage {
type: "dmEdit",
credentials: WebSocketCredentials;
data: DMEditPayload
}
export interface SendMessageRequest extends WebSocketMessage {
type: "sendMessage",
credentials: WebSocketCredentials;
data: {
content: string;
reply_to_id: number | null;
}
}
// Messages
export interface DMNewWebSocketMessage extends WebSocketMessage {
type: "dmNew",
data: DmEnvelope
}
export interface DMEditedWebSocketMessage extends WebSocketMessage {
type: "dmEdited",
data: DMEditPayload
}
export interface DMDeletedWebSocketMessage extends WebSocketMessage {
type: "dmDeleted",
data: {
id: number;
}
}
export interface MessageEditedWebSocketMessage extends WebSocketMessage {
type: "messageEdited",
data: Partial<Message> & { id: number }
}
export interface MessageDeletedWebSocketMessage extends WebSocketMessage {
type: "messageDeleted",
data: {
message_id: number;
}
}
export interface NewMessageWebSocketMessage extends WebSocketMessage {
type: "newMessage",
data: Message
}
// Shared types
export type DMWebSocketMessage = DMNewWebSocketMessage | DMEditedWebSocketMessage | DMDeletedWebSocketMessage
export type ChatWebSocketMessage = MessageEditedWebSocketMessage | MessageDeletedWebSocketMessage | NewMessageWebSocketMessage
// -----------
// Encrypted message JSON (plaintext structure before encryption)
// -----------
frontend/src/core/websocket.ts
+4 -4
View File
@@ -33,17 +33,17 @@ export let websocket: WebSocket = create();
* Global WebSocket message handler reference
* This will be set by the active panel to handle incoming messages
*/
let globalMessageHandler: ((response: WebSocketMessage) => void) | null = null;
let globalMessageHandler: ((response: WebSocketMessage<any>) => void) | null = null;
/**
* Set the global WebSocket message handler
* @param handler - Function to handle WebSocket messages
*/
export function setGlobalMessageHandler(handler: ((response: WebSocketMessage) => void) | null): void {
export function setGlobalMessageHandler(handler: ((response: WebSocketMessage<any>) => void) | null): void {
globalMessageHandler = handler;
}
export function request(payload: WebSocketMessage): Promise<WebSocketMessage> {
export function request<Request, Response = any>(payload: WebSocketMessage<Request>): Promise<WebSocketMessage<Response>> {
console.log("WebSocket request:", payload);
return new Promise((resolve, reject) => {
function requestInner() {
@@ -95,7 +95,7 @@ async function onError() {
websocket.addEventListener("message", (e) => {
try {
const response: WebSocketMessage = JSON.parse(e.data);
const response: WebSocketMessage<any> = JSON.parse(e.data);
// Route message to global handler if set
if (globalMessageHandler) {
frontend/src/ui/components/chat/ChatInputWrapper.tsx
+19 -20
View File
@@ -4,6 +4,7 @@ import { RichTextArea } from "../core/RichTextArea";
import type { Message } from "../../../core/types";
import Quote from "../core/Quote";
import AnimatedHeight from "../core/animations/AnimatedHeight";
import { useImmer } from "use-immer";
interface ChatInputWrapperProps {
onSendMessage: (message: string, files: File[]) => void;
@@ -35,7 +36,7 @@ export function ChatInputWrapper(
}: ChatInputWrapperProps
) {
const [message, setMessage] = useState("");
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const [selectedFiles, setSelectedFiles] = useImmer<File[]>([]);
const [attachmentsVisible, setAttachmentsVisible] = useState(false);
const [errorOpen, setErrorOpen] = useState(false);
@@ -44,8 +45,7 @@ export function ChatInputWrapper(
if (onProvideFileAdder) {
const addFiles = (files: File[]) => {
if (!files || files.length === 0) return;
setSelectedFiles(prev => [...prev, ...files]);
setAttachmentsVisible(true);
setSelectedFiles(draft => { draft.push(...files) });
};
onProvideFileAdder(addFiles);
}
@@ -53,18 +53,12 @@ export function ChatInputWrapper(
// When entering edit mode, preload the message content
useEffect(() => {
if (editingMessage) {
setMessage(editingMessage.content || "");
} else {
setMessage("");
}
setMessage(editingMessage ? editingMessage.content || "" : "");
}, [editingMessage]);
useEffect(() => {
if (selectedFiles.length > 0) {
setAttachmentsVisible(true);
}
}, [selectedFiles])
setAttachmentsVisible(selectedFiles.length > 0);
}, [selectedFiles]);
const handleSubmit = async (e: React.FormEvent | Event) => {
e.preventDefault();
@@ -94,10 +88,9 @@ export function ChatInputWrapper(
const input = document.createElement("input");
input.type = "file";
input.multiple = true;
input.onchange = () => {
const files = Array.from(input.files || []);
setSelectedFiles(files);
};
input.addEventListener("change", () => {
setSelectedFiles(draft => { draft.push(...Array.from(input.files || [])) });
});
input.click();
}
@@ -133,16 +126,22 @@ export function ChatInputWrapper(
<div className="attachments-preview contextual-preview">
<mdui-icon name="attach_file" />
<div className="attachments-chips">
{selectedFiles.map((f, i) => (
{selectedFiles.map((file, i) => (
<mdui-chip
key={i}
variant="input"
end-icon="close"
title={`${f.name} (${Math.round(f.size/1024/1024)} MB)`}
onClick={() => setSelectedFiles(prev => prev.filter((_, idx) => idx !== i))}
title={`${file.name} (${Math.round(file.size/1024/1024)} MB)`}
onClick={() => {
if (selectedFiles.length == 1) {
setAttachmentsVisible(false);
} else {
setSelectedFiles(draft => { draft.splice(i) })
}
}}
>
<mdui-icon slot="icon" name="attach_file"></mdui-icon>
<span className="name">{f.name}</span>
<span className="name">{file.name}</span>
</mdui-chip>
))}
</div>
frontend/src/ui/components/chat/Message.tsx
+7 -5
View File
@@ -142,16 +142,16 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
{message.files && message.files.length > 0 && (
<mdui-list className="message-attachments">
{message.files.map((file, idx) => {
const isImage = !file.encrypted && (file.content_type?.startsWith("image/") || /\.(png|jpg|jpeg|gif|webp)$/i.test(file.filename || ""));
const isImage = !file.encrypted && /\.(png|jpg|jpeg|gif|webp)$/i.test(file.name || "");
const downloadUrl = decryptedFiles.get(file.path) || file.path;
return (
<div className="attachment" key={idx}>
{isImage ? (
<img src={file.path} alt={file.filename || "image"} style={{ maxWidth: "200px", borderRadius: "8px" }} />
<img src={file.path} alt={file.name || "image"} style={{ maxWidth: "200px", borderRadius: "8px" }} />
) : (
<a
href={downloadUrl}
download={file.filename || "file"}
download={file.name || "file"}
target="_blank"
rel="noreferrer"
onClick={async (e) => {
@@ -161,13 +161,15 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
if (decryptedUrl) {
const link = document.createElement('a');
link.href = decryptedUrl;
link.download = file.filename || "file";
link.download = file.name || "file";
link.click();
}
}
}}
>
<mdui-list-item icon="download--filled">{(file.filename || file.path.split("/").pop() || "Имя файла неизвестно").replace(/\d+_\d+_/, "")}</mdui-list-item>
<mdui-list-item icon="download--filled">
{(file.name || file.path.split("/").pop() || "Имя файла неизвестно").replace(/\d+_\d+_/, "")}
</mdui-list-item>
</a>
)}
</div>
frontend/src/ui/components/core/animations/AnimatedHeight.tsx
+17 -19
View File
@@ -22,26 +22,24 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
setIsAnimating(false);
}, duration * 1000);
}, 0);
} else {
if (shouldRender) {
setIsAnimating(true);
if (measureRef.current) {
const contentHeight = measureRef.current.scrollHeight;
setHeight(`${contentHeight}px`);
// Force a reflow before animating to 0
requestAnimationFrame(() => {
setHeight("0px");
});
}
// Hide content after animation completes
setTimeout(() => {
setShouldRender(false);
setIsAnimating(false);
if (onFinish) {
onFinish();
}
}, duration * 1000);
} else if (shouldRender) {
setIsAnimating(true);
if (measureRef.current) {
const contentHeight = measureRef.current.scrollHeight;
setHeight(`${contentHeight}px`);
// Force a reflow before animating to 0
requestAnimationFrame(() => {
setHeight("0px");
});
}
// Hide content after animation completes
setTimeout(() => {
setShouldRender(false);
setIsAnimating(false);
if (onFinish) {
onFinish();
}
}, duration * 1000);
}
}, [visible, shouldRender]);
frontend/src/ui/panels/DMPanel.ts
+5 -10
View File
@@ -7,7 +7,7 @@ import {
editDmEnvelope,
deleteDmEnvelope
} from "../../api/dmApi";
import type { DmEncryptedJSON, DmEnvelope, EncryptedMessageJson, Message, WebSocketMessage } from "../../core/types";
import type { DmEncryptedJSON, DmEnvelope, DMWebSocketMessage, EncryptedMessageJson, Message } from "../../core/types";
import type { UserState } from "../state";
export interface DMPanelData {
@@ -58,19 +58,14 @@ export class DMPanel extends MessagePanel {
}
} catch {}
const dmMsg: Message & { dmEnvelope?: { salt: string; iv2: string; wrappedMk: string } } = {
const dmMsg: Message = {
id: env.id,
content: content,
username: username,
timestamp: env.timestamp,
is_read: false,
is_edited: false,
files: env.files?.map(file => { return {"filename": file.name, "encrypted": true, "path": file.path} }) || [],
dmEnvelope: {
salt: env.salt,
iv2: env.iv2,
wrappedMk: env.wrappedMk
}
files: env.files?.map(file => { return {"name": file.name, "encrypted": true, "path": file.path} }) || []
};
if (reply_to_id) {
@@ -165,9 +160,9 @@ export class DMPanel extends MessagePanel {
}
// Handle incoming WebSocket DM messages
handleWebSocketMessage = async (response: WebSocketMessage): Promise<void> => {
handleWebSocketMessage = async (response: DMWebSocketMessage): Promise<void> => {
if (response.type === "dmNew" && this.dmData) {
const envelope = response.data as DmEnvelope;
const envelope = response.data;
// If this is for the active DM conversation
if (envelope.senderId === this.dmData.userId || envelope.recipientId === this.dmData.userId) {
frontend/src/ui/panels/PublicChatPanel.ts
+8 -5
View File
@@ -2,7 +2,7 @@ import { MessagePanel } from "./MessagePanel";
import { API_BASE_URL } from "../../core/config";
import { getAuthHeaders } from "../../auth/api";
import { request } from "../../core/websocket";
import type { Message, WebSocketMessage } from "../../core/types";
import type { ChatWebSocketMessage, Message, SendMessageRequest } from "../../core/types";
import type { UserState } from "../state";
export class PublicChatPanel extends MessagePanel {
@@ -65,7 +65,7 @@ export class PublicChatPanel extends MessagePanel {
try {
if (files.length === 0) {
const response = await request({
data: {
data: {
content: content.trim(),
reply_to_id: replyToId ?? null
},
@@ -74,13 +74,16 @@ export class PublicChatPanel extends MessagePanel {
credentials: this.currentUser.authToken
},
type: "sendMessage"
});
} satisfies SendMessageRequest);
if (response.error) {
console.error("Error sending message:", response.error);
}
} else {
const form = new FormData();
form.append("payload", JSON.stringify({ type: "text", data: { content: content.trim() }, reply_to_id: replyToId ?? null }));
form.append("payload", JSON.stringify({
content: content.trim(),
reply_to_id: replyToId ?? null
} satisfies SendMessageRequest["data"]));
for (const f of files) form.append("files", f, f.name);
const res = await fetch(`${API_BASE_URL}/send_message`, {
method: "POST",
@@ -97,7 +100,7 @@ export class PublicChatPanel extends MessagePanel {
}
// Handle incoming WebSocket messages
handleWebSocketMessage = (response: WebSocketMessage): void => {
handleWebSocketMessage = (response: ChatWebSocketMessage): void => {
switch (response.type) {
case 'messageEdited':
if (response.data) {
frontend/src/utils/push-notifications.ts
+5 -4
View File
@@ -1,7 +1,7 @@
import { API_BASE_URL } from "../core/config";
import { isElectron } from "../electron/electron";
import { websocket } from "../core/websocket";
import type { WebSocketMessage } from "../core/types";
import type { NewMessageWebSocketMessage, WebSocketMessage } from "../core/types";
export interface PushSubscriptionData {
endpoint: string;
@@ -124,10 +124,11 @@ async function showMessageNotification(message: any): Promise<void> {
}
}
async function handleWebSocketMessage(response: WebSocketMessage): Promise<void> {
async function handleWebSocketMessage(response: WebSocketMessage<any>): Promise<void> {
// Handle notifications for new messages
if (response.type === "newMessage" && response.data) {
await showMessageNotification(response.data);
const newResponse = response as NewMessageWebSocketMessage;
await showMessageNotification(newResponse.data);
}
}
@@ -242,7 +243,7 @@ export async function startElectronReceiver(): Promise<void> {
// Add our own message listener to the existing WebSocket
messageListener = (event: MessageEvent) => {
try {
const response: WebSocketMessage = JSON.parse(event.data);
const response: WebSocketMessage<any> = JSON.parse(event.data);
handleWebSocketMessage(response);
} catch (error) {
console.error('Failed to parse WebSocket message:', error);