added chat option in bottom panel

raheeliftikhar5 · raheeliftikhar5 · commit e14a7e74f131 · 2025-07-07T15:13:54.000+05:00
diff --git a/client/packages/lowcoder-design/src/icons/index.tsx b/client/packages/lowcoder-design/src/icons/index.tsx
@@ -1,5 +1,8 @@
 import React, { lazy, Suspense } from "react";
 
+export { ReactComponent as AIGenerate } from "./remix/ai-generate.svg";
+export { ReactComponent as AIGenerate2 } from "./remix/ai-generate-2.svg";
+export { ReactComponent as AIGenerateText } from "./remix/ai-generate-text.svg";
 export { ReactComponent as AppSnapshotIcon } from "./v1/app-snapshot.svg";
 export { ReactComponent as ArchiveIcon } from "./remix/archive-fill.svg";
 export { ReactComponent as HookCompDropIcon } from "./v1/hook-comp-drop.svg";
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx
@@ -9,6 +9,14 @@ import { AppState } from "../../../redux/reducers";
 import { getUser } from "../../../redux/selectors/usersSelectors";
 import { connect } from "react-redux";
 import { Layers } from "constants/Layers";
+import Flex from "antd/es/flex";
+import type { MenuProps } from 'antd/es/menu';
+import { BuildOutlined, DatabaseOutlined } from "@ant-design/icons";
+import Menu from "antd/es/menu/menu";
+import { ChatView } from "@lowcoder-ee/comps/comps/chatComp/chatView";
+import { AIGenerate } from "lowcoder-design";
+
+type MenuItem = Required<MenuProps>['items'][number];
 
 const StyledResizableBox = styled(ResizableBox)`
   position: relative;
@@ -26,6 +34,32 @@ const StyledResizableBox = styled(ResizableBox)`
   }
 `;
 
+const StyledMenu = styled(Menu)`
+  width: 40px;
+  padding: 6px 0;
+
+  .ant-menu-item {
+    height: 30px;
+    line-height: 30px;
+  }
+`;
+
+const ChatHeader = styled.div`
+  flex: 0 0 35px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e1e3eb;
+  background: #fafafa;
+`;
+const ChatTitle = styled.h3`
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #222222;
+`;
+
 const preventDefault = (e: any) => {
   e.preventDefault();
 };
@@ -49,6 +83,12 @@ function Bottom(props: any) {
   };
 
   const [bottomHeight, setBottomHeight] = useState(panelStyle.bottom.h);
+  const [currentOption, setCurrentOption] = useState("data");
+
+  const items: MenuItem[] = [
+    { key: 'data', icon: <DatabaseOutlined />, label: 'Data Queries' },
+    { key: 'ai', icon: <AIGenerate />, label: 'Lowcoder AI' },
+  ];
 
   return (
     <>
@@ -62,7 +102,34 @@ function Bottom(props: any) {
         onResizeStart={addListener}
         onResizeStop={resizeStop}
       >
-        <BottomContent />
+        <Flex style={{height: '100%'}}>
+          <StyledMenu
+            defaultSelectedKeys={[currentOption]}
+            mode="inline"
+            inlineCollapsed={true}
+            items={items}
+            onSelect={({key}) => {
+              setCurrentOption(key);
+            }}
+          />
+          { currentOption === "data" && <BottomContent /> }
+          { currentOption === "ai" && (
+            <Flex style={{height: '100%', flex: 1}} vertical>
+              <ChatHeader>
+                <ChatTitle>Lowcoder AI Assistant</ChatTitle>
+              </ChatHeader>
+              <ChatView
+                tableName="LC_AI"
+                modelType="n8n"
+                // streaming={true}
+                // systemPrompt="You are a helpful assistant."
+                // agent={true}
+                // maxInteractions={10}
+                modelHost="http://localhost:5678/webhook-test/9a363e76-d3a5-46d1-98c3-4359f7106d33"
+              />
+            </Flex>
+          )}
+        </Flex>
       </StyledResizableBox>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
@@ -34,7 +34,7 @@ const Contain = styled.div`
   width: 100%;
   background-color: #ffffff;
 `;
-const Title = styled.div`
+export const Title = styled.div`
   flex-shrink: 0;
   height: 40px;
   width: 100%;
@@ -82,16 +82,17 @@ const AddIcon = styled(BluePlusIcon)`
   width: 12px;
   margin-right: 2px;
 `;
-const AddBtn = styled(TacoButton)`
+export const AddBtn = styled(TacoButton)`
   &&& {
     height: 24px;
     width: 64px;
-    padding: 4px 12px;
+    padding: 4px 10px;
     background-color: #fafbff;
     color: #4965f2;
     border-color: #c9d1fc;
     display: flex;
     align-items: center;
+    gap: 0;
     box-shadow: none;
   
     &:hover {
