Merge pull request #32 from GooeyAI/lineClampExpand_prop

read lineClampExpand prop

Author: anish-work

app/renderedHTML.tsx

@@ -8,13 +8,15 @@ import parse, {
 } from "html-react-parser";
 import { useHydratedMemo } from "~/useHydrated";
 import { Link } from "@remix-run/react";
-import { GooeyHelpIcon, TooltipPlacement } from "./components/GooeyTooltip";
+import type { TooltipPlacement } from "./components/GooeyTooltip";
+import { GooeyHelpIcon } from "./components/GooeyTooltip";
 
 export function RenderedHTML({
   body,
   lineClamp,
   help,
   tooltipPlacement,
+  lineClampExpand,
   ...attrs
 }: {
   body: string;
@@ -42,7 +44,7 @@ export function RenderedHTML({
     );
   }
   return (
-    <LineClamp lines={lineClamp} key={body}>
+    <LineClamp lines={lineClamp} key={body} expandable={lineClampExpand}>
       <span className="gui-html-container" {...attrs}>
         {parsedElements}
       </span>
@@ -141,9 +143,11 @@ const reactParserOptions: HTMLReactParserOptions = {
 function LineClamp({
   lines,
   children,
+  expandable = true,
 }: {
   lines?: number;
   children: React.ReactNode;
+  expandable: boolean;
 }) {
   const contentRef = useRef<HTMLSpanElement>(null);
 
@@ -201,19 +205,21 @@ function LineClamp({
             lineHeight: "130%",
           }}
         >
-          <button
-            style={{
-              border: "none",
-              backgroundColor: "white",
-              color: "rgba(0, 0, 0, 0.6)",
-            }}
-            type={"button"}
-            onClick={() => {
-              setExpanded(true);
-            }}
-          >
-            …more
-          </button>
+          {expandable && (
+            <button
+              style={{
+                border: "none",
+                backgroundColor: "white",
+                color: "rgba(0, 0, 0, 0.6)",
+              }}
+              type={"button"}
+              onClick={() => {
+                setExpanded(true);
+              }}
+            >
+              …more
+            </button>
+          )}
         </span>
       )}
     </span>

app/renderedMarkdown.tsx

@@ -1,12 +1,13 @@
 import { marked } from "marked";
 import { RenderedHTML } from "~/renderedHTML";
-import { TooltipPlacement } from "./components/GooeyTooltip";
+import type { TooltipPlacement } from "./components/GooeyTooltip";
 
 export function RenderedMarkdown({
   body,
   lineClamp,
   help,
   tooltipPlacement,
+  lineClampExpand,
   ...attrs
 }: // allowUnsafeHTML,
 {
@@ -30,6 +31,7 @@ export function RenderedMarkdown({
       key={body}
       body={html}
       lineClamp={lineClamp}
+      lineClampExpand={lineClampExpand}
       className="gui-html-container gui-md-container"
       help={help}
       tooltipPlacement={tooltipPlacement}