Add md docs links in the components

client/packages/lowcoder-design/src/components/ExternalLink.tsx

@@ -1,9 +1,11 @@
 import { ActiveTextColor, GreyTextColor } from "constants/style";
 import { DocIcon } from "icons";
 import styled from "styled-components";
+import { ToolTipLabel } from "./toolTip";
 
 export const ExternalLink = styled.a`
   font-size: 13px;
+  font-weight: 400;
   line-height: 13px;
   color: ${GreyTextColor};
   display: inline-flex;
@@ -20,14 +22,27 @@ const StyledDocIcon = styled(DocIcon)`
   margin-right: 4px;
 `;
 
-export function DocLink(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+type DocLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  tooltipZIndex?: number;
+};
+
+export function DocLink(props: DocLinkProps) {
   if (!props.href) {
     return <></>;
   }
-  return (
-    <ExternalLink target="_blank" {...props}>
+  const { title, children, rel, tooltipZIndex, ...rest } = props;
+  const link = (
+    <ExternalLink target="_blank" rel={rel ?? "noopener noreferrer"} {...rest}>
       <StyledDocIcon />
-      {props.children}
+      {children}
     </ExternalLink>
   );
+  if (!title) {
+    return link;
+  }
+  return (
+    <ToolTipLabel title={title} zIndex={tooltipZIndex}>
+      <span style={{ display: "inline-flex" }}>{link}</span>
+    </ToolTipLabel>
+  );
 }

client/packages/lowcoder/src/components/ai-helper/AIHelperModal.tsx

@@ -7,7 +7,9 @@ import { SparklesIcon, XIcon } from "lucide-react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
 
+import { DocLink } from "lowcoder-design";
 import { EditorContext } from "comps/editorState";
+import { trans } from "i18n";
 import { getDataSourceStructures } from "redux/selectors/datasourceSelectors";
 import { getSelectedAIQueryName } from "util/localStorageUtil";
 
@@ -175,6 +177,13 @@ export function AIHelperModal() {
             <TitleLine>
               <SparklesIcon size={16} color="#4965f2" />
               <span>AI Helper</span>
+              <DocLink
+                href={trans("docUrls.githubAiHelp")}
+                title={trans("comp.menuViewDocsTooltip")}
+                tooltipZIndex={2147483001}
+              >
+                {trans("comp.menuViewDocs")}
+              </DocLink>
             </TitleLine>
             {target?.label && (
               <TargetLabel title={target.label}>{target.label}</TargetLabel>

client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatBoxComp.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Section, sectionNames, controlItem } from "lowcoder-design";
+import { PropertyViewDocLink } from "comps/utils/propertyViewDocLink";
 import { default as Segmented } from "antd/es/segmented";
 import { UICompBuilder, withDefault, stateComp } from "../../generators";
 import { changeValueAction, multiChangeAction } from "lowcoder-core";
@@ -193,6 +194,7 @@ const ChatBoxPropertyView = React.memo((props: { children: any }) => {
 
   return (
     <>
+      <PropertyViewDocLink href={trans("docUrls.githubChatBox")} />
       <Section name={sectionNames.basic}>
         {children.chatTitle.propertyView({
           label: trans("chatBox.chatTitleLabel"),

client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx

@@ -1,10 +1,9 @@
 // client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx
 
 import React, { useMemo } from "react";
-import { Section, sectionNames, DocLink } from "lowcoder-design";
+import { Section, sectionNames, controlItem } from "lowcoder-design";
 import { trans } from "i18n";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
-import { controlItem } from "lowcoder-design";
+import { PropertyViewDocLink } from "comps/utils/propertyViewDocLink";
 
 // ============================================================================
 //   PROPERTY VIEW 
@@ -15,16 +14,7 @@ export const ChatPropertyView = React.memo((props: any) => {
 
   return useMemo(() => (
     <>
-      {/* Help & Documentation - Outside of Section */}
-      <div style={{ padding: "8px 16px", marginBottom: "16px", borderBottom: "1px solid #f0f0f0" }}>
-        <DocLink 
-          style={{ marginTop: 8 }} 
-          href="https://docs.lowcoder.cloud/lowcoder-documentation" 
-          title="Open Lowcoder Documentation"
-        >
-          📖 View Documentation
-        </DocLink>
-      </div>
+      <PropertyViewDocLink href={trans("docUrls.githubAiChat")} />
 
       {/* Message Handler Configuration */}
       <Section name={trans("chat.messageHandler")}>

client/packages/lowcoder/src/comps/hooks/chatControllerComp.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { Section, sectionNames } from "lowcoder-design";
+import { PropertyViewDocLink } from "comps/utils/propertyViewDocLink";
 import {
   simpleMultiComp,
   stateComp,
@@ -486,6 +487,7 @@ const ChatControllerWithProps = withPropertyViewFn(
   ChatControllerBase,
   (comp) => (
     <>
+      <PropertyViewDocLink href={trans("docUrls.githubChatController")} />
       <Section name={sectionNames.basic}>
         {comp.children.applicationId.propertyView({
           label: trans("chatController.applicationIdLabel"),

client/packages/lowcoder/src/comps/utils/compDocUtil.ts

@@ -8,6 +8,12 @@ export function getComponentDocUrl(compType: UICompType) {
   switch (compType) {
     case "module":
       return trans("docUrls.module");
+    case "chat":
+      return trans("docUrls.githubAiChat");
+    case "chatBox":
+      return trans("docUrls.githubChatBox");
+    case "chatController":
+      return trans("docUrls.githubChatController");
     default:
       return trans("docUrls.components", { compType });
   }

client/packages/lowcoder/src/comps/utils/propertyViewDocLink.tsx

@@ -0,0 +1,12 @@
+import { DocLink } from "lowcoder-design";
+import { trans } from "i18n";
+
+export function PropertyViewDocLink(props: { href: string }) {
+  return (
+    <div style={{ padding: "8px 16px 12px" }}>
+      <DocLink href={props.href} title={trans("comp.menuViewDocsTooltip")}>
+        {trans("comp.menuViewDocs")}
+      </DocLink>
+    </div>
+  );
+}

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1823,6 +1823,7 @@ export const en = {
 
   "comp": {
     "menuViewDocs": "View Documentation",
+    "menuViewDocsTooltip": "Open documentation on GitHub",
     "menuViewPlayground": "View interactive Playground",
     "menuUpgradeToLatest": "Upgrade to Latest Version",
     "nameNotEmpty": "Cannot Be Empty",
@@ -5302,6 +5303,11 @@ export const en = {
     eventHandlerSlowdown: "https://docs.lowcoder.cloud/build-applications/app-interaction/event-handlers",
     thirdLib: "https://docs.lowcoder.cloud/lowcoder-extension/use-third-party-libraries-in-apps",
     thirdLibUrlText: "Use third-party libraries",
+    githubAiChat: "https://github.com/lowcoder-org/lowcoder/blob/main/docs/build-applications/app-editor/visual-components/ai-chat.md",
+    githubChatBox: "https://github.com/lowcoder-org/lowcoder/blob/main/docs/build-applications/app-editor/visual-components/chat-box.md",
+    githubAutomator: "https://github.com/lowcoder-org/lowcoder/blob/main/docs/build-applications/app-editor/automator.md",
+    githubAiHelp: "https://github.com/lowcoder-org/lowcoder/blob/main/docs/build-applications/app-editor/ai-help.md",
+    githubChatController: "https://github.com/lowcoder-org/lowcoder/blob/main/docs/build-applications/app-editor/visual-components/chat-controller.md",
   },
   datasourceTutorial: {
     mysql: "",