tuigram 1.0.0-alpha.1

package/README.md

@@ -0,0 +1,5 @@
+# 📟 tuigram — Telegram Terminal UI Client
+
+A lightweight, terminal-based Telegram client written in **Node.js** with a primary focus on **Vim motions**.
+
+<img width="3840" height="2160" alt="obraz" src="https://github.com/user-attachments/assets/335b2934-ea6e-4c8b-9ae4-c8f3f89c78d0" />

package/application/(common)/LinkedList.js

@@ -0,0 +1,90 @@
+const createNode = (value, prev = null, next = null) => ({ value, prev, next });
+
+const buildOperations = (list) => ({
+  push: (value) => {
+    const node = createNode(value, list.tail);
+    if (list.tail !== null) list.tail.next = node;
+    else list.head = node;
+    list.tail = node;
+    list.size++;
+  },
+
+  unshift: (value) => {
+    const node = createNode(value, null, list.head);
+    if (list.head) list.head.prev = node;
+    else list.tail = node;
+    list.head = node;
+    list.size++;
+  },
+
+  pop: () => {
+    if (list.tail === null) return null;
+    const value = list.tail.value;
+    list.tail = list.tail.prev;
+    if (list.tail !== null) list.tail.next = null;
+    else list.head = null;
+    list.size--;
+    return value;
+  },
+
+  shift: () => {
+    if (list.head === null) return null;
+    const value = list.head.value;
+    list.head = list.head.next;
+    if (list.head !== null) list.head.prev = null;
+    else list.tail = null;
+    list.size--;
+    return value;
+  },
+
+  find: (predicate) => {
+    for (let node = list.head; node !== null; node = node.next) if (predicate(node.value)) return node.value;
+    return null;
+  },
+
+  removeNode: (node) => {
+    if (node.prev !== null) node.prev.next = node.next;
+    else list.head = node.next;
+    if (node.next !== null) node.next.prev = node.prev;
+    else list.tail = node.prev;
+    list.size--;
+    return node.value;
+  },
+});
+
+const buildIterator = (list) => () => {
+  let current = list.head;
+  return {
+    next: () => {
+      if (current === null) return { value: null, done: true };
+      const value = current.value;
+      current = current.next;
+      return { value, done: false };
+    },
+  };
+};
+
+const from = (values = []) => {
+  const list = { head: null, tail: null, size: 0 };
+
+  const operations = buildOperations(list);
+  const iterator = buildIterator(list);
+
+  for (const value of values) operations.push(value);
+
+  return {
+    get head() {
+      return list.head;
+    },
+    get tail() {
+      return list.tail;
+    },
+    get size() {
+      return list.size;
+    },
+    ...operations,
+    [Symbol.iterator]: iterator,
+  };
+};
+
+({ from });

package/application/(common)/Obj/pick.js

@@ -0,0 +1 @@
+(obj, keys) => Object.fromEntries(keys.map((key) => [key, obj[key]]));

package/application/(common)/Random/uuid.js

@@ -0,0 +1 @@
+() => node.crypto.randomUUID();

package/application/(common)/Rate/debounce.js

@@ -0,0 +1,7 @@
+(fn, delay = 0) => {
+  let timer = null;
+  return (...args) => {
+    node.timers.clearTimeout(timer);
+    timer = node.timers.setTimeout(() => fn(...args), delay);
+  };
+};

package/application/(common)/risk.js

@@ -0,0 +1,8 @@
+(fn, ...args) => {
+  try {
+    const result = fn(...args);
+    return [null, result];
+  } catch (err) {
+    return [err, null];
+  }
+};

package/application/(common)/riskAsync.js

@@ -0,0 +1,8 @@
+async (fn, ...args) => {
+  try {
+    const result = await fn(...args);
+    return [null, result];
+  } catch (err) {
+    return [err, null];
+  }
+};

package/application/1-messenger/(common)/Message.js

@@ -0,0 +1,8 @@
+({
+  from: ({ id, text, sender, chat }) => ({
+    id,
+    text,
+    sender: Obj.pick(sender, ['isSelf']),
+    chatId: chat.id,
+  }),
+});

package/application/1-messenger/(methods)/getDialogs.js

@@ -0,0 +1,24 @@
+(() =>
+  async function* (chunkSize) {
+    console.log('get dialogs from cache');
+
+    const cachedDialogs = self.cache.dialogs.read();
+    if (cachedDialogs.length > 0) yield cachedDialogs;
+
+    console.log('get dialogs from tg');
+    const iterator = messenger.tg.iterDialogs({ chunkSize });
+    let page = [];
+    for await (const dialog of iterator) {
+      page.push({
+        chatId: dialog.lastMessage.chat.id,
+        name: dialog.peer.displayName,
+        lastMessage: dialog.lastMessage.text,
+      });
+      if (page.length === chunkSize) {
+        self.cache.dialogs.append(page);
+        yield page;
+        page = [];
+      }
+    }
+    if (page.length > 0) yield page;
+  })();

package/application/1-messenger/(methods)/getHistory.js

@@ -0,0 +1,25 @@
+(() =>
+  async function* (chatId, pageSize) {
+    console.log('get history from cache');
+    const cachedMessages = self.cache.chats.read(chatId);
+    if (cachedMessages.length > 0) yield cachedMessages;
+
+    let offset = undefined;
+
+    while (true) {
+      const params = { offset, limit: pageSize };
+
+      // the first message in the array is the most recent message in the chat
+      console.log('get history from tg');
+      const history = await messenger.tg.getHistory(chatId, params);
+
+      const messages = history.map(Message.from);
+
+      self.cache.chats.append(chatId, messages);
+
+      yield messages;
+
+      if (messages.next === undefined) return;
+      offset = messages.next;
+    }
+  })();

package/application/1-messenger/(methods)/on.js

@@ -0,0 +1,3 @@
+(event, handler) => {
+  if (event === 'message') messenger.dispatcher.onNewMessage((message) => handler(Message.from(message)));
+};

package/application/1-messenger/(methods)/sendMessage.js

@@ -0,0 +1 @@
+(chatId, text) => messenger.tg.sendText(chatId, text);

package/application/1-messenger/1-tg.js

@@ -0,0 +1,4 @@
+const { TelegramClient } = npm['@mtcute/bun'];
+const { API_ID, API_HASH } = process.env;
+const tg = new TelegramClient({ apiId: API_ID, apiHash: API_HASH });
+tg.start().then(() => tg);

package/application/1-messenger/2-dispatcher.js

@@ -0,0 +1,2 @@
+const { Dispatcher } = npm['@mtcute/dispatcher'];
+Dispatcher.for(messenger.tg);

package/application/1-messenger/cache/chats.js

@@ -0,0 +1,15 @@
+({
+  _getPath: (chatId) => node.path.join(__rootDir, `/cache/chats/${chatId}.json`),
+  read: (chatId) => {
+    const path = self._getPath(chatId);
+    const [err, json] = risk(node.fs.readFileSync, path, { encoding: 'utf-8' });
+    if (err !== null) return [];
+    return JSON.parse(json);
+  },
+  append: (chatId, messages) => {
+    const existing = self.read(chatId);
+    const updated = [...existing, ...messages];
+    const path = self._getPath(chatId);
+    node.fs.writeFileSync(path, JSON.stringify(updated));
+  },
+});

package/application/1-messenger/cache/dialogs.js

@@ -0,0 +1,13 @@
+({
+  PATH: node.path.join(__rootDir, '/cache/dialogs.json'),
+  read: () => {
+    const [err, json] = risk(node.fs.readFileSync, self.PATH, { encoding: 'utf-8' });
+    if (err !== null) return [];
+    return JSON.parse(json);
+  },
+  append: (dialogs) => {
+    const existing = self.read();
+    const updated = [...existing, ...dialogs];
+    node.fs.writeFileSync(self.PATH, JSON.stringify(updated));
+  },
+});

package/application/2-nvim/(methods)/emit.js

@@ -0,0 +1,2 @@
+self.ee ??= new node.events.EventEmitter();
+(event, ...args) => self.ee.emit(event, ...args);

package/application/2-nvim/(methods)/input.js

@@ -0,0 +1 @@
+(char) => nvim.client.input(char);

package/application/2-nvim/(methods)/on.js

@@ -0,0 +1,2 @@
+self.ee ??= new node.events.EventEmitter();
+(event, handler) => self.ee.on(event, handler);

package/application/2-nvim/1-client.js

@@ -0,0 +1,6 @@
+const { findNvim, attach } = npm.neovim;
+const found = findNvim({ orderBy: 'desc', minVersion: '0.9.0' });
+const path = found.matches[0].path;
+const nvimProc = node.child_process.spawn(path, ['--embed']);
+const client = attach({ proc: nvimProc, logger: console });
+client.uiAttach(5, 5, {}).then(() => client);

package/application/2-nvim/2-events.js

@@ -0,0 +1,22 @@
+const handlers = {
+  cursor_goto: async () => {
+    const [y, x] = await nvim.client.window.cursor;
+    nvim.emit('cursor', { x, y });
+  },
+  put: Rate.debounce(async () => {
+    const buffer = await nvim.client.buffer;
+    const lines = await buffer.lines;
+    const [y, x] = await nvim.client.window.cursor;
+    nvim.emit('lines', lines, { x, y });
+  }),
+  mode_change: ([[mode]]) => nvim.emit('mode', mode),
+};
+
+nvim.client.on('notification', (method, args) => {
+  if (method !== 'redraw') return;
+
+  for (const [event, ...updates] of args) {
+    const handler = handlers[event];
+    if (handler !== undefined) handler(updates);
+  }
+});

package/application/3-ui/1-screen/1-renderer.js

@@ -0,0 +1 @@
+tui.createCliRenderer({ exitOnCtrlC: true });

package/application/3-ui/1-screen/2-wrapper.js

@@ -0,0 +1,11 @@
+const wrapper = new tui.BoxRenderable(self.renderer, {
+  id: 'wrapper',
+  width: '100%',
+  height: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+self.renderer.root.add(wrapper);
+
+wrapper;

package/application/3-ui/2-components/Box.js

@@ -0,0 +1 @@
+(...options) => new tui.BoxRenderable(ui.screen.renderer, ...options);

package/application/3-ui/2-components/ScrollBox.js

@@ -0,0 +1 @@
+(...options) => new tui.ScrollBoxRenderable(ui.screen.renderer, ...options);

package/application/3-ui/2-components/Select.js

@@ -0,0 +1 @@
+(...options) => new tui.SelectRenderable(ui.screen.renderer, ...options);

package/application/3-ui/2-components/Text.js

@@ -0,0 +1 @@
+(...options) => new tui.TextRenderable(ui.screen.renderer, ...options);

package/application/3-ui/2-components/Textarea.js

@@ -0,0 +1 @@
+(...options) => new tui.TextareaRenderable(ui.screen.renderer, ...options);

package/application/3-ui/3-sections/1-dialogs/(private)/loadMore.js

@@ -0,0 +1,6 @@
+((iterator) => async () => {
+  //await node.timers.promises.setTimeout(5000);
+  const { value, done } = await iterator.next();
+  const moreDialogs = value.map(self.toDialog);
+  return done ? [] : moreDialogs;
+})(messenger.getDialogs(9));

package/application/3-ui/3-sections/1-dialogs/(private)/toDialog.js

@@ -0,0 +1 @@
+({ chatId, name, lastMessage }) => ({ chatId, name, description: lastMessage });

package/application/3-ui/3-sections/1-dialogs/(public)/blur.js

@@ -0,0 +1,3 @@
+() => {
+  self.list.blur();
+};

package/application/3-ui/3-sections/1-dialogs/(public)/focus.js

@@ -0,0 +1,3 @@
+() => {
+  self.list.focus();
+};

package/application/3-ui/3-sections/1-dialogs/(public)/on.js

@@ -0,0 +1,3 @@
+(event, handler) => {
+  if (event === 'open') self.list.on(tui.SelectRenderableEvents.ITEM_SELECTED, (_, dialog) => handler(dialog));
+};

package/application/3-ui/3-sections/1-dialogs/(public)/setLabel.js

@@ -0,0 +1 @@
+(label) => (self.component.title = label);

package/application/3-ui/3-sections/1-dialogs/1-list.js

@@ -0,0 +1,10 @@
+self.loadMore().then((dialogs) =>
+  ui.components.Select({
+    id: 'dialogsList',
+    height: '100%',
+    options: dialogs,
+    selectedBackgroundColor: '#2d4f2d',
+    focusedBackgroundColor: '#1a1a1a',
+    showSelectionIndicator: false,
+  }),
+);

package/application/3-ui/3-sections/1-dialogs/2-component.js

@@ -0,0 +1,9 @@
+const wrapper = ui.components.Box({
+  id: 'dialogsWrapper',
+  width: 30,
+  borderStyle: 'rounded',
+});
+
+wrapper.add(self.list);
+
+wrapper;

package/application/3-ui/3-sections/2-chat/(private)/clear.js

@@ -0,0 +1,4 @@
+() => {
+  self.messages = LinkedList.from([]);
+  for (const child of self.component.getChildren()) child.destroy();
+};

package/application/3-ui/3-sections/2-chat/(private)/selectMessage.js

@@ -0,0 +1,6 @@
+(message) => {
+  self.selected = message;
+  const bubble = message.value.bubble;
+  self.component.scrollChildIntoView(bubble.id);
+  bubble.focus();
+};

package/application/3-ui/3-sections/2-chat/(public)/addMessage.js

@@ -0,0 +1,6 @@
+(message) => {
+  self.messages.push(message);
+  const bubble = self.Bubble(message);
+  self.component.add(bubble);
+  message.bubble = bubble;
+};

package/application/3-ui/3-sections/2-chat/(public)/addPendingMessage.js

@@ -0,0 +1,5 @@
+(text) => {
+  const tempId = Random.uuid();
+  self.addMessage({ id: tempId, text, sender: { isSelf: true } });
+  return tempId;
+};

package/application/3-ui/3-sections/2-chat/(public)/confirmMessage.js

@@ -0,0 +1,4 @@
+(tempId, confirmedMessage) => {
+  const pendingMessage = self.messages.find(({ id }) => id === tempId);
+  pendingMessage.id = confirmedMessage.id;
+};

package/application/3-ui/3-sections/2-chat/(public)/down.js

@@ -0,0 +1,4 @@
+() => {
+  if (self.selected === self.messages.tail) return;
+  self.selectMessage(self.selected.next);
+};

package/application/3-ui/3-sections/2-chat/(public)/focus.js

@@ -0,0 +1 @@
+() => self.selectMessage(self.selected);

package/application/3-ui/3-sections/2-chat/(public)/key.js

@@ -0,0 +1,5 @@
+(ch) =>
+  ({
+    k: self.up,
+    j: self.down,
+  })[ch]?.();

package/application/3-ui/3-sections/2-chat/(public)/open.js

@@ -0,0 +1,8 @@
+async (chatId) => {
+  self.clear();
+  self.iterator = messenger.getHistory(chatId, 20);
+  const { value } = await self.iterator.next();
+  const messages = value.toReversed();
+  for (const message of messages) self.addMessage(message);
+  self.selectMessage(self.messages.tail);
+};

package/application/3-ui/3-sections/2-chat/(public)/setLabel.js

@@ -0,0 +1 @@
+(label) => (self.component.title = label);

package/application/3-ui/3-sections/2-chat/(public)/up.js

@@ -0,0 +1,4 @@
+() => {
+  if (self.selected === self.messages.head) return;
+  self.selectMessage(self.selected.prev);
+};

package/application/3-ui/3-sections/2-chat/Bubble.js

@@ -0,0 +1,15 @@
+({ text, sender }) => {
+  const box = ui.components.Box({
+    flexDirection: 'column',
+    borderStyle: 'rounded',
+    borderColor: sender.isSelf ? '#283457' : '#1f2335',
+    paddingX: 1,
+    alignSelf: sender.isSelf ? 'flex-end' : 'flex-start',
+    focusedBorderColor: 'green',
+    focusable: true,
+  });
+
+  box.add(ui.components.Text({ content: text, fg: '#c0caf5' }));
+
+  return box;
+};

package/application/3-ui/3-sections/2-chat/component.js

@@ -0,0 +1,17 @@
+ui.components.ScrollBox({
+  flexGrow: 1,
+  borderStyle: 'rounded',
+  scrollY: true,
+  scrollX: false,
+  stickyScroll: true,
+  stickyStart: 'bottom',
+  focusable: true,
+  focusedBorderColor: '#42AAFF',
+  contentOptions: {
+    flexDirection: 'column',
+    gap: 1,
+    paddingX: 1,
+    paddingY: 1,
+  },
+  scrollbarOptions: { visible: false },
+});

package/application/3-ui/3-sections/3-messagePrompt/(private)/emit.js

@@ -0,0 +1,2 @@
+self.ee ??= new node.events.EventEmitter();
+(event, ...args) => self.ee.emit(event, ...args);

package/application/3-ui/3-sections/3-messagePrompt/(private)/send.js

@@ -0,0 +1 @@
+() => self.emit('send', self.input.plainText);

package/application/3-ui/3-sections/3-messagePrompt/(public)/blur.js

@@ -0,0 +1,3 @@
+() => {
+  self.focused = false;
+};

package/application/3-ui/3-sections/3-messagePrompt/(public)/focus.js

@@ -0,0 +1,4 @@
+() => {
+  self.input.focus();
+  self.focused = true;
+};

package/application/3-ui/3-sections/3-messagePrompt/(public)/key.js

@@ -0,0 +1,4 @@
+(ch) => {
+  if (ch === 'x') self.send();
+  nvim.input(ch);
+};

package/application/3-ui/3-sections/3-messagePrompt/(public)/on.js

@@ -0,0 +1,2 @@
+self.ee ??= new node.events.EventEmitter();
+(event, handler) => self.ee.on(event, handler);

package/application/3-ui/3-sections/3-messagePrompt/(public)/setLabel.js

@@ -0,0 +1 @@
+(label) => (self.component.title = label);

package/application/3-ui/3-sections/3-messagePrompt/1-input.js

@@ -0,0 +1,12 @@
+ui.components.Textarea({
+  width: '100%',
+  height: 1,
+  placeholder: 'Type a message...',
+  backgroundColor: '#1a1b26',
+  focusedBackgroundColor: '#24283b',
+  textColor: '#c0caf5',
+  focusedTextColor: '#c0caf5',
+  cursorColor: '#7aa2f7',
+  wrapMode: 'word',
+  cursorStyle: { blinking: true },
+});

package/application/3-ui/3-sections/3-messagePrompt/2-component.js

@@ -0,0 +1,8 @@
+const wrapper = ui.components.Box({
+  borderStyle: 'rounded',
+  flexShrink: 0,
+});
+
+wrapper.add(self.input);
+
+wrapper;

package/application/3-ui/3-sections/3-messagePrompt/3-events.js

@@ -0,0 +1,11 @@
+nvim.on('lines', (lines, { x, y }) => {
+  if (!self.focused) return;
+  self.input.replaceText(lines.join('\n'));
+  self.input.setCursor(y - 1, x);
+  self.input.height = lines.length > 0 ? lines.length : 1;
+});
+
+nvim.on('cursor', ({ x, y }) => {
+  if (!self.focused) return;
+  self.input.setCursor(y - 1, x);
+});

package/application/3-ui/4-layout/(private)/select.js

@@ -0,0 +1,5 @@
+(section) => {
+  ui.sections[self.selected].blur?.();
+  self.selected = section;
+  ui.sections[section].focus();
+};

package/application/3-ui/4-layout/(subscriptions)/mode.js

@@ -0,0 +1 @@
+nvim.on('mode', (mode) => (self.selectable = mode === 'normal'));

package/application/3-ui/4-layout/(subscriptions)/newMessage.js

@@ -0,0 +1,3 @@
+messenger.on('message', (message) => {
+  if (self.openedChatId === message.chatId) ui.sections.chat.addMessage(message);
+});

package/application/3-ui/4-layout/(subscriptions)/openChat.js

@@ -0,0 +1,7 @@
+ui.sections.dialogs.on('open', (dialog) => {
+  const chatId = dialog.chatId;
+  if (self.openedChatId === chatId) return;
+  self.openedChatId = chatId;
+  ui.sections.chat.open(chatId);
+  self.select('chat');
+});

package/application/3-ui/4-layout/(subscriptions)/sendMessage.js

@@ -0,0 +1,5 @@
+ui.sections.messagePrompt.on('send', async (text) => {
+  const tempId = ui.sections.chat.addPendingMessage(text);
+  const message = await messenger.sendMessage(self.openedChatId, text);
+  ui.sections.chat.confirmMessage(tempId, message);
+});

package/application/3-ui/4-layout/1-layout.js

@@ -0,0 +1,6 @@
+({
+  selectable: true,
+  selected: 'dialogs',
+  reserved: ['q'],
+  openedChatId: undefined,
+});

package/application/3-ui/4-layout/2-mapping.js

@@ -0,0 +1,18 @@
+const mapping = {
+  1: 'dialogs',
+  2: 'chat',
+  3: 'messagePrompt',
+};
+
+for (const [index, section] of Object.entries(mapping)) {
+  ui.sections[section].setLabel(` ${index} `);
+}
+
+ui.screen.renderer.keyInput.on('keypress', (key) => {
+  if (!self.selectable) return;
+
+  const section = mapping[key.name];
+  if (section !== undefined) self.select(section);
+});
+
+self.reserved.push(...Object.keys(mapping));

package/application/3-ui/4-layout/3-key.js

@@ -0,0 +1,7 @@
+ui.screen.renderer.keyInput.on('keypress', (e) => {
+  const raw = e.raw;
+  if (self.selected !== 'dialogs') e.stopPropagation();
+
+  const skip = self.selectable && self.reserved.includes(raw);
+  if (!skip) ui.sections[self.selected].key?.(raw);
+});

package/application/3-ui/4-layout/5-render.js

@@ -0,0 +1,21 @@
+const layout = new tui.BoxRenderable(ui.screen.renderer, {
+  id: 'wrapper',
+  width: '100%',
+  height: '100%',
+  flexDirection: 'row',
+});
+
+ui.screen.wrapper.add(layout);
+
+layout.add(ui.sections.dialogs.component);
+
+const rightSide = new tui.BoxRenderable(ui.screen.renderer, {
+  id: 'rightSide',
+  flexDirection: 'column',
+});
+
+layout.add(rightSide);
+
+rightSide.add(ui.sections.chat.component);
+rightSide.add(ui.sections.messagePrompt.component);
+ui.sections.dialogs.component.focus();