Merge pull request '(feat): version bump needed for new ttp version' (#4) from dev into main

Reviewed-on: #4

packages/chat/src/components/message.tsx

@@ -3,97 +3,54 @@ import type { RawMessage } from "../values";
 import Text from "@tensamin/markdown/text";
 import { AlertTriangle } from "lucide-react";
 
-import {
+import { cn, Tooltip, TooltipContent, TooltipTrigger } from "@tensamin/ui";
-  Avatar,
+import { useIsMobile } from "@tensamin/ui";
-  AvatarFallback,
-  AvatarImage,
-  cn,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@tensamin/ui";
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
 } from "@tensamin/ui";
-import Wrapper from "@tensamin/user/wrapper";
-import { useChat } from "../context";
 
 function MessageComponent({
-  grouped,
   message,
 }: {
-  grouped: boolean;
   message: RawMessage & {
     failed?: boolean;
   };
 }) {
-  const { userId } = useChat();
+  const isMobile = useIsMobile();
   const actuallyFailed = message.failed && message.message_state === "awaiting";
 
   return (
     <div
-      className={`${grouped ? "" : "pt-3"} w-full flex justify-start transition-opacity duration-150 ${actuallyFailed || message.message_state === "awaiting" ? "opacity-50" : ""}`}
+      className={`w-full flex justify-start transition-opacity duration-150 ${actuallyFailed || message.message_state === "awaiting" ? "opacity-50" : ""}`}
     >
       <ContextMenu>
         <ContextMenuTrigger
           render={
             <div
               className={cn(
-                "group hover:bg-muted/50 select-text! justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
+                "selection-foreground flex gap-1 items-center justify-center max-w-[80%] rounded-lg px-2 py-px whitespace-pre-wrap break-all",
                 {
-                  "bg-(--destructive)/15 text-destructive-foreground":
+                  "bg-(--destructive)/75 text-destructive-foreground":
                     actuallyFailed,
+                  "bg-primary text-primary-foreground":
+                    !actuallyFailed && message.sent_by_self,
+                  "bg-muted": !message.sent_by_self,
+                  "select-none": isMobile,
                 },
               )}
             >
-              <Wrapper
+              {message.failed && message.message_state === "awaiting" && (
-                loading={"State not achievable"}
+                <Tooltip>
-                userId={message.sent_by_self ? "own" : userId}
+                  <TooltipContent>
-                component={(user) => (
+                    <p>Failed to send message</p>
-                  <>
+                  </TooltipContent>
-                    {grouped ? (
+                  <TooltipTrigger render={<AlertTriangle size={17} />} />
-                      <p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
+                </Tooltip>
-                        {new Date(message.send_time).toLocaleString([], {
+              )}
-                          hour: "2-digit",
+              <Text value={message.content} />
-                          minute: "2-digit",
-                        })}
-                      </p>
-                    ) : (
-                      <Avatar className="mr-1 mb-auto mt-1 w-10">
-                        <AvatarImage src={user.avatar} />
-                        <AvatarFallback>
-                          {user.display.slice(0, 2).toUpperCase()}
-                        </AvatarFallback>
-                      </Avatar>
-                    )}
-                    {message.failed && message.message_state === "awaiting" && (
-                      <Tooltip>
-                        <TooltipContent>
-                          <p>Failed to send message</p>
-                        </TooltipContent>
-                        <TooltipTrigger render={<AlertTriangle size={17} />} />
-                      </Tooltip>
-                    )}
-                    <div className="flex flex-col">
-                      {!grouped && (
-                        <div className="flex items-center gap-1">
-                          <p className="font-medium">{user.display}</p>
-                          <p className="text-xs text-muted-foreground">
-                            {new Date(message.send_time).toLocaleString([], {
-                              hour: "2-digit",
-                              minute: "2-digit",
-                            })}
-                          </p>
-                        </div>
-                      )}
-                      <Text value={message.content} />
-                    </div>
-                  </>
-                )}
-              />
             </div>
           }
         />

packages/chat/src/screen.tsx

@@ -435,7 +435,7 @@ export default function Screen() {
       <div
         ref={scrollRef}
         id="chat_container"
-        className="min-h-0 flex-1 overflow-y-auto"
+        className="min-h-0 flex-1 overflow-y-auto px-2.5"
         style={{
           overflowAnchor: "none",
           paddingBottom: "8px",
@@ -465,8 +465,8 @@ export default function Screen() {
                   }}
                 >
                   <div className="w-full flex justify-start">
-                    <div className="text-sm text-foreground/55 px-2.5">
+                    <div className="max-w-[80%] rounded-lg bg-muted px-2 py-px text-sm text-foreground/55 whitespace-pre-wrap break-all">
-                      Conversation start
+                      This is the start of your conversation with{" "}
                     </div>
                   </div>
                 </div>
@@ -481,13 +481,6 @@ 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 (
               <div
                 key={message.send_time}
@@ -499,9 +492,10 @@ export default function Screen() {
                   left: 0,
                   width: "100%",
                   transform: `translateY(${virtualRow.start + verticalOffset}px)`,
+                  padding: "4px 0",
                 }}
               >
-                <Message grouped={isGrouped} message={message} />
+                <Message message={message} />
               </div>
             );
           })}
@@ -515,25 +509,17 @@ 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, messageIndex) => {
+        {messages.map((message) => (
-          const lastMessage = messages[messageIndex - 1];
+          <div
-          const isGrouped =
+            key={`measure-${message.send_time}`}
-            lastMessage &&
+            ref={(element) => {
-            lastMessage.sent_by_self === message.sent_by_self &&
+              setMeasurementRef(message.send_time, element);
-            Math.round(lastMessage.send_time / 10000) ===
+            }}
-              Math.round(message.send_time / 10000);
+            style={{ padding: "4px 0" }}
-
+          >
-          return (
+            <Message message={message} />
-            <div
+          </div>
-              key={`measure-${message.send_time}`}
+        ))}
-              ref={(element) => {
-                setMeasurementRef(message.send_time, element);
-              }}
-            >
-              <Message grouped={isGrouped} message={message} />
-            </div>
-          );
-        })}
       </div>
     </div>
   );

packages/markdown/src/markdown.tsx

@@ -560,7 +560,7 @@ export function renderBlocks(blocks: MarkdownBlock[]): React.ReactElement {
         }
 
         return (
-          <p key={blockIndex}>
+          <p key={blockIndex} className="tm-md-p">
             {block.text.split("\n").map((line, lineIndex) => (
               <React.Fragment key={lineIndex}>
                 {lineIndex > 0 ? <br /> : null}
@@ -645,6 +645,7 @@ 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; }