Skip to content

Commit 84ceb3c

Browse files
VeikkosuhonenVeikkosuhonen
committed
iframe copy button to course prompts view
1 parent eca5252 commit 84ceb3c

File tree

8 files changed

+106
-21
lines changed

8 files changed

+106
-21
lines changed

‎public/iframetest.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Iframe Test</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
height: 100vh;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
background-color: #f0f0f0;
16+
}
17+
iframe {
18+
width: 600px;
19+
height: 400px;
20+
border: 2px solid #333;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<iframe src="http://localhost:3000/v2?embedded=true" title="Example Website"></iframe>
26+
</body>
27+
</html>

‎src/client/components/ChatV2/ChatV2.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -583,12 +583,6 @@ export const ChatV2 = () => {
583583
setAssistantInstructions={(updatedInstructions) => setAssistantInstructions(updatedInstructions)}
584584
modelTemperature={parseFloat(modelTemperature)}
585585
setModelTemperature={(updatedTemperature) => setModelTemperature(String(updatedTemperature))}
586-
model={activeModel}
587-
setModel={(model) => setActiveModel(model)}
588-
showRagSelector={showRagSelector}
589-
setRagIndex={setRagIndexId}
590-
ragIndices={ragIndices}
591-
currentRagIndex={ragIndex}
592586
course={course}
593587
/>
594588

‎src/client/components/ChatV2/SettingsModal.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Box, IconButton, Modal, Slider, Typography } from '@mui/material'
33
import { useEffect, useRef, useState } from 'react'
44
import { useTranslation } from 'react-i18next'
55
import { DEFAULT_ASSISTANT_INSTRUCTIONS, DEFAULT_MODEL_TEMPERATURE } from '../../../config'
6-
import type { RagIndexAttributes } from '../../../shared/types'
76
import type { Course, Prompt } from '../../types'
87
import AssistantInstructionsInput from './AssistantInstructionsInput'
98
import PromptSelector from './PromptSelector'
@@ -14,6 +13,7 @@ import { useSearchParams } from 'react-router-dom'
1413
import { BlueButton, OutlineButtonBlack } from './generics/Buttons'
1514
import { useAnalyticsDispatch } from '../../stores/analytics'
1615
import useLocalStorageState from '../../hooks/useLocalStorageState'
16+
import { IframeCopy } from '../common/IframeCopy'
1717

1818
const useUrlPromptId = () => {
1919
const [searchParams] = useSearchParams()
@@ -28,12 +28,6 @@ interface SettingsModalProps {
2828
setAssistantInstructions: (instructions: string) => void
2929
modelTemperature: number
3030
setModelTemperature: (value: number) => void
31-
model: string
32-
setModel: (model: string) => void
33-
showRagSelector: boolean
34-
setRagIndex: (ragIndex: number | undefined) => void
35-
ragIndices?: RagIndexAttributes[]
36-
currentRagIndex?: RagIndexAttributes
3731
course?: Course
3832
}
3933

@@ -105,7 +99,6 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
10599

106100
const handleChangePrompt = (newPrompt: Prompt | undefined) => {
107101
if (!newPrompt) {
108-
console.log('Setting default prompt')
109102
setActivePrompt(undefined)
110103
setLocalStoragePrompt(undefined)
111104
setAssistantInstructions(DEFAULT_ASSISTANT_INSTRUCTIONS)
@@ -121,14 +114,12 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
121114
if (mandatoryPrompt) {
122115
handleChangePrompt(mandatoryPrompt)
123116
} else if (urlPrompt) {
124-
console.log(`Using promptId=${urlPrompt.id} defined by URL search param`)
125117
handleChangePrompt(urlPrompt)
126118
}
127119
}, [mandatoryPrompt, urlPrompt])
128120
const handleClose = async () => {
129121
//handles if the user wants to update current promts
130122
if (activePrompt) {
131-
console.log('updating active promt')
132123
await promptSaveMutation.mutateAsync({ name: activePrompt.name, promptToSave: activePrompt })
133124
}
134125
//default promt is not a saved promt so this handles the change to it

‎src/client/components/ChatV2/context.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { createContext, useContext, ReactNode } from 'react'
2+
3+
interface PromptContextType {
4+
promptId: string
5+
ragIndexId: number
6+
}
7+
8+
const PromptContext = createContext<PromptContextType | undefined>(undefined)
9+
10+
interface PromptProviderProps {
11+
children: ReactNode
12+
promptId: string
13+
ragIndexId: number
14+
}
15+
16+
export const PromptProvider: React.FC<PromptProviderProps> = ({ children, promptId, ragIndexId }) => {
17+
const value = {
18+
promptId,
19+
ragIndexId,
20+
}
21+
22+
return <PromptContext.Provider value={value}>{children}</PromptContext.Provider>
23+
}
24+
25+
export const usePromptContext = (): PromptContextType => {
26+
const context = useContext(PromptContext)
27+
if (context === undefined) {
28+
throw new Error('usePromptContext must be used within a PromptProvider')
29+
}
30+
return context
31+
}

‎src/client/components/Courses/Course/Prompt.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Response } from '../../Chat/Conversation'
99
import SystemMessage from '../../Chat/SystemMessage'
1010
import { useEditPromptMutation } from '../../../hooks/usePromptMutation'
1111
import { useParams, Link as RouterLink } from 'react-router-dom'
12+
import { IframeCopy } from '../../common/IframeCopy'
1213

1314
const ExpandButton = ({ expand, setExpand }: { expand: boolean; setExpand: SetState<boolean> }) => (
1415
<Button onClick={() => setExpand(!expand)}>{expand ? <ExpandLess /> : <ExpandMore />}</Button>
@@ -80,11 +81,12 @@ const Prompt = ({ prompt, handleDelete, mandatoryPromptId }: { prompt: PromptTyp
8081
<Link component={RouterLink} to={chatPath} variant="caption">
8182
{t('course:directPromptLink')}
8283
</Link>
83-
<Tooltip title={t('course:copyDirectPromptLinkInfo')} placement="right">
84+
<Tooltip title={t('course:copyDirectPromptLinkInfo')}>
8485
<IconButton size="small" onClick={() => navigator.clipboard.writeText(directLink)}>
8586
<ContentCopyOutlined fontSize="small" />
8687
</IconButton>
8788
</Tooltip>
89+
<IframeCopy courseId={courseId!} promptId={prompt.id} />
8890
</Box>
8991
</Box>
9092
) : (

‎src/client/components/common/IframeCopy.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { IconButton, Tooltip } from '@mui/material'
2+
import HtmlIcon from '@mui/icons-material/Html'
3+
import { useTranslation } from 'react-i18next'
4+
5+
export const IframeCopy = ({ courseId, promptId, model }: { courseId: string; promptId?: string; model?: string }) => {
6+
const { t } = useTranslation()
7+
8+
let iframeSrc = `${window.location.origin}/${courseId}?embedded=true`
9+
10+
if (promptId) {
11+
iframeSrc += `&promptId=${promptId}`
12+
}
13+
14+
if (model) {
15+
iframeSrc += `&model=${model}`
16+
}
17+
18+
const iframeHtml = `<iframe src="${iframeSrc}" width="100%" height="500px"></iframe>`
19+
20+
return (
21+
<Tooltip
22+
title={t('common:iframeCopy', { iframeHtml })}
23+
slotProps={{
24+
tooltip: {
25+
sx: {
26+
// maxWidth: 'none',
27+
whiteSpace: 'pre-wrap',
28+
// wordWrap: 'break-word',
29+
},
30+
},
31+
}}
32+
>
33+
<IconButton onClick={() => navigator.clipboard.writeText(iframeHtml)}>
34+
<HtmlIcon />
35+
</IconButton>
36+
</Tooltip>
37+
)
38+
}

‎src/client/locales/en.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040
"copy": "Copy",
4141
"tryNew": "Try the new chat",
4242
"close": "Close",
43-
"useOld": "Old chat view"
43+
"useOld": "Old chat view",
44+
"iframeCopy": "Copy embeddable iframe element:\n\n{{- iframeHtml}}"
4445
},
4546
"stats": {
4647
"timePeriodStart": "Starting",
@@ -306,4 +307,4 @@
306307
"titleV1": "This is the old chat view. You've selected the new view as default but can restore the old default here:",
307308
"buttonV1": "Select as default"
308309
}
309-
}
310+
}

‎src/client/locales/fi.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040
"curreTitle": "Curre",
4141
"tryNew": "Kokeile uutta chattiä",
4242
"close": "Sulje",
43-
"useOld": "Vanha chattinäkymä"
43+
"useOld": "Vanha chattinäkymä",
44+
"iframeCopy": "Kopioi upotettava iframe-elementti:\n\n{{- iframeHtml}}"
4445
},
4546
"stats": {
4647
"showing": "Näytetään",
@@ -306,4 +307,4 @@
306307
"titleV1": "Tämä on vanha chattinäkymä. Olet valinnut oletukseksi uuden näkymän mutta voit palauttaa vanhan tästä:",
307308
"buttonV1": "Valitse oletusarvoksi"
308309
}
309-
}
310+
}

0 commit comments

Comments
 (0)