Merge pull request #743 from near/feat/pinned-apps

Pinned Apps (1 of 2)
near · Apr 5, 2024 · beef959 · beef959
2 parents fc38c56 + 27ba16b
commit beef959
Show file tree

Hide file tree

Showing 14 changed files with 215 additions and 60 deletions.
diff --git a/src/AI/Agent/AgentCard.jsx b/src/AI/Agent/AgentCard.jsx
@@ -92,7 +92,7 @@ const AgentCard = ({ item, editFunction }) => {
             <h3>{displayName}</h3>
             <p>by {accountId}</p>
             <Widget
-              src="near/widget/DIG.Tooltip"
+              src="${REPL_ACCOUNT}/widget/DIG.Tooltip"
               props={{
                 content: <span style={{ whiteSpace: "pre-line" }}>{prompt}</span>,
                 trigger: <p>{prompt ? prompt.substring(0, 20) : ""}...</p>,
@@ -103,12 +103,12 @@ const AgentCard = ({ item, editFunction }) => {
       </Link>
       <Actions>
         <Widget
-          src="near/widget/DIG.Tooltip"
+          src="${REPL_ACCOUNT}/widget/DIG.Tooltip"
           props={{
             content: editLabel,
             trigger: (
               <Widget
-                src="near/widget/DIG.Button"
+                src="${REPL_ACCOUNT}/widget/DIG.Button"
                 props={{
                   onClick: () => editFunction(item),
                   iconLeft: editIcon,
@@ -134,13 +134,13 @@ const AgentCard = ({ item, editFunction }) => {
           }}
         />
         <Widget
-          src="near/widget/DIG.Tooltip"
+          src="${REPL_ACCOUNT}/widget/DIG.Tooltip"
           props={{
             content: "View Details",
             trigger: (
               <Link to={detailsLink} style={{ all: "unset" }}>
                 <Widget
-                  src="near/widget/DIG.Button"
+                  src="${REPL_ACCOUNT}/widget/DIG.Button"
                   props={{
                     iconLeft: "ph-bold ph-eye",
                     variant: "secondary",
@@ -153,13 +153,13 @@ const AgentCard = ({ item, editFunction }) => {
           }}
         />
         <Widget
-          src="near/widget/DIG.Tooltip"
+          src="${REPL_ACCOUNT}/widget/DIG.Tooltip"
           props={{
             content: "Use agent",
             trigger: (
               <Link to={chatLink} style={{ all: "unset" }}>
                 <Widget
-                  src="near/widget/DIG.Button"
+                  src="${REPL_ACCOUNT}/widget/DIG.Button"
                   props={{
                     iconLeft: "ph-bold ph-chat-teardrop-text",
                     variant: "secondary",

diff --git a/src/AI/Agent/AgentChat.jsx b/src/AI/Agent/AgentChat.jsx
@@ -246,7 +246,7 @@ const renderSettings = () => {
         <AllSettings>
           <InputWrapper>
             <Widget
-              src="near/widget/DIG.InputSelect"
+              src="${REPL_ACCOUNT}/widget/DIG.InputSelect"
               props={{
                 groups: [
                   {
@@ -307,7 +307,7 @@ const renderSettings = () => {
           {model === "local" && (
             <InputWrapper>
               <Widget
-                src="near/widget/DIG.Input"
+                src="${REPL_ACCOUNT}/widget/DIG.Input"
                 props={{
                   label: "Local Model URL",
                   assistiveText: "Any url that accepts messages in OpenAI format",
@@ -322,7 +322,7 @@ const renderSettings = () => {
             <div className="row">
               <div className="col-3">
                 <Widget
-                  src="near/widget/DIG.InputSelect"
+                  src="${REPL_ACCOUNT}/widget/DIG.InputSelect"
                   props={{
                     groups: [
                       {
@@ -345,7 +345,7 @@ const renderSettings = () => {
               </div>
               <div className="col">
                 <Widget
-                  src="near/widget/DIG.Input"
+                  src="${REPL_ACCOUNT}/widget/DIG.Input"
                   props={{
                     label: "Credentials",
                     assistiveText: "Your OpenAI API Key or other credentials, will be stored in your browser.",
@@ -360,7 +360,7 @@ const renderSettings = () => {
           </InputWrapper>
           <InputWrapper>
             <Widget
-              src="near/widget/DIG.Checkbox"
+              src="${REPL_ACCOUNT}/widget/DIG.Checkbox"
               props={{
                 id: "json-output",
                 label: "JSON Output mode",
@@ -431,7 +431,7 @@ return (
             autoFocus
           />
           <Widget
-            src="near/widget/DIG.Button"
+            src="${REPL_ACCOUNT}/widget/DIG.Button"
             props={{
               onClick: submitQuestion,
               iconLeft: editIcon,

diff --git a/src/AI/Agent/AgentDetails.jsx b/src/AI/Agent/AgentDetails.jsx
@@ -106,7 +106,7 @@ return (
     />
     <ContentWrapper>
       <Widget
-        src="near/widget/DIG.Tabs"
+        src="${REPL_ACCOUNT}/widget/DIG.Tabs"
         props={{
           variant: "line",
           size: "large",

diff --git a/src/AI/Agent/AgentSummary.jsx b/src/AI/Agent/AgentSummary.jsx
@@ -185,12 +185,12 @@ return (
       <Actions>
         {false && accountId === context.accountId && (
           <Widget
-            src="near/widget/DIG.Tooltip"
+            src="${REPL_ACCOUNT}/widget/DIG.Tooltip"
             props={{
               content: "Edit",
               trigger: (
                 <Widget
-                  src="near/widget/DIG.Button"
+                  src="${REPL_ACCOUNT}/widget/DIG.Button"
                   props={{
                     label: "Delete",
                     disabled: !context.accountId || context.accountId !== accountId,
@@ -241,13 +241,13 @@ return (
           }}
         />{" "}
         <Widget
-          src="near/widget/DIG.Tooltip"
+          src="${REPL_ACCOUNT}/widget/DIG.Tooltip"
           props={{
             content: "Use agent",
             trigger: (
               <Link to={chatLink} style={{ all: "unset" }}>
                 <Widget
-                  src="near/widget/DIG.Button"
+                  src="${REPL_ACCOUNT}/widget/DIG.Button"
                   props={{
                     label: "Use Agent",
                     iconLeft: "ph-bold ph-chat-teardrop-text",

diff --git a/src/ActivityFeeds/PostsFeedControls.jsx b/src/ActivityFeeds/PostsFeedControls.jsx
@@ -599,7 +599,7 @@ return (
               {newUnseenPosts.length > 0 && (
                 <NewActivity>
                   <Widget
-                    src="near/widget/DIG.Button"
+                    src="${REPL_ACCOUNT}/widget/DIG.Button"
                     props={{
                       label: `Refresh (${newUnseenPosts.length} New)`,
                       onClick: displayNewPosts,

diff --git a/src/ComponentDetailsPage.jsx b/src/ComponentDetailsPage.jsx
@@ -1,4 +1,4 @@
-let { src, tab, highlightComment } = props;
+let { emitGatewayEvent, src, tab, highlightComment } = props;
 
 const [selectedTab, setSelectedTab] = useState(props.tab ?? "source");
 
@@ -126,6 +126,7 @@ return (
     <Widget
       src="${REPL_ACCOUNT}/widget/ComponentSummary"
       props={{
+        emitGatewayEvent,
         primaryAction: "open",
         size: "large",
         showTags: true,

diff --git a/src/ComponentSummary.jsx b/src/ComponentSummary.jsx
@@ -1,10 +1,11 @@
-if (!props.src) return "";
+let { emitGatewayEvent, src } = props;
+
+if (!src) return "";
 
 State.init({
   copiedShareUrl: false,
 });
 
-const src = props.src;
 const primaryAction = props.primaryAction || "viewDetails";
 const [accountId, widget, widgetName] = src.split("/");
 const data = Social.get(`${accountId}/widget/${widgetName}/metadata/**`);
@@ -200,6 +201,32 @@ function normalizeMarkdown(text) {
   return text.trim();
 }
 
+function emitPinnedAppsGatewayEvent(isPinned) {
+  const app = {
+    authorAccountId: accountId,
+    displayName: metadata.name || widgetName,
+    componentName: widgetName,
+    imageUrl: metadata.image?.ipfs_cid ? `https://ipfs.near.social/ipfs/${metadata.image.ipfs_cid}` : null,
+  };
+
+  emitGatewayEvent &&
+    emitGatewayEvent({
+      type: "PINNED_APPS",
+      app,
+      action: isPinned ? "PINNED" : "UNPINNED",
+    });
+}
+
+function pinnedAppsFeatureEnabled() {
+  if (emitGatewayEvent) {
+    return emitGatewayEvent({
+      type: "PINNED_APPS",
+      action: "FEATURE_ENABLED",
+    });
+  }
+  return false;
+}
+
 return (
   <Wrapper>
     <Header size={size}>
@@ -260,6 +287,7 @@ return (
 
       <Widget
         src="${REPL_ACCOUNT}/widget/SocialIndexActionButton"
+        key="social-index-action-star"
         props={{
           actionName: "star",
           actionUndoName: "unstar",
@@ -269,34 +297,105 @@ return (
           },
           notifyAccountId: accountId,
           button: (starCount, starIsActive, starOnClick) => (
-            <Button type="button" onClick={starOnClick} aria-label="Star this component">
-              {starIsActive ? (
-                <i className="bi bi-star-fill" style={{ color: "var(--amber10)" }} />
-              ) : (
-                <i className="bi bi-star" />
-              )}{" "}
-              {starCount}
-            </Button>
+            <Widget
+              src="${REPL_ACCOUNT}/widget/DIG.Tooltip"
+              props={{
+                content: context.accountId
+                  ? starIsActive
+                    ? "Unstar this app"
+                    : "Star this app"
+                  : "Sign in to star this app",
+                trigger: (
+                  <Button type="button" onClick={starOnClick} aria-label="Star this component">
+                    {starIsActive ? (
+                      <i className="bi bi-star-fill" style={{ color: "var(--amber10)" }} />
+                    ) : (
+                      <i className="bi bi-star" />
+                    )}{" "}
+                    {starCount}
+                  </Button>
+                ),
+              }}
+            />
           ),
         }}
       />
 
-      <OverlayTrigger placement="top" overlay={<Tooltip>Copy URL to clipboard</Tooltip>}>
-        <Button
-          type="button"
-          onMouseLeave={() => {
-            State.update({ copiedShareUrl: false });
-          }}
-          onClick={() => {
-            clipboard.writeText(shareUrl).then(() => {
-              State.update({ copiedShareUrl: true });
-            });
+      {pinnedAppsFeatureEnabled() && (
+        <Widget
+          src="${REPL_ACCOUNT}/widget/SocialIndexActionButton"
+          key="social-index-action-pin"
+          props={{
+            actionName: "pin",
+            actionUndoName: "unpin",
+            item: {
+              type: "social",
+              path: src,
+            },
+            notifyAccountId: accountId,
+            onCommitStart: (pinIsActive) => {
+              emitPinnedAppsGatewayEvent(pinIsActive);
+            },
+            onCommitFailure: (pinIsActive) => {
+              emitPinnedAppsGatewayEvent(pinIsActive);
+            },
+            button: (pinCount, pinIsActive, pinOnClick) => (
+              <Widget
+                src="${REPL_ACCOUNT}/widget/DIG.Tooltip"
+                props={{
+                  content: context.accountId
+                    ? pinIsActive
+                      ? "Unpin this app"
+                      : "Pin this app to access it quickly"
+                    : "Sign in to pin this app",
+                  trigger: (
+                    <Button type="button" onClick={pinOnClick} aria-label="Pin this component">
+                      {pinIsActive ? (
+                        <>
+                          <i className="ph-fill ph-push-pin" style={{ color: "var(--amber10)", fontSize: "1rem" }} />{" "}
+                          Pinned
+                        </>
+                      ) : (
+                        <>
+                          <i class="ph ph-push-pin" style={{ fontSize: "1rem" }} />
+                          Pin
+                        </>
+                      )}
+                    </Button>
+                  ),
+                }}
+              />
+            ),
           }}
-        >
-          {state.copiedShareUrl ? <i className="bi bi-16 bi-check"></i> : <i className="bi bi-16 bi-link-45deg"></i>}
-          Share
-        </Button>
-      </OverlayTrigger>
+        />
+      )}
+
+      <Widget
+        src="${REPL_ACCOUNT}/widget/DIG.Tooltip"
+        props={{
+          content: "Copy URL to clipboard",
+          trigger: (
+            <Button
+              type="button"
+              onMouseLeave={() => {
+                State.update({ copiedShareUrl: false });
+              }}
+              onClick={() => {
+                clipboard.writeText(shareUrl).then(() => {
+                  State.update({ copiedShareUrl: true });
+                });
+              }}
+            >
+              {state.copiedShareUrl ? (
+                <i className="bi bi-16 bi-check"></i>
+              ) : (
+                <i className="bi bi-16 bi-link-45deg"></i>
+              )}
+              Share
+            </Button>
+          ),
+        }}
+      />
     </Actions>
   </Wrapper>
 );
diff --git a/src/GatewayWrapper.jsx b/src/GatewayWrapper.jsx
@@ -1,4 +1,4 @@
-let { targetComponent, targetProps, logOut, termsDomainName, privacyDomainName, recordToC } = props;
+let { emitGatewayEvent, targetComponent, targetProps, logOut, termsDomainName, privacyDomainName, recordToC } = props;
 
 const tosName = props.tosName ?? "${REPL_ACCOUNT}/widget/TosContent";
 
@@ -8,6 +8,7 @@ return (
       key="wrapper-tos-check"
       src="${REPL_ACCOUNT}/widget/TosCheck"
       props={{
+        emitGatewayEvent,
         logOut,
         termsDomainName,
         privacyDomainName,
@@ -16,6 +17,6 @@ return (
       }}
     />
 
-    <Widget key="wrapper-target" src={targetComponent} props={targetProps} />
+    <Widget key="wrapper-target" src={targetComponent} props={{ ...targetProps, emitGatewayEvent }} />
   </>
 );
diff --git a/src/Moderation/ModerationButton.jsx b/src/Moderation/ModerationButton.jsx
@@ -51,7 +51,7 @@ const closeModal = (e) => {
 const renderButton = () => (
   <>
     <Widget
-      src="near/widget/DIG.Button"
+      src="${REPL_ACCOUNT}/widget/DIG.Button"
       props={{
         label: title,
         disabled: !context.accountId || state.loading || disabled,
@@ -78,7 +78,7 @@ const renderButton = () => (
 if (props.tooltip) {
   return (
     <Widget
-      src="near/widget/DIG.Tooltip"
+      src="${REPL_ACCOUNT}/widget/DIG.Tooltip"
       props={{
         content: <span style={{ whiteSpace: "pre-line" }}>{props.tooltip}</span>,
         trigger: renderButton(),