fix: fix missing plugin interact window & make tag draggable

projects/app/src/pageComponents/chat/ChatSetting/FavouriteAppSetting/TagManageModal.tsx

@@ -26,6 +26,7 @@ import Avatar from '@fastgpt/web/components/common/Avatar';
 import type { ChatFavouriteApp } from '@fastgpt/global/core/chat/favouriteApp/type';
 import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
+import DndDrag, { Draggable } from '@fastgpt/web/components/common/DndDrag';
 
 type EditableTagItemProps = {
   tag: ChatFavouriteTagType;
@@ -111,13 +112,6 @@ const EditableTagItem = React.memo(function EditableTagItem({
       alignItems="center"
       justifyContent="space-between"
       bg={isSelfEditing ? 'myGray.50' : 'transparent'}
-      transition="all 0.2s ease-in-out"
-      _hover={{
-        bg: 'myGray.50',
-        '#_ca': {
-          opacity: 1
-        }
-      }}
     >
       <Flex alignItems="center" gap="1" fontSize="sm">
         {isSelfEditing ? (
@@ -143,13 +137,7 @@ const EditableTagItem = React.memo(function EditableTagItem({
       </Flex>
 
       {!isSelfEditing && (
-        <Flex
-          id="_ca"
-          flexShrink={0}
-          alignItems="center"
-          opacity={isSelfEditing ? 1 : 0}
-          transition="all 0.2s ease-in-out"
-        >
+        <Flex id="_ca" flexShrink={0} alignItems="center" opacity={isSelfEditing ? 1 : 0}>
           <IconButton
             size="sm"
             variant="ghost"
@@ -548,28 +536,65 @@ const TagManageModal = ({ onClose, onRefresh }: Props) => {
                 flexDir="column"
                 gap="2"
               >
-                {localTags.map((tag) => (
-                  <Box
-                    key={tag.id}
-                    pb="2"
-                    _notLast={{
-                      borderBottom: 'sm',
-                      borderColor: 'myGray.200'
-                    }}
-                  >
-                    <EditableTagItem
-                      tag={tag}
-                      appCount={tagIdToCount.get(tag.id) || 0}
-                      onCommit={handleCommitTag}
-                      onCancelNew={handleCancelNewTag}
-                      onExitEdit={handleExitEdit}
-                      isEditing={isEditing.includes(tag.id)}
-                      onStartEdit={() => setIsEditing((prev) => [...prev, tag.id])}
-                      onConfirmDelete={(c) => deleteTag(c)}
-                      onSaveTagForApp={handleOpenSaveTagForAppSubPanel}
-                    />
-                  </Box>
-                ))}
+                <DndDrag<ChatFavouriteTagType>
+                  dataList={localTags}
+                  renderInnerPlaceholder={false}
+                  onDragEndCb={(list) => {
+                    setLocalTags(list);
+                    updateTags(list);
+                  }}
+                >
+                  {({ provided }) => (
+                    <VStack
+                      ref={provided.innerRef}
+                      {...provided.droppableProps}
+                      spacing={0}
+                      alignItems="stretch"
+                    >
+                      {localTags.map((tag, index) => (
+                        <Draggable key={tag.id} draggableId={tag.id} index={index}>
+                          {(provided, snapshot) => (
+                            <Box
+                              ref={provided.innerRef}
+                              {...provided.draggableProps}
+                              mb="2"
+                              borderRadius="sm"
+                              _hover={{ bg: 'myGray.50', '#_ca': { opacity: 1 } }}
+                            >
+                              <Flex alignItems="center">
+                                <Box {...provided.dragHandleProps}>
+                                  <MyIcon
+                                    name={'drag'}
+                                    cursor={'pointer'}
+                                    p={2}
+                                    borderRadius={'md'}
+                                    color={'myGray.500'}
+                                    _hover={{ bg: 'myGray.50' }}
+                                    w={'16px'}
+                                  />
+                                </Box>
+                                <Box flex={1}>
+                                  <EditableTagItem
+                                    tag={tag}
+                                    appCount={tagIdToCount.get(tag.id) || 0}
+                                    onCommit={handleCommitTag}
+                                    onCancelNew={handleCancelNewTag}
+                                    onExitEdit={handleExitEdit}
+                                    isEditing={isEditing.includes(tag.id)}
+                                    onStartEdit={() => setIsEditing((prev) => [...prev, tag.id])}
+                                    onConfirmDelete={(c) => deleteTag(c)}
+                                    onSaveTagForApp={handleOpenSaveTagForAppSubPanel}
+                                  />
+                                </Box>
+                              </Flex>
+                            </Box>
+                          )}
+                        </Draggable>
+                      ))}
+                      {provided.placeholder}
+                    </VStack>
+                  )}
+                </DndDrag>
               </Flex>
             ) : (
               <Box>

projects/app/src/pageComponents/chat/ChatWindow/AppChatWindow.tsx

@@ -25,6 +25,10 @@ import { ChatSidebarPaneEnum } from '../constants';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import ChatHistorySidebar from '@/pageComponents/chat/slider/ChatSliderSidebar';
 import ChatSliderMobileDrawer from '@/pageComponents/chat/slider/ChatSliderMobileDrawer';
+import dynamic from 'next/dynamic';
+import { getNanoid } from '@fastgpt/global/common/string/tools';
+
+const CustomPluginRunBox = dynamic(() => import('@/pageComponents/chat/CustomPluginRunBox'));
 
 type Props = {
   myApps: AppListItemType[];
@@ -33,14 +37,15 @@ type Props = {
 const AppChatWindow = ({ myApps }: Props) => {
   const { userInfo } = useUserStore();
   const { chatId, appId, outLinkAuthData } = useChatStore();
-  const { feConfigs } = useSystemStore();
 
   const { t } = useTranslation();
   const { isPc } = useSystem();
 
   const forbidLoadChat = useContextSelector(ChatContext, (v) => v.forbidLoadChat);
   const onUpdateHistoryTitle = useContextSelector(ChatContext, (v) => v.onUpdateHistoryTitle);
 
+  const isPlugin = useContextSelector(ChatItemContext, (v) => v.isPlugin);
+  const onChangeChatId = useContextSelector(ChatContext, (v) => v.onChangeChatId);
   const chatBoxData = useContextSelector(ChatItemContext, (v) => v.chatBoxData);
   const datasetCiteData = useContextSelector(ChatItemContext, (v) => v.datasetCiteData);
   const setChatBoxData = useContextSelector(ChatItemContext, (v) => v.setChatBoxData);
@@ -153,16 +158,26 @@ const AppChatWindow = ({ myApps }: Props) => {
         />
 
         <Box flex={'1 0 0'} bg={'white'}>
-          <ChatBox
-            showEmptyIntro
-            appId={appId}
-            chatId={chatId}
-            isReady={!loading}
-            feedbackType={'user'}
-            chatType={ChatTypeEnum.chat}
-            outLinkAuthData={outLinkAuthData}
-            onStartChat={onStartChat}
-          />
+          {isPlugin ? (
+            <CustomPluginRunBox
+              appId={appId}
+              chatId={chatId}
+              outLinkAuthData={outLinkAuthData}
+              onNewChat={() => onChangeChatId(getNanoid())}
+              onStartChat={onStartChat}
+            />
+          ) : (
+            <ChatBox
+              showEmptyIntro
+              appId={appId}
+              chatId={chatId}
+              isReady={!loading}
+              feedbackType={'user'}
+              chatType={ChatTypeEnum.chat}
+              outLinkAuthData={outLinkAuthData}
+              onStartChat={onStartChat}
+            />
+          )}
         </Box>
       </Flex>
     </Flex>