Update app.py

app.py

@@ -106,14 +106,20 @@ with gr.Blocks(css_paths="app.css") as demo:
                                 antd.CardMeta()
                               demoCard.click(demo_card_click, outputs=[input])
 
+                    # Modal과 Drawer 컴포넌트들
+                    with antd.Modal(open=False, title="set system Prompt", width="800px") as system_prompt_modal:
+                        systemPromptInput = antd.InputTextarea(
+                            SystemPrompt, auto_size=True)
+
+                    with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer:
+                        code_output = legacy.Markdown()
+
+                    with antd.Drawer(open=False, title="history", placement="left", width="900px") as history_drawer:
+                        history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
+
                 with antd.Col(span=24, md=16):
                     with ms.Div(elem_classes="right_panel"):
                         # 우측 상단에 setting 버튼들 추가
-                        gr.HTML("""
-                            <div style="display: flex; justify-content: flex-end; gap: 8px; padding: 10px;">
-                                <div id="setting-buttons"></div>
-                            </div>
-                        """)
                         with antd.Flex(gap="small", elem_classes="setting-buttons"):
                             settingPromptBtn = antd.Button(
                                 "⚙️ set system Prompt", type="default")
@@ -129,6 +135,31 @@ with gr.Blocks(css_paths="app.css") as demo:
                                 with antd.Tabs.Item(key="render"):
                                     sandbox = gr.HTML(elem_classes="html_content")
 
+            # 버튼 이벤트 핸들러
+            settingPromptBtn.click(lambda: gr.update(
+                open=True), inputs=[], outputs=[system_prompt_modal])
+            system_prompt_modal.ok(lambda input: ({"system": input}, gr.update(
+                open=False)), inputs=[systemPromptInput], outputs=[setting, system_prompt_modal])
+            system_prompt_modal.cancel(lambda: gr.update(
+                open=False), outputs=[system_prompt_modal])
+
+            codeBtn.click(lambda: gr.update(open=True),
+                          inputs=[], outputs=[code_drawer])
+            code_drawer.close(lambda: gr.update(
+                open=False), inputs=[], outputs=[code_drawer])
+
+            historyBtn.click(history_render, inputs=[history], outputs=[history_drawer, history_output])
+            history_drawer.close(lambda: gr.update(
+                open=False), inputs=[], outputs=[history_drawer])
+
+            btn.click(
+                generation_code,
+                inputs=[input, setting, history],
+                outputs=[code_output, history, sandbox, state_tab, code_drawer]
+            )
+            
+            clear_btn.click(clear_history, inputs=[], outputs=[history])
+
             def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
                 if query is None:
                     query = ''