fix #7930 -- chat: sometimes when you try to edit the message you just wrote, it is blank

Author: williamstein

src/packages/frontend/chat/input.tsx

@@ -67,7 +67,8 @@ export default function ChatInput({
     [],
   );
 
-  const [input, setInput] = useState<string>(() => {
+  const [input, setInput] = useState<string>("");
+  useEffect(() => {
     const dbInput = syncdb
       ?.get_one({
         event: "draft",
@@ -79,9 +80,9 @@ export default function ChatInput({
     // the db version is used when you refresh your browser while editing, or scroll up and down
     // thus unmounting and remounting the currently editing message (due to virtualization).
     // See https://github.com/sagemathinc/cocalc/issues/6415
-    const input = dbInput ?? propsInput;
-    return input;
-  });
+    setInput(dbInput ?? propsInput);
+  }, [date, sender_id, propsInput]);
+
   const currentInputRef = useRef<string>(input);
   const saveOnUnmountRef = useRef<boolean>(true);
 

src/packages/frontend/chat/message.tsx

@@ -54,11 +54,10 @@ const DELETE_BUTTON = false;
 const BLANK_COLUMN = (xs) => <Col key={"blankcolumn"} xs={xs}></Col>;
 
 const MARKDOWN_STYLE = undefined;
-// const MARKDOWN_STYLE = { maxHeight: "300px", overflowY: "auto" };
 
 const BORDER = "2px solid #ccc";
 
-const SHOW_EDIT_BUTTON_MS = 45000;
+const SHOW_EDIT_BUTTON_MS = 15000;
 
 const TRHEAD_STYLE_SINGLE: CSS = {
   marginLeft: "15px",
@@ -448,7 +447,13 @@ export default function Message(props: Readonly<Props>) {
           <Space direction="horizontal" size="small" wrap>
             {showEditButton ? (
               <Tooltip
-                title="Edit this message. You can edit any past message by anybody at any time by double clicking on it.  Previous versions are in the history."
+                title={
+                  <>
+                    Edit this message. You can edit <b>any</b> past message at
+                    any time by double clicking on it. Fix other people's typos.
+                    All versions are stored.
+                  </>
+                }
                 placement="left"
               >
                 <Button
@@ -613,7 +618,7 @@ export default function Message(props: Readonly<Props>) {
                     <Icon
                       name="thumbs-up"
                       style={{
-                        color: showOtherFeedback ? "darkred" : undefined,
+                        color: showOtherFeedback ? "darkblue" : undefined,
                       }}
                     />
                   </Button>
@@ -627,7 +632,6 @@ export default function Message(props: Readonly<Props>) {
                   size="small"
                   type={"text"}
                   style={{
-                    marginRight: "5px",
                     float: "right",
                     marginTop: "-4px",
                     color: is_viewers_message ? "white" : "#888",