first fixes

apps/remix-ide/src/app/components/popup-panel.tsx

@@ -1,9 +1,11 @@
 import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
-import { RemixPluginPanel } from '@remix-ui/panel'
+import { PluginRecord, RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import { PluginViewWrapper } from '@remix-ui/helper'
-import {EventEmitter} from 'events'
+import { EventEmitter } from 'events'
+import { AppState } from 'libs/remix-ui/app/src/lib/remix-app/interface'
+import { AppAction, appActionTypes } from '@remix-ui/app'
 
 const profile = {
   name: 'popupPanel',
@@ -13,22 +15,28 @@ const profile = {
   events: ['popupPanelShown'],
   methods: ['addView', 'removeView', 'showContent', 'showPopupPanel']
 }
+type popupPanelState = {
+  plugins: Record<string, PluginRecord>
+}
 
 export class PopupPanel extends AbstractPanel {
   element: HTMLDivElement
-  dispatch: React.Dispatch<any> = () => {}
-  showPanel: boolean
+  dispatch: React.Dispatch<any> = () => { }
+  appStateDispatch: React.Dispatch<AppAction> = () => { }
   
   constructor(config) {
     super(profile)
     this.event = new EventEmitter()
-    this.showPanel = true
   }
 
   setDispatch(dispatch: React.Dispatch<any>) {
     this.dispatch = dispatch
   }
 
+  setAppStateDispatch(appStateDispatch: React.Dispatch<AppAction>) {
+    this.appStateDispatch = appStateDispatch
+  }
+
   onActivation() {
     this.renderComponent()
   }
@@ -56,23 +64,31 @@ export class PopupPanel extends AbstractPanel {
   }
 
   async showPopupPanel(show) {
-    console.log("hide in popup-panel =", show)
-    this.showPanel = show
-    this.event.emit('popupPanelShown', show)
+    
+    this.appStateDispatch({
+      type: appActionTypes.setShowPopupPanel,
+      payload: show
+    })
     this.renderComponent()
   }
 
   renderComponent() {
     this.dispatch({
-      plugins: this.plugins,
-      showPpPanel: this.showPanel
+      plugins: this.plugins
     })
   }
 
   render() {
+    return (
+      <PluginViewWrapper plugin={this} />
+    )
+  }
+
+  updateComponent(state: popupPanelState & Partial<AppState>) {
+    console.log("state in updateComponent =", state)
     return (
       <div
-        className={'px-0 bg-light border-info ' + (!this.showPanel ? 'd-none' : 'd-flex')}
+        className={'px-0 bg-light border-info ' + (!state.showPopupPanel ? 'd-none' : 'd-flex')}
         style={{
           maxHeight: '40rem',
           maxWidth: '25rem',
@@ -86,14 +102,6 @@ export class PopupPanel extends AbstractPanel {
         }}
         data-id="popupPanelPluginsContainer"
       >
-        {this.showPanel && <PluginViewWrapper plugin={this} />}
-      </div>
-    )
-  }
-
-  updateComponent(state: any) {
-    return (
-      <div className={!state.showPpPanel ? 'd-none' : 'd-flex'}>
         <RemixPluginPanel
           header={
             <span id='menubarAIChat' className='pb-2 d-flex flex-row'>
@@ -108,6 +116,7 @@ export class PopupPanel extends AbstractPanel {
             </span>
           }
           plugins={state.plugins} />
-      </div>)
+      </div>
+    )
   }
 }

libs/remix-ui/app/src/lib/remix-app/actions/app.ts

@@ -17,6 +17,7 @@ export const enum appActionTypes {
   setCurrentBranch = 'SET_CURRENT_BRANCH',
   setNeedsGitInit = 'SET_NEEDS_GIT_INIT',
   setCanUseGit = 'SET_CAN_USE_GIT',
+  setShowPopupPanel = 'SET_SHOW_POPUP_PANEL',
 }
 
 type AppPayload = {
@@ -24,6 +25,7 @@ type AppPayload = {
   [appActionTypes.setCurrentBranch]: branch,
   [appActionTypes.setNeedsGitInit]: boolean,
   [appActionTypes.setCanUseGit]: boolean,
+  [appActionTypes.setShowPopupPanel]: boolean,
 }
 
 export type AppAction = ActionMap<AppPayload>[keyof ActionMap<

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -52,5 +52,6 @@ export interface AppState {
     currentBranch: branch
     needsGitInit: boolean
     canUseGit: boolean
+    showPopupPanel: boolean
 }
 

libs/remix-ui/app/src/lib/remix-app/reducer/app.ts

@@ -3,29 +3,36 @@ import { AppState } from "../interface";
 
 export const appReducer = (state: AppState, action: AppAction): AppState => {
   switch (action.type) {
-  case appActionTypes.setGitHubUser: {
-    return {
-      ...state,
-      gitHubUser: action.payload
+    case appActionTypes.setGitHubUser: {
+      return {
+        ...state,
+        gitHubUser: action.payload
+      }
     }
-  }
-  case appActionTypes.setCurrentBranch: {
-    return {
-      ...state,
-      currentBranch: action.payload
+    case appActionTypes.setCurrentBranch: {
+      return {
+        ...state,
+        currentBranch: action.payload
+      }
     }
-  }
-  case appActionTypes.setNeedsGitInit: {
-    return {
-      ...state,
-      needsGitInit: action.payload
+    case appActionTypes.setNeedsGitInit: {
+      return {
+        ...state,
+        needsGitInit: action.payload
+      }
     }
-  }
-  case appActionTypes.setCanUseGit: {
-    return {
-      ...state,
-      canUseGit: action.payload
+    case appActionTypes.setCanUseGit: {
+      return {
+        ...state,
+        canUseGit: action.payload
+      }
+    }
+
+    case appActionTypes.setShowPopupPanel: {
+      return {
+        ...state,
+        showPopupPanel: action.payload
+      }
     }
-  }
   }
 }

libs/remix-ui/app/src/lib/remix-app/state/app.ts

@@ -5,5 +5,6 @@ export const appInitialState: AppState = {
   gitHubUser: {} as GitHubUser,
   currentBranch: null,
   needsGitInit: true,
-  canUseGit: false
+  canUseGit: false,
+  showPopupPanel: true
 }

libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import { AppContext } from '@remix-ui/app'
+import React, { useContext } from 'react'
 import { useEffect, useState } from 'react'
 
 interface IPluginViewWrapperProps {
@@ -7,12 +8,21 @@ interface IPluginViewWrapperProps {
 
 export const PluginViewWrapper = (props: IPluginViewWrapperProps) => {
   const [state, setState] = useState<any>(null)
+  const appContext = useContext(AppContext)
 
   useEffect(() => {
     if (props.plugin.setDispatch) {
       props.plugin.setDispatch(setState)
     }
+    if(props.plugin.setAppStateDispatch) {
+      props.plugin.setAppStateDispatch(appContext.appStateDispatch)
+    }
   }, [])
 
-  return <>{state ? <>{props.plugin.updateComponent(state)}</> : <></>}</>
+  return <>{state ? <>{props.plugin.updateComponent(
+    {
+      ...state,
+      ...appContext['appState']
+    })}
+  </> : <></>}</>
 }

libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx

@@ -14,7 +14,7 @@ export interface RemixPanelProps {
 
 export function RemixPluginPanel(props: RemixPanelProps) {
   return (
-    <div className='d-flex flex-column'>
+    <>
       {props.header}
       <div className="pluginsContainer">
         <div className="plugins" id="plugins">
@@ -28,7 +28,7 @@ export function RemixPluginPanel(props: RemixPanelProps) {
           }) }
         </div>
       </div>
-    </div>
+    </>
   )
 }
 

libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx

@@ -12,14 +12,8 @@ interface AIStatusProps {
 
 export default function AIStatus(props: AIStatusProps) {
   const [copilotActive, setCopilotActive] = useState(false)
-  const [expandAIChat, setExpandAIChat] = useState(true)
 
   useEffect(() => {
-    const popupPanelListener = async (show) => {
-      setTimeout(() => setExpandAIChat(show), 0);
-    };
-  
-    props.plugin.on('popupPanel', 'popupPanelShown', popupPanelListener)
   
     const run = async () => {
       const aiActivate = await props.plugin.call('settings', 'get', 'settings/copilot/suggest/activate')
@@ -71,10 +65,10 @@ export default function AIStatus(props: AIStatusProps) {
           }}
           className='p-1 alert alert-info border border-info fa-solid fa-message-bot'
           onClick={async () => {
-            await props.plugin.call('popupPanel', 'showPopupPanel', !expandAIChat)
+            await props.plugin.call('popupPanel', 'showPopupPanel', true)
           }}
         >
-          {expandAIChat ? '1' : '0'}
+
         </button>
       </div>
     </div>