outsource
This commit is contained in:
leart-ramushi
parent
6506d366fc
commit
2f0a61e854
102
src/main.py
102
src/main.py
@ -20,91 +20,22 @@ st.set_page_config(
|
||||
layout="wide"
|
||||
)
|
||||
|
||||
st.markdown(""" <style> .stAppDeployButton, #MainMenu { display: none !important; } .main .block-container { padding-top: 1rem !important; } body.chat-open .main .block-container { margin-right: 400px; } iframe[height="1"] { display: none !important; } </style> """, unsafe_allow_html=True)
|
||||
|
||||
# ---------------- CHAT PANEL INJECTION ----------------
|
||||
def inject_chat_panel(is_open: bool):
|
||||
st.iframe(f"""
|
||||
<script>
|
||||
const win = window.parent;
|
||||
const doc = win.document;
|
||||
|
||||
const old = doc.getElementById('ai-chat-panel');
|
||||
if (old) old.remove();
|
||||
doc.body.classList.remove('chat-open');
|
||||
|
||||
if ({'true' if is_open else 'false'}) {{
|
||||
doc.body.classList.add('chat-open');
|
||||
|
||||
const panel = doc.createElement('div');
|
||||
panel.id = 'ai-chat-panel';
|
||||
panel.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 380px;
|
||||
height: 100vh;
|
||||
background: #ffffff;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
z-index: 999999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: -4px 0 24px rgba(0,0,0,0.08);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
`;
|
||||
|
||||
panel.innerHTML = `
|
||||
<div style="padding:1rem 1.25rem; border-bottom:1px solid #e0e0e0; display:flex; align-items:center;">
|
||||
<span style="color:#1a1a1a; font-weight:600; font-size:0.95rem;">💬 Ask AI</span>
|
||||
</div>
|
||||
<div id="ai-messages" style="flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:0.75rem;">
|
||||
<div style="color:#888; font-size:0.82rem; text-align:center;">Ask anything about your code.</div>
|
||||
</div>
|
||||
<div style="padding:0.75rem 1rem; border-top:1px solid #e0e0e0; display:flex; gap:0.5rem;">
|
||||
<input id="ai-input" type="text" placeholder="Ask about your code…"
|
||||
style="flex:1; background:#f5f5f5; border:1px solid #ddd; border-radius:6px;
|
||||
color:#1a1a1a; padding:0.5rem 0.75rem; font-size:0.85rem; outline:none;" />
|
||||
<button onclick="sendMessage()"
|
||||
style="background:#1a1a1a; color:#fff; border:none; border-radius:6px;
|
||||
padding:0.5rem 0.9rem; font-size:0.85rem; font-weight:600; cursor:pointer;">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
doc.body.appendChild(panel);
|
||||
|
||||
win.sendMessage = function() {{
|
||||
const input = doc.getElementById('ai-input');
|
||||
const msgs = doc.getElementById('ai-messages');
|
||||
const text = input.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
const userMsg = doc.createElement('div');
|
||||
userMsg.style.cssText = 'background:#1a1a1a; border-radius:8px 8px 2px 8px; padding:0.5rem 0.75rem; color:#fff; font-size:0.85rem; align-self:flex-end; max-width:85%;';
|
||||
userMsg.textContent = text;
|
||||
msgs.appendChild(userMsg);
|
||||
input.value = '';
|
||||
msgs.scrollTop = msgs.scrollHeight;
|
||||
|
||||
const aiMsg = doc.createElement('div');
|
||||
aiMsg.style.cssText = 'background:#f0f0f0; border-radius:8px 8px 8px 2px; padding:0.5rem 0.75rem; color:#1a1a1a; font-size:0.85rem; align-self:flex-start; max-width:85%;';
|
||||
aiMsg.textContent = '…';
|
||||
msgs.appendChild(aiMsg);
|
||||
msgs.scrollTop = msgs.scrollHeight;
|
||||
}};
|
||||
|
||||
doc.getElementById('ai-input').addEventListener('keydown', function(e) {{
|
||||
if (e.key === 'Enter') win.sendMessage();
|
||||
}});
|
||||
}}
|
||||
</script>
|
||||
""", height=1)
|
||||
st.markdown("""
|
||||
<style>
|
||||
.stMainBlockContainer { padding-top: 2rem !important; }
|
||||
.stAppDeployButton, #MainMenu { display: none !important; }
|
||||
.main .block-container { padding-top: 1rem !important; }
|
||||
body.chat-open .main .block-container { margin-right: 400px; }
|
||||
iframe[height="1"] { display: none !important; }
|
||||
[data-testid="stSidebar"] { z-index: 99 !important; }
|
||||
</style>
|
||||
""", unsafe_allow_html=True)
|
||||
|
||||
# ---------------- MAIN ----------------
|
||||
def main():
|
||||
file_manager = FileManager()
|
||||
navigation = FileNavigation()
|
||||
chat = ChatInterface()
|
||||
chat_manager = ChatManager()
|
||||
execution_engine = ExecutionEngine()
|
||||
output_display = OutputDisplay()
|
||||
@ -146,21 +77,19 @@ def main():
|
||||
else:
|
||||
st.session_state.editor_content = ""
|
||||
|
||||
inject_chat_panel(st.session_state.chat_open)
|
||||
chat.inject_panel(st.session_state.chat_open)
|
||||
|
||||
# ---------------- MAIN UI ----------------
|
||||
if st.session_state.active_file:
|
||||
title_col, btn_col = st.columns([5, 1])
|
||||
with title_col:
|
||||
st.subheader(f"✏️ {Path(st.session_state.active_file).name}")
|
||||
with btn_col:
|
||||
run_clicked = st.button("▶ Run", type="primary", use_container_width=True)
|
||||
|
||||
editor = CodeEditor()
|
||||
new_value = editor.display_code(
|
||||
new_value, run_clicked = editor.display_code(
|
||||
st.session_state.editor_content,
|
||||
filename=st.session_state.active_file
|
||||
)
|
||||
|
||||
# ---------------- APPLY DETECTION ----------------
|
||||
if new_value is not None:
|
||||
if new_value != st.session_state.last_applied_content:
|
||||
st.session_state.editor_content = new_value
|
||||
@ -168,6 +97,7 @@ def main():
|
||||
file_manager.save_file(st.session_state.active_file, new_value)
|
||||
st.success("Saved ✔")
|
||||
|
||||
# ---------------- RUN ----------------
|
||||
if run_clicked:
|
||||
with st.spinner("Running…"):
|
||||
st.session_state.run_result = execution_engine.run_file(
|
||||
|
||||
107
src/ui/chat.py
107
src/ui/chat.py
@ -1,45 +1,116 @@
|
||||
import streamlit as st
|
||||
|
||||
|
||||
class ChatInterface:
|
||||
"""
|
||||
Chat Interface für KI-Interaktion [1]
|
||||
Chat Interface for AI interaction, including the right-side slide-out panel.
|
||||
"""
|
||||
|
||||
def __init__(self):
|
||||
self.chat_messages = []
|
||||
|
||||
def display_chat(self, chat_manager):
|
||||
"""
|
||||
Zeigt die Chat-Schnittstelle mit Konversationsverlauf [1]
|
||||
"""
|
||||
st.title("🤖 KI-Assistent")
|
||||
# ---------------- PANEL INJECTION ----------------
|
||||
def inject_panel(self, is_open: bool):
|
||||
"""Injects or removes the fixed right-side AI chat panel via st.iframe."""
|
||||
st.iframe(f"""
|
||||
<script>
|
||||
const win = window.parent;
|
||||
const doc = win.document;
|
||||
|
||||
const old = doc.getElementById('ai-chat-panel');
|
||||
if (old) old.remove();
|
||||
doc.body.classList.remove('chat-open');
|
||||
|
||||
if ({'true' if is_open else 'false'}) {{
|
||||
doc.body.classList.add('chat-open');
|
||||
|
||||
const panel = doc.createElement('div');
|
||||
panel.id = 'ai-chat-panel';
|
||||
panel.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 380px;
|
||||
height: 100vh;
|
||||
background: #ffffff;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
z-index: 999999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: -4px 0 24px rgba(0,0,0,0.08);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
`;
|
||||
|
||||
panel.innerHTML = `
|
||||
<div style="padding:1rem 1.25rem; border-bottom:1px solid #e0e0e0; display:flex; align-items:center;">
|
||||
<span style="color:#1a1a1a; font-weight:600; font-size:0.95rem;">💬 Ask AI</span>
|
||||
</div>
|
||||
<div id="ai-messages" style="flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:0.75rem;">
|
||||
<div style="color:#888; font-size:0.82rem; text-align:center;">Ask anything about your code.</div>
|
||||
</div>
|
||||
<div style="padding:0.75rem 1rem; border-top:1px solid #e0e0e0; display:flex; gap:0.5rem;">
|
||||
<input id="ai-input" type="text" placeholder="Ask about your code…"
|
||||
style="flex:1; background:#f5f5f5; border:1px solid #ddd; border-radius:6px;
|
||||
color:#1a1a1a; padding:0.5rem 0.75rem; font-size:0.85rem; outline:none;" />
|
||||
<button onclick="sendMessage()"
|
||||
style="background:#1a1a1a; color:#fff; border:none; border-radius:6px;
|
||||
padding:0.5rem 0.9rem; font-size:0.85rem; font-weight:600; cursor:pointer;">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
doc.body.appendChild(panel);
|
||||
|
||||
win.sendMessage = function() {{
|
||||
const input = doc.getElementById('ai-input');
|
||||
const msgs = doc.getElementById('ai-messages');
|
||||
const text = input.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
const userMsg = doc.createElement('div');
|
||||
userMsg.style.cssText = 'background:#1a1a1a; border-radius:8px 8px 2px 8px; padding:0.5rem 0.75rem; color:#fff; font-size:0.85rem; align-self:flex-end; max-width:85%;';
|
||||
userMsg.textContent = text;
|
||||
msgs.appendChild(userMsg);
|
||||
input.value = '';
|
||||
msgs.scrollTop = msgs.scrollHeight;
|
||||
|
||||
const aiMsg = doc.createElement('div');
|
||||
aiMsg.style.cssText = 'background:#f0f0f0; border-radius:8px 8px 8px 2px; padding:0.5rem 0.75rem; color:#1a1a1a; font-size:0.85rem; align-self:flex-start; max-width:85%;';
|
||||
aiMsg.textContent = '…';
|
||||
msgs.appendChild(aiMsg);
|
||||
msgs.scrollTop = msgs.scrollHeight;
|
||||
}};
|
||||
|
||||
doc.getElementById('ai-input').addEventListener('keydown', function(e) {{
|
||||
if (e.key === 'Enter') win.sendMessage();
|
||||
}});
|
||||
}}
|
||||
</script>
|
||||
""", height=1)
|
||||
|
||||
# ---------------- CHAT DISPLAY ----------------
|
||||
def display_chat(self, chat_manager):
|
||||
"""Renders the Streamlit chat interface (used when not in panel mode)."""
|
||||
st.title("AI Assistant")
|
||||
|
||||
# Chat History anzeigen
|
||||
for message in self.chat_messages:
|
||||
with st.chat_message(message["role"]):
|
||||
st.markdown(message["content"])
|
||||
|
||||
# User Input
|
||||
if prompt := st.chat_input("Frage zum Code stellen..."):
|
||||
# User Nachricht anzeigen
|
||||
if prompt := st.chat_input("Ask about your code..."):
|
||||
self.chat_messages.append({"role": "user", "content": prompt})
|
||||
with st.chat_message("user"):
|
||||
st.markdown(prompt)
|
||||
|
||||
# AI Antwort generieren (via ChatManager)
|
||||
with st.chat_message("assistant"):
|
||||
response = chat_manager.generate_response(prompt)
|
||||
st.markdown(response)
|
||||
self.chat_messages.append({"role": "assistant", "content": response})
|
||||
|
||||
def add_message(self, role, content):
|
||||
"""
|
||||
Fügt eine Nachricht zur Konversation hinzu
|
||||
"""
|
||||
# ---------------- HELPERS ----------------
|
||||
def add_message(self, role: str, content: str):
|
||||
self.chat_messages.append({"role": role, "content": content})
|
||||
|
||||
def clear_history(self):
|
||||
"""
|
||||
Löscht den Chat-Verlauf
|
||||
"""
|
||||
self.chat_messages.clear()
|
||||
@ -1,9 +1,10 @@
|
||||
from streamlit_ace import st_ace
|
||||
import streamlit as st
|
||||
|
||||
|
||||
class CodeEditor:
|
||||
|
||||
def detect_language(self, filename):
|
||||
|
||||
def detect_language(self, filename: str) -> str:
|
||||
mapping = {
|
||||
".py": "python",
|
||||
".js": "javascript",
|
||||
@ -12,18 +13,32 @@ class CodeEditor:
|
||||
".json": "json",
|
||||
".md": "markdown",
|
||||
}
|
||||
|
||||
for ext, lang in mapping.items():
|
||||
if filename.endswith(ext):
|
||||
return lang
|
||||
|
||||
return "text"
|
||||
|
||||
def display_code(self, code_content, filename=""):
|
||||
|
||||
def display_code(self, code_content: str, filename: str = "") -> tuple:
|
||||
"""
|
||||
Renders a toolbar row (Apply is built into st_ace, Run is next to it)
|
||||
then the ACE editor below.
|
||||
Returns (new_value, run_clicked) where new_value is None until Apply is hit.
|
||||
"""
|
||||
language = self.detect_language(filename)
|
||||
|
||||
return st_ace(
|
||||
# --- Toolbar: filename label + Run button aligned right ---
|
||||
label_col, run_col = st.columns([6, 1])
|
||||
with label_col:
|
||||
st.caption(f" {filename.split('/')[-1] or filename}" if filename else "")
|
||||
with run_col:
|
||||
run_clicked = st.button(
|
||||
"▶ Run",
|
||||
key=f"run_{filename}",
|
||||
type="primary",
|
||||
use_container_width=True
|
||||
)
|
||||
|
||||
new_value = st_ace(
|
||||
value=code_content,
|
||||
language=language,
|
||||
theme="chrome",
|
||||
@ -33,5 +48,7 @@ class CodeEditor:
|
||||
wrap=False,
|
||||
auto_update=False,
|
||||
show_gutter=True,
|
||||
show_print_margin=False
|
||||
show_print_margin=False,
|
||||
)
|
||||
|
||||
return new_value, run_clicked
|
||||
Loading…
x
Reference in New Issue
Block a user