typing indicators

src/app/server/[ip]/page.tsx

@@ -2,14 +2,13 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useParams, useSearchParams } from "next/navigation";
-import MessageBox from "@/components/channel/MessageBox";
 import AppLayout from "@/components/app/AppLayout";
-import { Server as ServerType } from "@/types/types";
 import auth from "@/lib/auth";
 import useMessages from "@/hooks/use-messages";
 import useApp from "@/hooks/use-app";
 import { useEffectOnceWhenReady } from "@/hooks/use-once";
 import ChannelView from "@/components/channel/ChannelView";
+import { IndicatorContext } from "@/types/protocol";
 
 export default function Server() {
   const { ip } = useParams<{ ip: string }>();
@@ -17,6 +16,7 @@ export default function Server() {
   const serverRef = useRef<WebSocket | null>(null);
   const app = useApp();
   const messageStore = useMessages();
+  const [indicators, setIndicators] = useState<IndicatorContext[]>([]);
 
   useEffectOnceWhenReady(
     () => {
@@ -26,12 +26,44 @@ export default function Server() {
         wsRef: serverRef,
         setServer: app.setServer,
         messageStore: messageStore,
+        onIndicator: (i) => {
+          setIndicators((prev) => {
+            const combined = [...prev, { ...i }];
+            const uniqueByUser = combined.reduce<Record<string, typeof i>>(
+              (acc, curr) => {
+                const userId = curr.indicator.params.user_id;
+                if (!acc[userId] || curr.expires > acc[userId].expires) {
+                  acc[userId] = curr;
+                }
+                return acc;
+              },
+              {}
+            );
+
+            return Object.values(uniqueByUser);
+          });
+        },
       });
     },
     [ip, messageStore.messages],
     [undefined, (v) => v]
   );
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndicators((prev) =>
+        prev
+          .map((item) => ({
+            ...item,
+            expires: item.expires - 1,
+          }))
+          .filter((item) => item.expires > 0)
+      );
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   useEffect(() => {
     const channelId = searchParams.get("ch");
     if (channelId) {
@@ -54,6 +86,7 @@ export default function Server() {
         )}
         ip={ip}
         serverRef={serverRef}
+        indicators={indicators}
       />
     </AppLayout>
   );

src/components/channel/ChannelView.tsx

@@ -1,19 +1,22 @@
-import { Channel, Message, Server } from "@/types/types";
+import { Message } from "@/types/types";
 import MessageBox from "./MessageBox";
 import App from "@/types/app";
-import React, { Ref, useEffect, useRef } from "react";
+import React from "react";
 import PluginChannel from "./PluginChannel";
+import { IndicatorContext } from "@/types/protocol";
 
 export default function ChannelView({
   app,
   messages,
   ip,
   serverRef,
+  indicators,
 }: {
   app: App;
   messages: Message[];
   ip: string;
   serverRef: React.RefObject<WebSocket | null>;
+  indicators: IndicatorContext[];
 }) {
   if (!app.currentChannel)
     return (
@@ -27,6 +30,7 @@ export default function ChannelView({
           channelName={app.currentChannel.name}
           messages={messages}
           sendRequest={(req) => serverRef.current?.send(JSON.stringify(req))}
+          indicators={indicators}
         />
       );
 

src/components/channel/MessageBox.tsx

@@ -25,7 +25,7 @@ import {
   ContextMenuItem,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
-import { ClientMessage } from "@/types/protocol";
+import { ClientMessage, IndicatorContext } from "@/types/protocol";
 import { AnimatePresence, motion } from "framer-motion";
 
 function MessageContainer({
@@ -213,7 +213,7 @@ function MessageInput({
   onEnter: () => void;
   onTyping?: () => void;
 }) {
-  const TYPING_INTERVAL = 2000;
+  const TYPING_INTERVAL = 1000;
   const inputRef = useRef<any>(null);
   const lastTypingSent = useRef(0);
   const stopTypingTimeout = useRef<NodeJS.Timeout | null>(null);
@@ -303,12 +303,14 @@ export default function MessageBox({
   channelName,
   channelIcon,
   messages,
+  indicators,
 }: {
   app: App;
   sendRequest: (req: ClientMessage) => void;
   channelName?: string;
   channelIcon?: string;
   messages: Message[];
+  indicators: IndicatorContext[];
 }) {
   const [text, setText] = useState("");
 
@@ -406,13 +408,38 @@ export default function MessageBox({
           <div ref={ref} />
         </AnimatePresence>
       </div>
-      <footer className="flex gap-3 pr-5 w-full h-max">
+      <footer>
+        <div className="relative h-1">
+          <AnimatePresence>
+            {indicators.length > 0 && (
+              <motion.div
+                key={indicators
+                  .map((i) => i.indicator.params.user_id)
+                  .join("-")}
+                className="absolute inset-0 text-muted-foreground text-xs top-[-26px]"
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -10 }}
+                transition={{ duration: 0.3 }}
+              >
+                {indicators
+                  .map(
+                    (indicator) =>
+                      app.profiles[indicator.indicator.params.user_id]
+                        ?.display_name ?? null
+                  )
+                  .join(", ")}
+                {indicators.length > 0 && " is typing"}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+        <div className="flex gap-3 pr-5 w-full h-max">
           <MessageInput
             text={text}
             setText={setText}
             onEnter={sendMessage}
             onTyping={() => {
-            console.log("Typing..");
               if (!app.currentChannel) return;
               sendRequest({
                 type: "typing",
@@ -445,6 +472,7 @@ export default function MessageBox({
           <Button variant="secondary" onClick={sendMessage}>
             <SendIcon />
           </Button>
+        </div>
       </footer>
     </div>
   );